<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 { deleteSpecialPrescriptionCategory } from './api';
import CategoryModal from './components/modal.vue';
import CategorySortModal from './components/sort-modal.vue';
import { formOptions as searchFormOptions } 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: searchFormOptions,
  gridOptions,
  gridEvents,
});

const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
  connectedComponent: CategoryModal,
});

const [SortModal, sortModalApi] = useVbenModal({
  connectedComponent: CategorySortModal,
});

const showSortModal = () => {
  sortModalApi.setData({ gridApi });
  sortModalApi.open();
};

const showCategoryModal = (data = {}, isUpdate = false) => {
  categoryFormModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  categoryFormModalApi.open();
};

const deleteCategoryApi = (row: any) => {
  let ids: (string | number)[] = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item: any) => item.id);
  }
  deleteSpecialPrescriptionCategory({ ids }).then(() => {
    message.success('删除成功!');
    gridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="特色方分类管理">
    <CategoryFormModal />
    <SortModal />

    <div class="p-4">
      <TableAction
        :actions="[
          {
            label: '新增分类',
            type: 'primary',
            icon: 'ant-design:plus-outlined',
            onClick: () => showCategoryModal({}, false),
          },
          {
            label: '排序',
            icon: 'ant-design:ordered-list-outlined',
            onClick: showSortModal,
          },
        ]"
      />

      <Grid>
        <template #toolbar-buttons>
          <Button
            v-if="hasTopTableDropDownActions"
            danger
            type="primary"
            @click="deleteCategoryApi()"
          >
            删除
          </Button>
        </template>

        <template #action="{ row }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => showCategoryModal(row, true),
              },
              {
                label: '删除',
                color: 'error',
                popConfirm: {
                  title: '确定要删除该分类吗？',
                  onConfirm: () => deleteCategoryApi(row.id),
                },
              },
            ]"
          />
        </template>
      </Grid>
    </div>
  </Page>
</template>
