<template>
  <div class="flex flex-col h-full">
    <SearchForm :fields="fields" :params="params" showAll :search="mixinSearch">
      <template #service="{ item, params }">
        <select-service-unit
          v-model="params[item.prop]"
          :filterParams="{ statusList: ['PUBLISH'] }"
        ></select-service-unit>
      </template>
      <template #supplier="{ item, params }">
        <select-supplier v-model="params[item.prop]" type="HUMAN">
        </select-supplier>
      </template>
    </SearchForm>

    <div class="flex-1 page-wrap">
      <p v-if="statisticsInfo" class="page-wrap-tips">
        <t-space :size="0">
          <span>
            <ErrorCircleFilledIcon /> 考勤总计：{{ statisticsInfo.total }}
          </span>
          <span>异常考勤：{{ statisticsInfo.abnormal }}</span>
          <span>累计人天：{{ statisticsInfo.allDays }}天</span>
          <span>累计工时：{{ statisticsInfo.allHours?.toFixed(1) }}小时</span>
          <template #separator>
            <t-divider layout="vertical" />
          </template>
        </t-space>
      </p>

      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
          current: pagination.pageNumber,
        }"
      >
        <template #sign-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #status="{ col, row }">
          <status-tag
            :value="row[col.colKey]"
            type="attendanceResult"
          ></status-tag>
        </template>
        <template #type="{ col, row }">
          {{ attendanceTypeFilter(row[col.colKey]) }}
        </template>
        <template #address="{ col, row }">
          <t-link theme="primary" hover="color" @click="showCurAddress(row)">
            {{ row[col.colKey] }}
          </t-link>
        </template>
      </t-table>
    </div>
    <QqMap
      :longitude="longitude"
      :latitude="latitude"
      v-if="showMap"
      @close="showMap = false"
    ></QqMap>
  </div>
</template>

<script setup name="WorkAttendanceDetail">
import { reactive, ref, computed } from 'vue';
import { omit } from 'lodash';
import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';

import useFetchTable from '@/hooks/useFetchTable';
import {
  workAttendanceDetailListApi,
  workStatisticsDetailInfoApi,
} from '@/api/work-hours';
import { timestampFilter, attendanceTypeFilter } from '@/utils/filter';
import { ATTENDANCE_RESULT, ATTENDANCE_TYPE } from '@/config/constants';
import { dictToOptionList } 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 fields = ref([
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 90,
    colSpan: 6,
    cell: 'service',
  },
  {
    prop: 'userName',
    label: '姓名',
    labelWidth: 80,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'createTime',
    label: '考勤日期',
    type: 'daterange',
    labelWidth: 90,
    colSpan: 12,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
          getStatisticsInfo();
        },
      },
    ],
  },
  {
    prop: 'supplierId',
    label: '所属供应商',
    type: 'select',
    labelWidth: 90,
    colSpan: 6,
    cell: 'supplier',
  },
  {
    prop: 'custom',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'sopNo',
    label: 'SOP流水号',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'abnormal',
    type: 'number',
    label: '考勤异常数',
    labelWidth: 90,
    colSpan: 6,
    attrs: {
      theme: 'column',
      decimalPlaces: 0,
      max: 1000000,
      min: 0,
      style: 'width: 100%',
      label: '>',
    },
  },
  {
    prop: 'type',
    type: 'select',
    label: '考勤类型',
    labelWidth: 90,
    colSpan: 6,
    options: dictToOptionList(ATTENDANCE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'status',
    type: 'select',
    label: '考勤结果',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(ATTENDANCE_RESULT),
    attrs: {
      clearable: true,
    },
  },
]);
const mixinSearch = () => {
  search();
  getStatisticsInfo();
};
const params = reactive({
  serviceId: '',
  userName: '',
  createTime: [],
  supplierId: '',
  custom: '',
  sopNo: '',
  abnormal: null,
  type: null,
  status: null,
});
const computedParams = computed(() => {
  let data = omit(params, ['createTime']);
  data.startTime = params.createTime[0];
  data.endTime = params.createTime[1];
  return data;
});

const columns = [
  { colKey: 'service', title: '服务单元', width: 140 },
  { colKey: 'sopNo', title: 'SOP流水号', width: 200 },
  { colKey: 'custom', title: '客户名称', width: 140 },
  { colKey: 'province', title: '省份', minWidth: 100 },
  { colKey: 'city', title: '城市', minWidth: 100 },
  { colKey: 'userName', title: '姓名', width: 140 },
  { colKey: 'roleName', title: '项目角色', width: 140 },
  { colKey: 'supplier', title: '所属供应商', width: 140 },
  { colKey: 'signDate', title: '考勤日期', width: 180 },
  { colKey: 'type', title: '考勤类型', cell: 'type', width: 100 },
  { colKey: 'signTime', title: '打卡时间', cell: 'sign-time', width: 180 },
  { colKey: 'address', title: '打卡地址', cell: 'address', minWidth: 200 },
  { colKey: 'status', title: '考勤结果', fixed: 'right', width: 100 },
];
const { pagination, tableData, search, onChange } = useFetchTable(
  workAttendanceDetailListApi,
  {
    params: computedParams,
  }
);
let statisticsInfo = ref(null);
const getStatisticsInfo = async () => {
  const res = await workStatisticsDetailInfoApi(computedParams.value).catch(
    () => {}
  );
  statisticsInfo.value = res || null;
};
</script>
