<template>
  <a-card title="我的绩效">
    <a-table :data="data" :columns="columns" row-key="id">
      <template #action="{ record }">
        <a-button type="text" @click="openDetail(record)">查看详情</a-button>
      </template>
    </a-table>
  </a-card>

  <a-modal v-model:visible="visible" title="绩效详情">
    <EvaluateDetail v-if="selected" :data="selected" @feedback="handleFeedback" />
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import EvaluateDetail from './components/EvaluateDetail.vue'
import { getMyEvaluate } from '@/apis/performance'
import type { EvaluateResp } from '@/apis/performance/type'

const data = ref<EvaluateResp[]>([])
const visible = ref(false)
const selected = ref<EvaluateResp>()

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

const load = async () => {
  const response = await getMyEvaluate()
  data.value = response.data?.list || []
}

const openDetail = (row: EvaluateResp) => {
  selected.value = row
  visible.value = true
}

const handleFeedback = () => {
  visible.value = false
  load()
}

onMounted(load)
</script>
