<template>
  <div class="work-statistics flex flex-col h-full">
    <div v-if="perm.BUTTON_Export" class="page-action">
      <t-button theme="primary" @click="exportFile">
        <template #icon><svg-icon name="export" color="#fff" /></template
        >导出统计结果
      </t-button>
    </div>
    <SearchForm :fields="fields" :params="params" :search="mixinSearch">
      <template #service="{ item, params }">
        <select-service-unit
          v-model="params[item.prop]"
          :filterParams="{ statusList: ['PUBLISH'] }"
          defaultSelect
          @default-selected="search"
          :clearable="false"
          @change="mixinSearch"
        ></select-service-unit>
      </template>
    </SearchForm>
    <div class="flex-1 page-wrap">
      <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,
        }"
      >
      </t-table>
    </div>
  </div>
</template>

<script setup name="WorkStatistics">
import { ref, reactive, onMounted, computed } from 'vue';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
import useFetchTable from '@/hooks/useFetchTable';
import {
  workStatisticsListApi,
  workStatisticsInfoApi,
  workStatisticsExportApi,
  workStatisticsPassApi,
  exportWorkApi,
} from '@/api/work-hours';
import {
  timestampFilter,
  attendanceStatisticsSubmitStatusFilter,
} from '@/utils/filter';
import {
  ATTENDANCE_STATISTICS_SUBMIT_STATUS,
  STATISTICAL_DIMENSION,
} from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import usePermission from '@/hooks/usePermission';
const { perm } = usePermission();

const fields = ref([
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 90,
    colSpan: 6,
    cell: 'service',
  },
  {
    prop: 'type',
    label: '统计维度',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(STATISTICAL_DIMENSION),
    attrs: {
      onChange: () => {
        mixinSearch();
      },
    },
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          mixinSearch();
        },
      },
      // {
      //   type: 'button',
      //   text: '导出统计结果',
      //   attrs: {
      //     theme: 'success',
      //   },
      //   onClick: () => {
      //     exportFile();
      //   },
      // },
    ],
  },
]);
const mixinSearch = () => {
  if (params.serviceId) {
    search();
  }
};
const params = reactive({
  serviceId: '',
  type: 'BY_PERSON',
});

const exportFile = () => {
  exportWorkApi(params).then(() => {
    MessagePlugin.success('导出成功');
  });
};

