<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
        <PermissionBtn @btn-event="onBtnClicked" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: viewDetail.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      title="案件详情"
      :canFullscreen="false"
      :defaultFullscreen="true"
      :showCancelBtn="false"
      :showOkBtn="false"
      :draggable="false"
    >
      <a-button type="primary" v-print="printObj">打印</a-button>
      <!-- <CaseView :caseId="caseId"></CaseView> -->
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import print from 'vue3-print-nb';
  import { reactive, ref } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
  import { getCaseInfoList, exportCaseInfo } from '@/api/monitor/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { searchFormSchema, columns } from './report.data';
  import { BasicModal, useModal } from '@/components/Modal';
  // import { CaseView } from '@/views/demo/monitor/index';
  const { createConfirm, createMessage } = useMessage();
  const searchInfo = reactive<Recordable>({});

  import { getAppEnvConfig } from '@/utils/env';

  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  const vPrint = print;

  const printObj = reactive({
    id: 'printMe',
    popTitle: '',
    beforeOpenCallback() {},
    openCallback() {},
    closeCallback() {},
  });

  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
    title: '案件列表',
    api: getCaseInfoList,
    // api:()=>1,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    rowSelection: {
      type: 'radio',
    },
    handleSearchInfoFn(info) {
      return info;
    },
    // actionColumn: {
    //   width: 80,
    //   title: '操作',
    //   dataIndex: 'action',
    // },
  });
  const [registerModal, { openModal, setModalProps }] = useModal();
  const caseId = ref('');
  function onBtnClicked(domId) {
    switch (domId) {
      case 'btnExport':
        let rows = getSelectRows();
        handlerDownLoad(rows[0].id);
        break;
      default:
        break;
    }
  }

  function handlerDownLoad(id) {
    try {
      exportCaseInfo({ id: id }).then((res) => {
        window.open(VITE_GLOB_API_URL + '/' + res, '_blank');
      });
    } catch (e) {
      createMessage.warning('导出失败！');
      console.log(e);
    }
  }
  function viewDetail(record) {
    console.log(record);
    caseId.value = record.id;
    openModal();
  }
</script>
<style lang="less" scoped>
  // ::v-deep .ant-row .ant-col{
  //   margin-right: 2px;
  // }
  // ::v-deep .ant-row .ant-col.ant-col-2 {
  //   margin-right: 10px;
  // }
</style>
