<template>
  <a-card title="员工绩效评估">
    <a-form layout="inline" style="margin-bottom: 16px">
      <a-form-item label="绩效周期">
        <a-select v-model="query.periodId" placeholder="请选择周期" allow-clear>
          <a-option v-for="p in periods" :key="p.id" :value="p.id">{{ p.name }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="维度">
        <a-select v-model="query.dimensionId" placeholder="请选择维度" allow-clear>
          <a-option v-for="d in dimensions" :key="d.id" :value="d.id">{{ d.name }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-input v-model="query.keyword" placeholder="姓名/工号" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="load">查询</a-button>
      </a-form-item>
    </a-form>

    <a-table :data="data" :columns="columns" row-key="id">
      <template #action="{ record }">
        <a-button type="text" @click="openEvaluate(record)">
          开始评估
        </a-button>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getDimensionList, getEvaluatePage, getPeriodList, startEvaluate } from '@/apis/performance'
import type { EvaluateQuery, EvaluateResp } from '@/apis/performance/type'

const periods = ref([])
const dimensions = ref([])
const query = ref<EvaluateQuery>({})
const data = ref<EvaluateResp[]>([])

const columns = [
  { title: '员工', dataIndex: 'userName' },
  { title: '维度', dataIndex: 'dimensionName' },
  { title: '周期', dataIndex: 'periodName' },
  { title: '评分', dataIndex: 'score' },
  { title: '操作', slotName: 'action' },
]

const load = async () => {
  data.value = await getEvaluatePage(query.value)
}

onMounted(async () => {
  periods.value = await getPeriodList()
  dimensions.value = await getDimensionList()
  load()
})

const openEvaluate = async (row: EvaluateResp) => {
  await startEvaluate({
    userId: row.userId,
    dimensionId: row.dimensionId,
    ruleId: row.ruleId,
    periodId: row.periodId,
  })
  Message.success('评估已启动')
  load()
}
</script>
