<template>
  <div>
    <a-card title="绩效维度管理">
      <template #extra>
        <a-button type="primary" @click="DimensionDrawerRef?.onAdd()">
          <icon-plus /> 添加维度
        </a-button>
      </template>
      <a-table :data="dimensions" :columns="columns" row-key="id">
        <template #status="{ record }">
          <a-tag :color="record.status === 0 ? 'green' : 'red'">
            {{ record.status === 0 ? '启用' : '禁用' }}
          </a-tag>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button type="text" @click="DimensionDrawerRef?.onUpdate(record.id)">
              编辑
            </a-button>
            <a-button type="text" status="danger" @click="handleDelete(record.id)">
              删除
            </a-button>
            <a-button type="text" @click="openRuleList(record.id)">
              管理细则
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 维度抽屉 -->
    <DimensionDrawer ref="DimensionDrawerRef" @success="load" />
    <!-- 细则列表 -->
    <RuleList ref="RuleListRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DimensionDrawer from './components/DimensionDrawer.vue'
import RuleList from './components/RuleList.vue'
import { deleteDimension, getDimensionList } from '@/apis/performance'
import type { DimensionResp } from '@/apis/performance/type'

const dimensions = ref<DimensionResp[]>([])
const DimensionDrawerRef = ref()
const RuleListRef = ref()

const columns = [
  { title: '维度名称', dataIndex: 'name' },
  { title: '权重', dataIndex: 'weight', render: ({ record }) => `${record.weight}%` },
  { title: '细则数量', dataIndex: 'ruleCount' },
  { title: '状态', slotName: 'status' },
  { title: '操作', slotName: 'action' },
]

const load = async () => {
  const response = await getDimensionList()
  dimensions.value = await getDimensionList().data || []
}

onMounted(load)

const handleDelete = async (id: string) => {
  await deleteDimension(id)
  load()
}

const openRuleList = (dimensionId: string) => {
  RuleListRef.value.open(dimensionId)
}
</script>
