<template>
  <PageWrapper contentFullHeight="true" contentClass="flex" style="height: 100%; overflow: none">
    <a-card>
      <BasicTable @register="registerTable" :rowSelection="rowSelection">
        <!--  :rowSelection="rowSelection" -->
        <template #tableTitle>
          <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新建</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0 && showUpBtn">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined" />
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button
              >批量操作
              <Icon icon="mdi:chevron-down" />
            </a-button>
          </a-dropdown>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
        <!--字段回显插槽-->
        <template #htmlSlot="{ text }">
          <div v-html="text"></div>
        </template>
      </BasicTable>
    </a-card>
  </PageWrapper>
  <WbCompanyAttributeModal @register="registerModal" @success="handleSuccess" />
</template>

<script lang="ts" setup>
  import { reactive, ref, toRaw, unref } from 'vue';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useModal } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { columns, formSchema } from './WbCompanyAttribute.data';
  import WbCompanyAttributeModal from '../manage/components/WbCompanyAttributeModal.vue';
  import { message } from 'ant-design-vue';
  const showUpBtn = ref(false);
  //注册model
  const [registerModal, { openModal }] = useModal();
  const { tableContext } = useListPage({
    tableProps: {
      title: '',
      useSearchForm: false,
      showTableSetting: false,
      dataSource: [
        {
          key: '1',
          wb_attribute_name: '属性一',
          wb_attribute_class: '分类一',
        },
        {
          key: '2',
          wb_attribute_name: '属性二',
          wb_attribute_class: '分类二',
        },
        {
          key: '3',
          wb_attribute_name: '属性三',
          wb_attribute_class: '分类三',
        },
      ],
      columns: columns,
      size: 'small',
      actionColumn: {
        // ifShow: false,
        width: 100,
      },
    },
  });
  //注册table数据
  const [registerTable, { setProps, reload }, { rowSelection, selectedRowKeys }] = tableContext;

  function getTableAction(record) {
    return [
      {
        label: '删除',
        color: 'error',
        // disabled: record['planFlag'] != '0' && record['planFlag'] != '2' && record['planFlag'] != '9',
        popConfirm: {
          title: '是否确认删除该属性',
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  }
  // 编辑
  function handleEdit(record: Recordable) {
    // schemas: forrecordSchema,
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    console.log('record');
    // await deleteOne({ id: record.id }, handleSuccess);
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    console.log('delete');
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

  async function handleSubmit(record) {
    console.log('record');
    // if (record.approveDepCode == '' || record.approveUser == '') {
    //   message.warning('请选择审核部门与审核人后进行提交');
    // } else {
    //   record['planFlag'] = '1';
    //   await handlePlan(record, handleSuccess);
    // }
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
</script>
