<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="download">导出</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '详情',
              onClick: () => {
                handleInfo(record);
              },
            }
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <a-modal
    style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
    wrap-class-name="full-modal"
    v-model:open="showInfoOpen"
    title="详情"
    :footer="null"
    :maskClosable="true"
    :destroyOnClose="true"
    @cancel="showInfoOpen = false"
  >
    <ShowInfoModal :showInfoData="showInfoData"/>
  </a-modal>
</PageWrapper>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './utils';
import { TimeoutWarning, TimeoutWarningExport } from '@/api/earlywarning/index'
import ShowInfoModal from '@/components/EarlyWarning/InfoModal/index.vue'

const showInfoOpen = ref(false)
const showInfoData = ref();

const [registerTable, { getForm }] = useTable({
  title: '到期预警',
  api: TimeoutWarning,
  columns,
  rowKey: 'id',
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  actionColumn: {
    width: 80,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
});
function handleInfo(record) {
  showInfoData.value = record
  showInfoOpen.value = true
}
const download = () => {
  const form = getForm();
  const filterValues = form.getFieldsValue();
  TimeoutWarningExport(filterValues).then(res => {
    const elink = document.createElement('a');
    elink.download = '到期预警数据' + new Date().getTime() + '.xls';
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(res);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  })
}
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    min-width: 100vw;
    top: 0px;
    padding: 0px;
    margin: 0px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