const columns = computed(() => {
  const type = params.type;
  if (!type) {
    return [];
  }
  let map = {
    BY_PERSON: [
      { colKey: 'serviceName', title: '服务单元', width: 160, fixed: 'left' },
      { colKey: 'userInfo', title: '姓名（人员档案号）', width: 200 },
      { colKey: 'supplierName', title: '供应商', width: 160 },
      { colKey: 'actualDays', title: '实际出勤（天）', width: 138 },
      { colKey: 'weekdays', title: '工作日（天）', width: 120 },
      { colKey: 'weekends', title: '周末（天）', width: 110 },
      { colKey: 'legalHolidays', title: '法定节假日（天）', width: 150 },
      { colKey: 'workHours', title: '累计工时（小时）', width: 160 },
      { colKey: 'violationDays', title: '违规工时（天）', width: 160 },
    ],
    BY_SOP: [
      { colKey: 'serviceName', title: '服务单元', width: 160, fixed: 'left' },
      { colKey: 'sopNo', title: 'SOP流水号', width: 200 },
      { colKey: 'courseName', title: '科目名称', width: 200 },
      { colKey: 'actualDays', title: '实际出勤（天）', width: 138 },
      { colKey: 'weekdays', title: '工作日（天）', width: 120 },
      { colKey: 'weekends', title: '周末（天）', width: 110 },
      { colKey: 'legalHolidays', title: '法定节假日（天）', width: 150 },
      { colKey: 'scanPeriod', title: '扫描周期（天）', width: 160 },
      { colKey: 'markPaperPeriod', title: '阅卷周期（天）', width: 160 },
      { colKey: 'workHours', title: '累计工时（小时）', width: 160 },
      { colKey: 'violationDays', title: '违规工时（天）', width: 160 },
    ],
    BY_CRM: [
      { colKey: 'serviceName', title: '服务单元', width: 160, fixed: 'left' },
      { colKey: 'crmNo', title: '派单号', width: 200 },
      { colKey: 'crmName', title: '项目名称', width: 200 },
      { colKey: 'actualDays', title: '实际出勤（天）', width: 138 },
      { colKey: 'weekdays', title: '工作日（天）', width: 120 },
      { colKey: 'weekends', title: '周末（天）', width: 110 },
      { colKey: 'legalHolidays', title: '法定节假日（天）', width: 150 },
      { colKey: 'scanPeriod', title: '扫描周期（天）', width: 160 },
      { colKey: 'markPaperPeriod', title: '阅卷周期（天）', width: 160 },
      { colKey: 'workHours', title: '累计工时（小时）', width: 160 },
      { colKey: 'violationDays', title: '违规工时（天）', width: 160 },
    ],
    BY_CUSTOM: [
      { colKey: 'serviceName', title: '服务单元', width: 160, fixed: 'left' },
      { colKey: 'customName', title: '客户名称', width: 200 },
      { colKey: 'actualDays', title: '实际出勤（天）', width: 138 },
      { colKey: 'weekdays', title: '工作日（天）', width: 120 },
      { colKey: 'weekends', title: '周末（天）', width: 110 },
      { colKey: 'legalHolidays', title: '法定节假日（天）', width: 150 },
      { colKey: 'scanPeriod', title: '扫描周期（天）', width: 160 },
      { colKey: 'markPaperPeriod', title: '阅卷周期（天）', width: 160 },
      { colKey: 'workHours', title: '累计工时（小时）', width: 160 },
      { colKey: 'violationDays', title: '违规工时（天）', width: 160 },
    ],
    BY_SUPPLIER: [
      { colKey: 'serviceName', title: '服务单元', width: 160, fixed: 'left' },
      { colKey: 'supplierName', title: '供应商', width: 200 },
      { colKey: 'actualDays', title: '实际出勤（天）', width: 138 },
      { colKey: 'weekdays', title: '工作日（天）', width: 120 },
      { colKey: 'weekends', title: '周末（天）', width: 110 },
      { colKey: 'legalHolidays', title: '法定节假日（天）', width: 150 },
      { colKey: 'workHours', title: '累计工时（小时）', width: 160 },
      { colKey: 'violationDays', title: '违规工时（天）', width: 160 },
    ],
  };
  return map[type];
});

// const columns = [
//   { colKey: 'service', title: '服务单元', width: 160 },
//   { colKey: 'sopNo', title: 'SOP流水号', width: 200 },
//   { colKey: 'custom', title: '客户名称', width: 120 },
//   { colKey: 'province', title: '省份', width: 120 },
//   { colKey: 'city', title: '城市', width: 120 },
//   { colKey: 'scanStartTime', title: '扫描开始时间', width: 180 },
//   { colKey: 'scanEndTime', title: '扫描结束时间', width: 180 },
//   { colKey: 'markPaperStartTime', title: '阅卷开始时间', width: 180 },
//   { colKey: 'markPaperEndTime', title: '阅卷结束时间', width: 180 },
//   { colKey: 'userName', title: '姓名（人员档案号）', cell: 'user', width: 170 },
//   { colKey: 'roleName', title: '项目角色', width: 120 },
//   { colKey: 'supplier', title: '供应商' },
//   { colKey: 'attendance', title: '实际出勤（天）', width: 140 },
//   { colKey: 'weekdays', title: '工作日（天）', width: 130 },
//   { colKey: 'weekends', title: '周末（天）', width: 120 },
//   { colKey: 'holidays', title: '法定节假日（天）', width: 160 },
//   { colKey: 'workHours', title: '累计工时（小时）', width: 140 },
//   { colKey: 'submitter', title: '提交人', width: 120 },
//   {
//     colKey: 'submissionTime',
//     title: '提交时间',
//     cell: 'submit-time',
//     width: 180,
//   },
//   { colKey: 'status', title: '提交状态', cell: 'status', width: 100 },
//   {
//     title: '管理',
//     colKey: 'operate',
//     fixed: 'right',
//     width: 100,
//   },
// ];
const { pagination, tableData, fetchData, search, onChange } = useFetchTable(
  workStatisticsListApi,
  { params },
  false
);

const handleExport = () => {
  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: `确定要导出查询到的所有结果吗？`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    onConfirm: async () => {
      confirmDia.hide();
      const res = await workStatisticsExportApi(params).catch(() => {});
      if (!res) return;
      MessagePlugin.success('导出任务提交成功，请前往任务管理中下载');
    },
  });
};

onMounted(() => {});
</script>
