<script setup lang="ts">
import type { EmployeeFlowApi } from '#/api/hr/employeeFlow';

import { computed, onMounted, shallowRef } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import {
  Button,
  Descriptions,
  DescriptionsItem,
  Skeleton,
} from 'ant-design-vue';

import { apiDetail } from '#/api/hr/employeeFlow';
import employeeDetailDrawer from '#/views/hr/employeeInfo/employee-detail-drawer.vue';

import { flowTypeOptions } from './data';

defineOptions({
  name: 'HrDescription',
  inheritAttrs: false,
});

const props = defineProps<{ businessId: number | string }>();

const data = shallowRef<EmployeeFlowApi.EmployeeFlowVo>();
onMounted(async () => {
  const resp = await apiDetail(
    typeof props.businessId === 'number'
      ? props.businessId
      : Number.parseInt(props.businessId),
  );
  data.value = resp;
});

const [EmployeeDetailDrawer, employeeDetailDrawerApi] = useVbenDrawer({
  connectedComponent: employeeDetailDrawer,
});

const flowType = computed(() => {
  return (
    flowTypeOptions.find((item) => item.value === data.value?.flowType)
      ?.label ?? '未知'
  );
});

function showEmployeeDetail() {
  // formDrawerApi.setData({ id: row.id }).open();
  employeeDetailDrawerApi.setData({ id: data.value?.employeeId }).open();
}

// function formatDate(date: string) {
//   return dayjs(date).format('YYYY-MM-DD');
// }
</script>

<template>
  <div class="rounded-[6px] border p-2">
    <EmployeeDetailDrawer />
    <Descriptions
      v-if="data"
      :column="1"
      bordered
      size="middle"
      :label-style="{ width: '150px' }"
    >
      <DescriptionsItem label="审批类型">
        {{ flowType }}
      </DescriptionsItem>
      <!-- <DescriptionsItem label="请假时间">
        {{ formatDate(data.startDate) }} - {{ formatDate(data.endDate) }}
      </DescriptionsItem> -->
      <DescriptionsItem label="员工信息详情">
        <Button type="link" @click="showEmployeeDetail()">
          点击查看员工信息
        </Button>
      </DescriptionsItem>
      <template v-if="data.auditLogList">
        <DescriptionsItem
          v-for="(auditLog, index) in data.auditLogList"
          :label="auditLog.auditFieldName"
          :key="index"
        >
          {{ auditLog.afterVal }}
        </DescriptionsItem>
      </template>
      <DescriptionsItem label="内容">
        {{ data.remark || '无' }}
      </DescriptionsItem>
    </Descriptions>

    <Skeleton active v-else />
  </div>
</template>
