<template>
  <my-dialog
    :visible="visible"
    header="异常处理审核"
    :width="1100"
    attach="body"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <t-form colon>
      <t-row :gutter="[0, 4]">
        <t-col :span="3">
          <t-form-item label="异常编号">{{ curRow.code }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="服务单元">{{ curRow.serviceName }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="SOP流水号">{{ tbDingApply.sopNo }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="姓名">{{ curRow.createRealName }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="客户名称">{{ curRow.customName }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="客户类型">{{
            customerTypeFilter(curRow.customType)
          }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="异常类型">{{
            tbDingApply.dingExceptionTypeStr
          }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="异常日期">{{
            tbDingApply.exceptionTime
          }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="补卡时间">{{
            timestampFilter(tbDingApply.applyTime)
          }}</t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="理由">{{ tbDingApply.reason }}</t-form-item>
        </t-col>
        <t-col :span="12">
          <t-form-item label="附件/截图">
            <attachment-view
              :imageList="getUrls('image')"
              :fileList="getUrls('file')"
              :imgSize="60"
            ></attachment-view>
          </t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="审核状态">{{ curRow.statusStr }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="当前审核人">{{
            tbDingApply.approveUserName
          }}</t-form-item>
        </t-col>
        <t-col :span="3">
          <t-form-item label="申请时间">{{
            timestampFilter(tbDingApply.createTime)
          }}</t-form-item>
        </t-col>
      </t-row>

      <t-row :gutter="[0, 8]" style="margin-top: 30px">
        <t-col :span="12">
          <t-form-item label="审核" required-mark>
            <t-radio-group
              v-model="dingExceptionApprove"
              allow-uncheck
              :options="optionList"
            ></t-radio-group>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="handleAudit">保存</t-button>
    </template>
  </my-dialog>
</template>

<script setup name="AbnormalAudit">
import { ref, watch } from 'vue';
import {
  workHoursWaitCheckAuditApi,
  workHoursCheckDetailApi,
} from '@/api/work-hours';
import { timeNumberToText } from '@/utils/tool';
import { timestampFilter, customerTypeFilter } from '@/utils/filter';
// import { customerTypeFilter, timestampFilter } from '@/utils/filter';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';

const emit = defineEmits(['update:visible', 'confirm']);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const crmInfo = ref({});
const tbDingApply = ref({});
const stepHistoryShow = ref(false);
const flowApproveHistoryList = ref([]);
const getUrls = (type) => {
  const list = tbDingApply.value.attachmentPaths?.split(',') || [];
  const imgs = ['jpg', 'png', 'jpeg'];
  if (type === 'image') {
    return list.filter((item) => {
      const evt = item.split('.').slice(-1)[0];
      return imgs.includes(evt);
    });
  } else {
    return list.filter((item) => {
      const evt = item.split('.').slice(-1)[0];
      return !imgs.includes(evt);
    });
  }
};
function getFlowApproveHistoryList(data) {
  if (!data) return [];

  let lastTime = 0;
  return data.map((item, index) => {
    let nitem = { ...item };
    nitem.duration =
      index === 0 ? '-' : timeNumberToText(item.createTime - lastTime);
    lastTime = item.createTime;
    return nitem;
  });
}
const initDetail = async () => {
  stepHistoryShow.value = false;
  flowApproveHistoryList.value = [];
  const res = await workHoursCheckDetailApi(props.curRow.objId);
  tbDingApply.value = res.tbDingApply;
  crmInfo.value = res.crmInfo;
  flowApproveHistoryList.value = getFlowApproveHistoryList(
    res.flowApproveHistoryList
  );
};
const toViewHistory = () => {
  stepHistoryShow.value = !stepHistoryShow.value;
};

const dingExceptionApprove = ref('PASS');
const optionList = ref([
  {
    label: '通过',
    value: 'PASS',
  },
  {
    label: '拒绝',
    value: 'NO_PASS',
  },
]);
const handleAudit = async () => {
  const actionName = dingExceptionApprove.value === 'PASS' ? '通过' : '拒绝';
  const warningBody = `确定要${actionName}当前记录吗`;

  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: warningBody,
    confirmBtn: '确定',
    cancelBtn: '取消',
    onConfirm: async () => {
      confirmDia.hide();
      let data = {
        dingExceptionApprove: dingExceptionApprove.value,
        taskId: props.curRow.taskId,
      };
      const res = await workHoursWaitCheckAuditApi(data, false).catch(() => {});
      if (!res) return;
      MessagePlugin.success('操作成功');
      emit('update:visible', false);
      emit('confirm');
    },
  });
};

watch(
  () => props.visible,
  (val) => {
    if (val) initDetail();
  }
);
</script>
