<template>
  <a-spin :loading="loading">
    <a-descriptions :data="detailData" bordered>
      <a-descriptions-item label="员工">
        {{ data.userName }}
      </a-descriptions-item>
      <a-descriptions-item label="维度">
        {{ data.dimensionName }}
      </a-descriptions-item>
      <a-descriptions-item label="周期">
        {{ data.periodName }}
      </a-descriptions-item>
      <a-descriptions-item label="评分">
        <a-tag color="blue" size="large">{{ data.score }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="AI评价" :span="2">
        {{ data.aiComment }}
      </a-descriptions-item>
    </a-descriptions>

    <!-- 反馈表单 -->
    <a-divider orientation="left">评价反馈</a-divider>
    <a-form ref="feedbackRef" :model="feedback" :rules="rules" layout="vertical">
      <a-form-item label="是否有异议" field="level" required>
        <a-radio-group v-model="feedback.level">
          <a-radio :value="0">无异议</a-radio>
          <a-radio :value="1">部分有异议</a-radio>
          <a-radio :value="2">完全不同意</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="请说明理由" field="content" required>
        <a-textarea
          v-model="feedback.content"
          :rows="4"
          placeholder="请具体描述您对评价结果的看法..."
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" :loading="submitting" @click="handleSubmit">
          提交反馈
        </a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { submitFeedback } from '@/apis/performance'
import type { EvaluateResp, FeedbackReq } from '@/apis/performance/type'

interface Props {
  data: EvaluateResp
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'feedback'): void
}>()

const loading = ref(false)
const submitting = ref(false)
const feedbackRef = ref()

const feedback = reactive<FeedbackReq>({
  evaluateId: props.data.id,
  level: 0,
  content: '',
})

const rules = {
  level: [{ required: true, message: '请选择异议等级' }],
  content: [{ required: true, message: '请填写反馈内容' }],
}

const detailData = computed(() => [
  { label: '员工', value: props.data.userName },
  { label: '维度', value: props.data.dimensionName },
  { label: '周期', value: props.data.periodName },
  { label: '评分', value: props.data.score },
  { label: 'AI评价', value: props.data.aiComment },
])

const handleSubmit = async () => {
  const ok = await feedbackRef.value?.validate()
  if (ok) return

  submitting.value = true
  try {
    await submitFeedback(feedback)
    Message.success('反馈已提交')
    emit('feedback')
  } finally {
    submitting.value = false
  }
}
</script>
