<script lang="ts" setup>
  import { columns, searchFormSchema } from './config';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable } from '/@/components/Table';
  import { useTable } from '/@/components/Table';
  import { Button } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { getDeviceClassList } from '/@/api/device/classModal';
  import { ref } from 'vue';
  const emits = defineEmits([
    'handleOpenListDrawer',
    'handleSelectCategory',
    'handleClose',
    'register',
  ]);

  const categoryId = ref<string | undefined | null>();
  const [registerDrawer] = useDrawerInner((data) => {
    categoryId.value = data.categoryId || {};
  });
  const [registerTable] = useTable({
    title: '',
    api: getDeviceClassList,
    columns,
    formConfig: {
      schemas: searchFormSchema,
    },
    searchInfo: {
      status: 1,
    },
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    rowKey: 'id',
    actionColumn: {
      width: 100,
      title: '操作',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const closeDrawer = () => {
    emits('handleClose');
  };

  const handleChecked = (item?: any) => {
    emits('handleSelectCategory', item);
  };

  const handleOpenListDrawer = (record?: any) => {
    emits('handleOpenListDrawer', record);
  };
</script>

<template>
  <BasicDrawer
    :zIndex="1100"
    v-bind="$attrs"
    @register="registerDrawer"
    :showFooter="true"
    destroyOnClose
    @close="closeDrawer"
    title="选择品类"
    width="32%"
  >
    <BasicTable @register="registerTable">
      <template #name="{ record }">
        <span>{{ record.name }}</span>
        <ExclamationCircleOutlined @click.stop="handleOpenListDrawer(record)" class="ml-1" />
      </template>
      <template #action="{ record }">
        <Button type="link" :disabled="categoryId === record.id" @click="handleChecked(record)"
          >选择</Button
        >
      </template>
    </BasicTable>
  </BasicDrawer>
</template>