<script setup lang="ts">
/* eslint-disable no-void */
import { computed, ref, watch } from 'vue';
import {
  fetchGetMonthlyReportApprovalRecords,
  fetchGetProjectReportApprovalRecords,
  fetchGetWeeklyReportApprovalRecords
} from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
  WORK_REPORT_TYPE_LABEL,
  type WorkReportRow,
  type WorkReportType,
  formatDate,
  formatDateTime,
  getWorkReportStatusLabel
} from '../types';

/** 格式化文本，空值显示 -- */
function formatTextOrDash(value?: string | number | null) {
  if (value === null || value === undefined || value === '') {
    return '--';
  }
  return String(value);
}

defineOptions({ name: 'WorkReportApprovalRecordDialog' });

const visible = defineModel<boolean>('visible', { default: false });

const props = defineProps<{
  reportType: WorkReportType;
  rowData?: WorkReportRow | null;
}>();

const loading = ref(false);
const records = ref<
  Array<Api.WorkReport.Common.WorkReportApprovalRecord | Api.WorkReport.Monthly.MonthlyReportApprovalRecord>
>([]);
const title = computed(() => `${WORK_REPORT_TYPE_LABEL[props.reportType]}审批记录`);
const monthlyRecords = computed(() => records.value as Api.WorkReport.Monthly.MonthlyReportApprovalRecord[]);

watch(
  [visible, () => props.rowData?.id, () => props.reportType],
  ([isVisible, currentId]) => {
    if (!isVisible) return;
    // visible 为 true（首次打开、换行、换报告类型）时都重新加载记录
    if (currentId) {
      loadRecords();
    }
  },
  { immediate: true }
);

async function loadRecords() {
  if (!props.rowData?.id) return;

  loading.value = true;
  let result;

  if (props.reportType === 'weekly') {
    result = await fetchGetWeeklyReportApprovalRecords(props.rowData.id);
  } else if (props.reportType === 'monthly') {
    result = await fetchGetMonthlyReportApprovalRecords(props.rowData.id);
  } else {
    result = await fetchGetProjectReportApprovalRecords(props.rowData.id);
  }
  loading.value = false;

  records.value = !result.error && result.data ? result.data : [];
}
</script>

<template>
  <BusinessFormDialog v-model="visible" :title="title" preset="lg" :loading="loading" :show-footer="false">
    <ElTable v-if="reportType !== 'monthly'" border :data="records">
      <ElTableColumn prop="approvalRound" label="轮次" width="80" />
      <ElTableColumn label="结论" width="100">
        <template #default="{ row }">
          {{ getWorkReportStatusLabel(row.conclusion) }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="opinion" label="审批意见" min-width="220" show-overflow-tooltip />
      <ElTableColumn prop="auditorName" label="审批人" width="120" />
      <ElTableColumn label="审批时间" width="170">
        <template #default="{ row }">
          {{ formatDateTime(row.createTime) }}
        </template>
      </ElTableColumn>
    </ElTable>

    <div v-else class="work-report-approval-records">
      <ElCard v-for="item in monthlyRecords" :key="item.id">
        <template #header>
          <div class="flex items-center justify-between gap-12px">
            <span>第 {{ item.approvalRound }} 轮 · {{ getWorkReportStatusLabel(item.conclusion) }}</span>
            <span class="text-12px text-#64748b">{{ item.auditorName }} · {{ formatDateTime(item.createTime) }}</span>
          </div>
        </template>
        <ElDescriptions :column="2" border size="small">
          <ElDescriptionsItem label="审批意见" :span="2">{{ formatTextOrDash(item.opinion) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="面谈时间">{{ formatDate(item.meetingDate) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="绩效结果">{{ formatTextOrDash(item.performanceResult) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="优势描述">{{ formatTextOrDash(item.strengthDesc) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="优势事例">{{ formatTextOrDash(item.strengthExample) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="劣势描述">{{ formatTextOrDash(item.weaknessDesc) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="劣势事例">{{ formatTextOrDash(item.weaknessExample) }}</ElDescriptionsItem>
          <ElDescriptionsItem label="改进建议" :span="2">
            {{ formatTextOrDash(item.improvementSuggestion) }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="被考核人签字">
            {{ formatTextOrDash(item.employeeSignName) }} / {{ formatDate(item.employeeSignedDate) }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="上级签字">
            {{ formatTextOrDash(item.supervisorSignName) }} / {{ formatDate(item.supervisorSignedDate) }}
          </ElDescriptionsItem>
        </ElDescriptions>
      </ElCard>
    </div>
  </BusinessFormDialog>
</template>

<style scoped>
.work-report-approval-records {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
