<template>
  <div>
    <a-card title="绩效细则管理">
      <template #extra>
        <a-button type="primary" @click="RuleDrawerRef?.openAdd()">
          <icon-plus /> 新增细则
        </a-button>
      </template>
      <a-table :data="rules" :columns="columns" row-key="id">
        <template #action="{ record }">
          <a-space>
            <a-button type="text" @click="RuleDrawerRef?.openUpdate(record.id)">
              编辑
            </a-button>
            <a-button type="text" status="danger" @click="handleDelete(record.id)">
              删除
            </a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 细则抽屉 -->
    <RuleDrawer ref="RuleDrawerRef" @success="load" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import RuleDrawer from './components/RuleDrawer.vue'
import { deleteRule, getRuleList } from '@/apis/performance'
import type { RuleResp } from '@/apis/performance/type'

const rules = ref<RuleResp[]>([])
const RuleDrawerRef = ref()

const columns = [
  { title: '细则名称', dataIndex: 'name' },
  { title: '评分规则描述', dataIndex: 'ruleDesc' },
  { title: '满分', dataIndex: 'score' },
  { title: '权重', dataIndex: 'weight' },
  { title: '是否加分项', dataIndex: 'isExtra', render: ({ record }) => record.isExtra ? '是' : '否' },
  { title: '操作', slotName: 'action' },
]

const load = async (dimensionId: string) => {
  rules.value = await getRuleList(dimensionId)
}

onMounted(() => {
  // 假设默认加载某个维度的细则
  load('default-dimension-id')
})

const handleDelete = async (id: string) => {
  await deleteRule(id)
  Message.success('删除成功')
  load('default-dimension-id') // 重新加载数据
}
</script>
