<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record }">
        <!-- 整改率 -->
        <template v-if="column.key === 'zgl'">
           {{ record.zgl }}%
        </template>
        <!-- 驳回率 -->
        <template v-if="column.key === 'bhl'">
           {{ record.bhl }}%
        </template>
        </template>
    </BasicTable>

  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
  import { useModal } from '@/components/Modal';
  import { BasicTable, useTable } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { PageWrapper } from '@/components/Page';
  import { cloneDeep } from 'lodash-es';
  import { CaseOffenceMinerals } from '@/api/demo/system';
  import { columns, searchFormSchema } from './index.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getAppEnvConfig } from '@/utils/env';
  import axios from 'axios';
  import dayjs from 'dayjs';

  const { createMessage } = useMessage();
  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  // 页面表格
  const searchParams = ref();
  const [registerTable] = useTable({
    api: CaseOffenceMinerals,
    columns: columns,
    // title: '无人机全域巡查图斑情况统计表',
    // titleHelpMessage: '合法、其他、非粮化、补办手续、拆除复耕均需市级审核通过才可判定为举证类型。',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    showIndexColumn: false,
    striped: false,
    bordered: true,
    canResize: false,
    useSearchForm: true,
    showTableSetting: true,
    pagination: false,
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      // 默认展示昨天的
      var temp = {
        startTime: data.startTime
          ? dayjs(data.startTime).startOf('day').format('YYYY-MM-DD')
          : dayjs().startOf('day').add(-1, 'day').format('YYYY-MM-DD'),
        endTime: data.endTime
          ? dayjs(data.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
          : dayjs().endOf('day').add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
      };
      searchParams.value = temp;
      return temp;
    },
    afterFetch: (res) => {},
  });

  // 直接下载接口返回的二进制流
  function handleExport(exportType) {
    let url = '';
    let fileName = '';
    let params: any = {};
    let afterTitle = '';

    if (
      dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') ===
      dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD')
    ) {
      afterTitle = dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD');
    } else {
      afterTitle =
        dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') +
        '至' +
        dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD');
    }

    switch (exportType) {
      case '':
        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/CaseOfMineralsToExcel';
        fileName = '汇总表 ' + afterTitle + '.xls';
        break;
      default:
        break;
    }

    params = {
      startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
      endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
    };

    axios({
      method: 'post',
      url: url,
      params: params,
      headers: {
        'X-Token': localStorage.getItem('X-Token'),
      },
      responseType: 'blob',
    }).then((res) => {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(res.data);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    });
  }
  // 按键分类
  const buttonClick = async (type) => {
    switch (type) {
      case 'btnExport':
        handleExport('');
        break;
      default:
        break;
    }
  };
</script>
<style lang="less" scoped>
  #closeIconButton {
    width: 40px;
    height: 50px;
    line-height: 50px;
    float: right;
    text-align: center;
    cursor: pointer;
  }

  .exportbutton {
    width: 510px;
    height: 60px;
    margin: 5px;
  }

  ::v-deep .ant-table-container table {
    line-height: 1.1 !important;

    .ant-table-row {
      td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }
    }
  }
</style>
