<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    header="异常详情"
    size="80%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    :footer="false"
    @close="emit('update:visible', false)"
  >
    <div class="sop-step">
      <div class="t-tabs sop-step-list">
        <div class="t-tabs__content">
          <div class="t-tab-panel">
            <t-form colon label-width="80px" class="sop-step-body">
              <t-row :gutter="[0, 4]">
                <t-col :span="3">
                  <t-form-item label="异常编号">{{ row.code }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="服务单元">{{
                    row.serviceName
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="SOP流水号">{{ row.sopNo }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="姓名">{{
                    row.createRealName
                  }}</t-form-item>
                </t-col>
                <!-- <t-col :span="3">
                  <t-form-item label="供应商">{{
                    row.supplierName
                  }}</t-form-item>
                </t-col> -->
                <t-col :span="3">
                  <t-form-item label="客户名称">{{
                    row.customName
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="客户类型">{{
                    customerTypeFilter(row.customType)
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="异常类型">{{
                    row.dingExceptionTypeStr
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="异常日期">{{
                    row.exceptionTime
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="补卡时间">{{
                    timestampFilter(row.applyTime)
                  }}</t-form-item>
                </t-col>
                <t-col :span="12">
                  <t-form-item label="理由">{{ row.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="审核状态">{{
                    row.statusStr
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="当前审核人">{{
                    row.approveUserName
                  }}</t-form-item>
                </t-col>
                <t-col :span="3">
                  <t-form-item label="申请时间">{{
                    timestampFilter(row.createTime)
                  }}</t-form-item>
                </t-col>
              </t-row>
            </t-form>
            <t-space class="sop-step-footer" style="flex-direction: row">
              <t-button theme="primary" @click="emit('update:visible', false)"
                >返回</t-button
              >
            </t-space>
            <!-- setup history -->
            <div v-if="flowApproveHistoryList.length" class="sop-step-history">
              <div class="sop-step-history-label" @click="toViewHistory">
                <ChevronRightDoubleIcon v-if="stepHistoryShow" />
                <ChevronLeftDoubleIcon v-else />
                流程动态
              </div>
              <transition name="fade-slide" mode="out-in" appear>
                <div v-if="stepHistoryShow" class="sop-step-history-content">
                  <div class="content-head">
                    <h2>
                      {{ row.statusStr }}
                    </h2>
                  </div>
                  <div class="content-body">
                    <t-collapse>
                      <t-collapse-panel
                        v-for="(item, findex) in flowApproveHistoryList"
                        :key="findex"
                        :header="item.taskName"
                      >
                        <template #headerRightContent>
                          <t-space size="small">
                            <span class="collapse-head-right">{{
                              timestampFilter(item.createTime)
                            }}</span>
                            <t-tag
                              :theme="
                                item.approveOperation === 'REJECT'
                                  ? 'danger'
                                  : 'success'
                              "
                              variant="light"
                            >
                              {{ item.approveRemark }}
                            </t-tag>
                          </t-space>
                        </template>
                        <div class="content-detail">
                          <div class="content-detail-head">
                            {{ item.approveUserName || '--' }}
                          </div>
                          <div class="content-detail-body">
                            <p
                              >开始处理：{{
                                timestampFilter(item.createTime)
                              }}</p
                            >
                            <p>处理耗时：{{ item.duration }}</p>
                          </div>
                        </div>
                      </t-collapse-panel>
                    </t-collapse>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>
    </div>
  </my-drawer>
</template>

<script setup name="AbnormalDetailDialog">
import { workHoursCheckDetailApi } from '@/api/work-hours';
import { timeNumberToText } from '@/utils/tool';
import { timestampFilter, customerTypeFilter } from '@/utils/filter';
import { ref, watch } from 'vue';
import {
  ChevronLeftDoubleIcon,
  ChevronRightDoubleIcon,
} from 'tdesign-icons-vue-next';
const emit = defineEmits(['update:visible', 'confirm']);
const props = defineProps({
  visible: Boolean,
  row: {
    type: Object,
    default() {
      return {};
    },
  },
});

const stepHistoryShow = ref(false);
const flowApproveHistoryList = ref([]);

const getUrls = (type) => {
  const list = props.row.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;
  // });
  for (let i = data.length - 1; i >= 0; i--) {
    let item = data[i];
    item.duration =
      i === data.length - 1
        ? '-'
        : timeNumberToText(item.createTime - lastTime);
    lastTime = item.createTime;
  }
  return data;
}
const initDetail = async () => {
  stepHistoryShow.value = false;
  flowApproveHistoryList.value = [];
  const res = await workHoursCheckDetailApi(props.row.objId);
  flowApproveHistoryList.value = getFlowApproveHistoryList(
    res.flowApproveHistoryList
  );
};
const toViewHistory = () => {
  stepHistoryShow.value = !stepHistoryShow.value;
};

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