<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btn-event="onBtnClicked" />
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="['punchCount','reportCount','dealCount'].includes(column.key)">
          <a @click="showRecordList(record, column.key)">{{ text }}</a>
        </template>
      </template>
    </BasicTable>
    <a-modal
      width="60%"
      v-model:open="mapVisible"
      title="位置信息"
      @ok="mapVisible = false"
      :destroyOnClose="true"
    >
      <Map ref="mapRef" :page="'inspectionrecorduser'" :data="modalData"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './utils'
import Map from '@/components/illegalconstruction/Map.vue'
import { GetPunchStatistics, getUserCountApi } from '@/api/illegalconstruction/statistical'
import { getAppEnvConfig } from '@/utils/env';
import axios from "axios";
import dayjs from "dayjs";
const { VITE_GLOB_API_URL } = getAppEnvConfig();

const mapVisible = ref(false);
const mapRef = ref(null);
const modalData = ref([]);
const [registerTable, { getForm }] =useTable({
  title: '巡查台账-人员',
  api: GetPunchStatistics,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  rowKey: 'id',
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  // 搜索
  handleSearchInfoFn(info) {
    return info;
  },
  beforeFetch: (params) => {
    let result = { 
      ...params,
    };
    if(params.begindate){
      result.begindate = dayjs(params.begindate).startOf('day').format('YYYY-MM-DD HH:mm:ss')
    }
    if(params.enddate){
      result.enddate = dayjs(params.enddate).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    }
    return result;
  },

  // actionColumn: {
  //   width: 80,
  //   title: '操作',
  //   dataIndex: 'action',
  //   fixed: 'right',
  // },
});
const onBtnClicked = (domId) => {
  switch (domId) {
    case 'btnExport':
      const form = getForm();
      const params = form.getFieldsValue();
      if(params.begindate){
        params.begindate = dayjs(params.begindate).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      }
      if(params.enddate){
        params.enddate = dayjs(params.enddate).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      }
      axios({
        method: 'get',
        url: VITE_GLOB_API_URL + '/api/MiViolationReport/ExportPunchStatistics',
        params,
        headers: {
          'X-Token': localStorage.getItem('X-Token'),
        },
        responseType: 'blob',
      }).then((res) => {
        const elink = document.createElement('a');
        elink.download = '巡查台账人员' + new Date().getTime() + '.xls';
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(res.data);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      });
      break;
    default:
      break;
  }
}
const showRecordList = (record, type) => {
  const form = getForm();
  const params = form.getFieldsValue();
  if(params.begindate){
    params.begindate = dayjs(params.begindate).startOf('day').format('YYYY-MM-DD HH:mm:ss')
  }
  if(params.enddate){
    params.enddate = dayjs(params.enddate).endOf('day').format('YYYY-MM-DD HH:mm:ss')
  }
  getUserCountApi(type, { userid: record.userId, ...params })?.then(res => {
    console.log(111,res)
    modalData.value = res
    mapVisible.value = true
  })
}
</script>

<style lang="scss" scoped></style>
