<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"
    >
      <CaseView :caseId="caseId" />
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getCaseInfoList } from '@/api/monitor/index';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { searchFormSchema, columns } from './list.data';
  import { BasicModal, useModal } from '@/components/Modal';
  import { CaseView } from '@/views/demo/monitor/index';

  const searchInfo = reactive<Recordable>({});

  const [registerTable] = useTable({
    title: '案件列表',
    api: getCaseInfoList,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    // rowSelection: {
    // type: 'checkbox',
    // },
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
    },
  });
  const [registerModal, { openModal }] = useModal();
  const caseId = ref('');
  function onBtnClicked(domId) {
    switch (domId) {
      case 'btnAdd':
        break;
      default:
        break;
    }
  }
  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>
