<template>
  <a-card title="绩效维度管理">
    <template #extra>
      <a-button type="primary" @click="openDimensionDrawer()">新增维度</a-button>
    </template>
    <a-table :data="dimensionList" :columns="dimensionColumns" row-key="dimensionId">
      <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="openDimensionDrawer(record)">编辑</a-button>
          <a-button type="text" status="danger" @click="handleDeleteDimension(record.dimensionId)">删除</a-button>
          <a-button type="text" @click="openRuleList(record)">管理细则</a-button>
        </a-space>
      </template>
    </a-table>
  </a-card>

  <!-- 维度抽屉 -->
  <DimensionDrawer ref="dimensionDrawerRef" @success="loadDimensions" />

  <!-- 细则管理 -->
  <RuleList ref="ruleListRef" />
</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-setting/index'
import type { PerformanceDimension } from '@/apis/performance-setting/type.ts'

const dimensionList = ref<PerformanceDimension[]>([])
const dimensionDrawerRef = ref()
const ruleListRef = ref()

const dimensionColumns = [
  { title: '维度名称', dataIndex: 'dimensionName' },
  { title: '岗位', dataIndex: 'deptName' },
  { title: '描述', dataIndex: 'description' },
  { title: '状态', slotName: 'status' },
  { title: '操作', slotName: 'action' },
]

const loadDimensions = async () => {
  const res = await getDimensionList()
  dimensionList.value = res.data || []
}

const openDimensionDrawer = (record?: PerformanceDimension) => {
  dimensionDrawerRef.value.open(record)
}

const handleDeleteDimension = async (id: string) => {
  await deleteDimension(id)
  loadDimensions()
}

const openRuleList = (dimension: PerformanceDimension) => {
  ruleListRef.value.open(dimension)
}

onMounted(loadDimensions)
</script>
