<script lang="ts" setup>
  import { columnsDrawer } from './config';
  import { unref, ref, watch, nextTick } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable } from '/@/components/Table';
  import { useTable } from '/@/components/Table';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { getModelList } from '/@/api/device/modelOfMatter';

  defineEmits(['register']);

  const props = defineProps<{ cateforyListInfo: any }>();

  const recordInfo = ref<any>({});
  const secondVisible = ref<Boolean>(false);

  watch(
    () => props.cateforyListInfo,
    async () => {
      recordInfo.value = props.cateforyListInfo.record || {};
      secondVisible.value = props.cateforyListInfo.isRight || false;
      await nextTick();
      reload();
    }
  );
  const [registerListDrawer, { closeDrawer }] = useDrawerInner();
  const [registerTable, { reload }] = useTable({
    title: '',
    api: async (params: Record<'page' | 'pageSize', number>) => {
      return await getModelList({
        ...params,
        id: unref(recordInfo).id,
        selectType: 'category',
      });
    },
    columns: columnsDrawer,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    rowKey: 'id',
  });

  const handleClose = () => {
    closeDrawer();
  };
</script>

<template>
  <BasicDrawer
    :zIndex="1100"
    @register="registerListDrawer"
    wrap-class-name="secondDrawer"
    :wrap-style="{
      right: secondVisible ? '32%' : 0,
      transition: 'none',
    }"
    v-bind="$attrs"
    destroyOnClose
    @close="handleClose"
    title="物模型"
    width="40%"
  >
    <BasicTable @register="registerTable">
      <template #name="{ record }">
        <span>{{ record.name }}</span>
        <ExclamationCircleOutlined class="ml-1" />
      </template>
    </BasicTable>
  </BasicDrawer>
</template>