<template>
  <div>
    <BasicTable
      :rowSelection="{ type: 'checkbox' }"
      :clickToRowSelect="false"
      @register="registerTable"
    >
      <template #toolbar>
        <div style="display: flex; justify-content: space-between; width: 773px">
          <div>
            <Authority value="">
              <div style="display: flex">
                <a-button
                  style="margin-left: -20px"
                  type="primary"
                  @click="handleCreateOrEdit(null)"
                >
                  新增物模型
                </a-button>
                <a-button class="ml-2" type="primary" @click="handleOpenTsl"> 物模型TSL </a-button>
              </div>
            </Authority>
          </div>
          <div>
            <Authority value="">
              <div style="display: flex">
                <a-button type="primary"> 发布上线 </a-button>
                <a-button class="ml-2" type="text"> 返回 </a-button>
                <Popconfirm
                  title="您确定要批量删除数据"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handleDeleteOrBatchDelete(null)"
                >
                  <a-button
                    style="display: none"
                    type="primary"
                    color="error"
                    :disabled="hasBatchDelete"
                  >
                    批量删除
                  </a-button>
                </Popconfirm>
              </div>
            </Authority>
          </div>
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看',
              icon: 'ant-design:eye-outlined',
              onClick: handleViewDetail.bind(null, record),
            },
            {
              label: '编辑',
              icon: 'clarity:note-edit-line',
              auth: '',
              onClick: handleCreateOrEdit.bind(null, record),
            },
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              auth: '',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <PhysicalModelModal @register="registerModal" @success="handleSuccess" />
    <PhysicalModelTsl @register="registerModalTsl" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { physicalColumn } from '../device.profile.data';
  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  import { deleteReportManage } from '/@/api/report/reportManager';
  import { Authority } from '/@/components/Authority';
  import { deviceConfigGetQuery } from '/@/api/device/deviceConfigApi';
  import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
  import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
  import { Popconfirm } from 'ant-design-vue';

  defineEmits(['register']);
  const [registerModal, { openModal }] = useModal();
  const [registerModalTsl, { openModal: openModalTsl }] = useModal();

  const [registerTable, { reload, setProps }] = useTable({
    api: deviceConfigGetQuery,
    columns: physicalColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    useSearchForm: false,
    rowKey: 'id',
    showTableSetting: true,
    bordered: true,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });
  // 刷新
  const handleSuccess = () => {
    reload();
  };

  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
    deleteReportManage,
    handleSuccess,
    setProps
  );
  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
    // Demo:status为1的选择框禁用
    if (record.status === 1) {
      return { disabled: true };
    } else {
      return { disabled: false };
    }
  };
  const handleViewDetail = (record: Recordable | null) => {
    if (record) {
      openModal(true, {
        isUpdate: true,
        record,
        isView: true,
      });
    }
  };
  // 新增或编辑
  const handleCreateOrEdit = (record: Recordable | null) => {
    if (record) {
      openModal(true, {
        isUpdate: false,
        record,
        isView: false,
      });
    } else {
      openModal(true, {
        isUpdate: true,
        isView: false,
      });
    }
  };
  const handleOpenTsl = () => {
    openModalTsl(true, {
      isUpdate: true,
    });
  };
  defineExpose({});
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    height: auto !important;
  }
</style>