<script setup lang="ts">
import { ref, watch } from 'vue';
import { fetchGetOvertimeApplicationApprovalRecords } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
  formatEmptyText,
  formatOvertimeDateTime,
  getOvertimeApplicationStatusLabel
} from './overtime-application-shared';

defineOptions({ name: 'OvertimeApplicationApprovalRecordDialog' });

interface Props {
  rowData?: Api.OvertimeApplication.OvertimeApplication | null;
}

const props = defineProps<Props>();

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

const loading = ref(false);
const records = ref<Api.OvertimeApplication.OvertimeApplicationApprovalRecord[]>([]);

async function loadRecords() {
  if (!props.rowData?.id) {
    records.value = [];
    return;
  }

  loading.value = true;
  const { error, data } = await fetchGetOvertimeApplicationApprovalRecords(props.rowData.id);
  loading.value = false;

  records.value = error || !data ? [] : data;
}

watch(
  () => visible.value,
  value => {
    if (value) {
      loadRecords();
    }
  }
);
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    title="加班申请审批记录"
    width="820px"
    :loading="loading"
    :show-footer="false"
    max-body-height="72vh"
  >
    <ElTable border :data="records">
      <ElTableColumn prop="approvalRound" label="轮次" width="80" />
      <ElTableColumn label="结论" width="110">
        <template #default="{ row }">{{ getOvertimeApplicationStatusLabel(row.conclusion) }}</template>
      </ElTableColumn>
      <ElTableColumn label="审批意见" min-width="240" show-overflow-tooltip>
        <template #default="{ row }">{{ formatEmptyText(row.opinion) }}</template>
      </ElTableColumn>
      <ElTableColumn prop="auditorName" label="审批人" width="130" show-overflow-tooltip />
      <ElTableColumn label="审批时间" width="170">
        <template #default="{ row }">{{ formatOvertimeDateTime(row.createTime) }}</template>
      </ElTableColumn>
    </ElTable>
  </BusinessFormDialog>
</template>
