<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>
            <t-row :gutter="[0, 4]">
              <t-col :span="3">
                <t-form-item label="项目单号" label-width="100px">{{
                  row.crmNo
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="姓名" label-width="100px">{{
                  row.archivesInfo
                }}</t-form-item>
              </t-col>
              <t-col :span="3">
                <!-- <t-form-item label="项目角色"
                  >{{ roleTypeFilter(row.roleType) }}
                </t-form-item> -->
                <t-form-item label="项目角色" label-width="100px"
                  >{{ row.roleName }}
                </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流水号" label-width="100px"
                  >{{ row.sopNo }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="客户名称" label-width="100px"
                  >{{ row.customName }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="有效出勤" label-width="100px"
                  >{{ row.actualDays }}天
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="服务单元" label-width="100px"
                  >{{ row.serviceUnitName }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="扫描开始时间" label-width="100px"
                  >{{ timestampFilter(row.scanStartTime) }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="扫描结束时间" label-width="100px"
                  >{{ timestampFilter(row.scanEndTime) }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="评卷开始时间" label-width="100px"
                  >{{ timestampFilter(row.markPaperStartTime) }}
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item label="评卷结束时间" label-width="100px"
                  >{{ timestampFilter(row.markPaperEndTime) }}
                </t-form-item>
              </t-col>
              <!--              <t-col :span="3">-->
              <!--                <t-form-item label="实施产品">{{-->
              <!--                    row.productName-->
              <!--                  }}-->
              <!--                </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.dingExceptionCount }}次
        </t-button>
      </div>
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
      >
        <template #signIn="{ col, row }">
          <!-- {{
            row.signInTime
              ? timestampFilter(row[col.colKey], 'tt') +
                (row.signInAddress ? row.signInAddress : '')
              : '异常'
          }} -->
          <t-link
            theme="primary"
            hover="color"
            @click="showCurAddress(row.signInInfo)"
          >
            {{
              row.signInInfo
                ? timestampFilter(row.signInInfo?.signTime) +
                  (row.signInInfo?.signAddress
                    ? row.signInInfo.signAddress
                    : '')
                : '异常'
            }}
          </t-link>
        </template>
        <template #signOut="{ col, row }">
          <!-- {{
            row.signOutTime
              ? timestampFilter(row[col.colKey], 'tt') +
                (row.signOutAddress ? row.signOutAddress : '')
              : '异常'
          }} -->
          <t-link
            theme="primary"
            hover="color"
            @click="showCurAddress(row.signOutInfo)"
          >
            {{
              row.signOutInfo
                ? timestampFilter(row.signOutInfo?.signTime) +
                  (row.signOutInfo?.signAddress
                    ? row.signOutInfo.signAddress
                    : '')
                : '异常'
            }}
          </t-link>
        </template>
        <template #workHours="{ col, row }">
          {{
            row.signInInfo?.signTime && row.signOutInfo?.signTime
              ? (
                  (row.signOutInfo?.signTime - row.signInInfo?.signTime) /
                  1000 /
                  60 /
                  60
                ).toFixed(2)
              : ''
          }}
        </template>
      </t-table>
      <t-space class="sop-step-footer p-t-20px" style="flex-direction: row">
        <t-button theme="primary" @click="emit('update:visible', false)"
          >返回
        </t-button>
      </t-space>
    </div>
    <QqMap
      :longitude="longitude"
      :latitude="latitude"
      v-if="showMap"
      @close="showMap = false"
    ></QqMap>
  </my-drawer>
</template>

<script setup name="DetailDialog">
import {
  timestampFilter,
  roleTypeFilter,
  customerTypeFilter,
  attendanceSubmitStatusFilter,
} from '@/utils/filter';
import { computed, ref, watch } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { dkmxDetailApi } from '@/api/work-hours';
import { randomCode } from '@/utils/tool';
import QqMap from '@/components/common/qq-map/index.vue';
const showMap = ref(false);
const longitude = ref(null);
const latitude = ref(null);
const showCurAddress = (row) => {
  if (row?.axisX && row?.axisY) {
    longitude.value = row.axisX;
    latitude.value = row.axisY;
    showMap.value = true;
  }
};
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 || undefined,
    userId: props.row.userId,
    serviceId: props.row.serviceUnitId,
  };
});

// const { pagination, tableData, fetchData, onChange } = useFetchTable(
//   dkmxDetailApi,
//   {
//     params,
//   },
//   false
// );
const tableData = ref([]);
const fetchData = () => {
  dkmxDetailApi(params.value).then((res) => {
    tableData.value = res?.dingFormList || [];
  });
};
watch(
  () => props.visible,
  (val) => {
    if (val) fetchData();
  }
);
</script>
