<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="">
      <t-collapse class="sop-step-mid" defaultExpandAll>
        <t-collapse-panel disabled>
          <t-form colon label-width="72px">
            <t-row :gutter="[0, 4]">
              <t-col :span="3">
                <t-form-item label="项目单号">{{ row.crmNo }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="姓名">{{ row.archivesInfo }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="项目角色">{{
                    roleTypeFilter(row.roleType)
                  }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="所属供应商" label-width="100px">{{ row.supplierName }}
                </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.customName
                  }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="有效出勤">{{
                    row.actualDays
                  }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="考试开始时间" label-width="100px">{{
                    timestampFilter(row.approachTime)
                  }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="考试结束时间" label-width="100px">{{
                    timestampFilter(row.departureTime)
                  }}
                </t-form-item>
              </t-col>
              <!--              <t-col :span="3">-->
              <!--                <t-form-item label="实施产品">{{-->
              <!--                    row.productName-->
              <!--                  }}-->
              <!--                </t-form-item>-->
              <!--              </t-col>-->
              <t-col :span="3">
                <t-form-item label="服务单元">{{
                    row.serviceUnitName
                  }}
                </t-form-item>
              </t-col>
            </t-row>
          </t-form>
        </t-collapse-panel>
      </t-collapse>
      <div style="margin-bottom: 20px">
        <t-button variant="outline">
          <template #icon>
            <svg-icon name="effective-attendance" color="#00B42A"/>
          </template
          >
          有效出勤&nbsp;&nbsp;&nbsp;&nbsp;{{ row.actualDays }}天
        </t-button>&nbsp;&nbsp;
        <t-button variant="outline">
          <template #icon>
            <svg-icon name="working-hours" color="#262626"/>
          </template
          >
          共计工时&nbsp;&nbsp;&nbsp;&nbsp;{{ row.workHours }}天
        </t-button>&nbsp;&nbsp;
        <t-button variant="outline">
          <template #icon>
            <svg-icon name="anomalies" color="#F53F3F"/>
          </template
          >
          异常共计&nbsp;&nbsp;&nbsp;&nbsp;{{ row.exceptionCount }}天
        </t-button>
      </div>
      <t-table
          size="small"
          row-key="id"
          :columns="columns"
          :data="tableData"
          bordered
          :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 20,

          total: pagination.total,
          current: pagination.pageNumber,
        }"
      >
        <template #signIn="{ col, row }">
          {{ row.signInTime ? timestampFilter(row[col.colKey], 'tt') + (row.signInAddress?row.signInAddress:'') : '异常' }}
        </template>
        <template #signOut="{ col, row }">
          {{ row.signOutTime ? timestampFilter(row[col.colKey], 'tt') + (row.signOutAddress?row.signOutAddress:'') : '异常' }}
        </template>
        <template #workHours="{ col, row }">
          {{ row.signOutTime && row.signInTime ? ((row.signOutTime - row.signInTime) / 1000 / 60 / 60).toFixed(2) : '' }}
        </template>
      </t-table>
      <t-space class="sop-step-footer" style="flex-direction: row">
        <t-button theme="primary" @click="emit('update:visible', false)"
        >返回
        </t-button
        >
      </t-space>
    </div>

  </my-drawer>
</template>

<script setup name="DetailDialog">
import {timestampFilter, roleTypeFilter, customerTypeFilter, attendanceSubmitStatusFilter} from '@/utils/filter';
import {computed, reactive, watch} from 'vue';
import useFetchTable from "@/hooks/useFetchTable";
import {detail} from "@/api/work-hours";
import {randomCode} from "@/utils/tool";

const emit = defineEmits(['update:visible', 'confirm']);
const props = defineProps({
  visible: Boolean,
  row: {
    type: Object,
    default() {
      return {};
    },
  },
});
const columns = [
  {colKey: 'signDate', title: '日期', width: 100},
  {colKey: 'signInTime', title: '签到', cell: 'signIn',width: 160},
  {colKey: 'signOutTime', title: '签退', width: 160, cell: 'signOut'},
  {colKey: 'workHours', title: '工时(小时)', width: 100, cell: 'workHours'},
];

const params = computed(() => {
  return {
    sopNo: props.row.sopNo,
    archivesId: props.row.archivesId,
  };
});

const {pagination, tableData, fetchData} = useFetchTable(
    detail,
    {
      params,
    }, false
);


watch(
    () => props.visible,
    (val) => {
      if (val)

        fetchData()

    }
);
</script>
