<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { deleteDrugCategories } from './api';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const showModal = (data: any = null, isUpdate = false) => {
  formModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

const deleteApi = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item: any) => item.id);
  }
  deleteDrugCategories({ ids })
    .then(() => {
      message.success('删除成功!');
      gridApi.query();
    })
    .catch((err: any) => {
      message.error(err?.message || '删除失败');
    });
};

const expandAll = () => {
  gridApi.grid?.setAllTreeExpand(true);
};

const collapseAll = () => {
  gridApi.grid?.setAllTreeExpand(false);
};
</script>

<template>
  <Page auto-content-height title="商品分类管理">
    <FormModal />
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :flex="false"
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: () => showModal(null, false),
            },
            {
              label: '展开全部',
              type: 'default',
              onClick: expandAll,
            },
            {
              label: '收起全部',
              type: 'default',
              onClick: collapseAll,
            },
          ]"
          :drop-down-actions="[
            {
              label: '批量删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除选中的分类吗？',
                confirm: () => deleteApi(null),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '新增子分类',
              type: 'link',
              icon: 'ant-design:plus-outlined',
              size: 'small',
              ifShow: row.level < 3,
              onClick: () =>
                showModal({ parent_id: row.id, level: row.level + 1, zone_id: row.zone_id }, false),
            },
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              onClick: () => showModal(row, true),
            },
            {
              label: '删除',
              type: 'link',
              icon: 'ant-design:delete-outlined',
              size: 'small',
              popConfirm: {
                title: '确定删除该分类吗？',
                confirm: () => deleteApi(row.id),
              },
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>



