<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="100%"
      wrap-class-name="inspection-record-point-show-list-modal"
      :footer="null"
      v-model:open="showListModal"
      title="列表信息"
      :destroyOnClose="true"
    >
      <ShowListModal :title="showListModalTitle" :id="showListModalId" :type="showListModalType" :timeParams="showListModalTimeParams"/>
    </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 ShowListModal from './ShowListModal/index.vue'
import { GetPointPunchStatistics, getPointCountApi } from '@/api/illegalconstruction/statistical'
import { getAppEnvConfig } from '@/utils/env';
import axios from "axios";
import dayjs from "dayjs";
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const showListModal = ref(false)
const showListModalTitle = ref('')
const showListModalId = ref('')
const showListModalType = ref('')
const showListModalTimeParams = ref({})
const [registerTable, { getForm }] =useTable({
  title: '巡查台账-点位',
  api: GetPointPunchStatistics,
  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/ExportPointPunchStatistics',
        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')
  }
  showListModalTimeParams.value = params
  showListModalTitle.value = record.name
  showListModalId.value = record.pointId
  showListModalType.value = type
  showListModal.value = true
}
</script>

<style lang="scss">
.inspection-record-point-show-list-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
