<script setup lang="ts">
import { ref, watch } from 'vue';
import { fetchPerformanceSheetResponseRecords } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import { formatDateTime, getPerformanceActionLabel } from './performance-shared';

defineOptions({ name: 'PerformanceRecordDialog' });

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

const props = withDefaults(defineProps<Props>(), {
  rowData: null
});

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

const loading = ref(false);
const responseRecords = ref<Api.Performance.Sheet.ResponseRecord[]>([]);

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

  loading.value = true;
  const { error, data } = await fetchPerformanceSheetResponseRecords(props.rowData.id);
  responseRecords.value = error || !data ? [] : data;
  loading.value = false;
}

watch(visible, isVisible => {
  if (isVisible) {
    loadData();
  }
});
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    title="下属反馈历史"
    preset="lg"
    append-to-body
    :show-footer="false"
    :loading="loading"
  >
    <ElTable border :data="responseRecords">
      <ElTableColumn prop="roundNo" label="轮次" width="80" />
      <ElTableColumn label="动作" width="110">
        <template #default="{ row }">{{ getPerformanceActionLabel(row.actionType) }}</template>
      </ElTableColumn>
      <ElTableColumn prop="responderName" label="反馈人" width="120" />
      <ElTableColumn prop="opinion" label="反馈意见" min-width="240" show-overflow-tooltip />
      <ElTableColumn label="时间" width="160">
        <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
      </ElTableColumn>
    </ElTable>
  </BusinessFormDialog>
</template>
