<script lang="ts" setup>
// 导入VxeGrid监听器类型
import type { VxeGridListeners } from '#/adapter/vxe-table';

// 导入Vue响应式API
import { ref } from 'vue';

// 导入Vben UI组件
import { Page, useVbenModal } from '@vben/common-ui';

// 导入Ant Design Vue组件
import { Button, Image, message, Tag } from 'ant-design-vue';

// 导入Vben VxeGrid适配器
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// 导入表格操作组件
import { TableAction } from '#/components/table-action';
// 导入文件下载工具
import { downloadByData } from '#/util/tool';

// 导入保健食品管理相关API
import { deleteHealthFood, exportHealthFoodApi } from './api';
// 导入表单弹窗组件
import FormModalDemo from './components/modal.vue';
// 导入Excel上传组件
import ExcelUpload from './components/ExcelUpload.vue';
// 导入分类设置弹窗组件
import CategoryModal from './components/CategoryModal.vue';
// 导入搜索表单配置
import { formOptions } from './config/search';
// 导入表格配置
import { gridOptions } from './config/table';

// 控制顶部表格下拉操作按钮的显示状态
const hasTopTableDropDownActions = ref(false);

// 定义表格事件监听器
const gridEvents: VxeGridListeners<any> = {
  // 复选框变化事件：当用户选择或取消选择行时触发
  checkboxChange() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    // 如果有选中的记录，显示批量操作按钮
    hasTopTableDropDownActions.value = records.length > 0;
  },
  // 全选复选框事件：当用户全选或取消全选时触发
  checkboxAll() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    // 如果有选中的记录，显示批量操作按钮
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

// 初始化表格组件，传入搜索表单配置、表格配置和事件监听器
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

// 初始化表单弹窗组件
const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

// 初始化Excel上传弹窗组件
const [ExcelUploadModal, ExcelUploadModalApi] = useVbenModal({
  connectedComponent: ExcelUpload,
});

// 初始化分类设置弹窗组件
const [CategoryModalComp, categoryModalApi] = useVbenModal({
  connectedComponent: CategoryModal,
});

/**
 * 打开分类设置弹窗
 * @param row - 当前行数据
 */
const openCategoryModal = (row: any) => {
  categoryModalApi.setData({
    row,
    gridApi,
  });
  categoryModalApi.open();
};

/**
 * 显示表单弹窗
 * @param data - 表单数据，默认为空对象
 * @param isUpdate - 是否为编辑模式，默认为false（新增模式）
 */
const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    // 表单值
    values: data,
    // 是否为更新模式
    update: isUpdate,
    // 表格API实例，用于刷新表格
    gridApi,
  });
  formModalApi.open();
};

/**
 * 删除保健食品
 * @param row - 要删除的行数据，如果为空则删除选中的多条记录
 */
const deleteApi = (row: any) => {
  let ids = [];
  if (row) {
    // 单个删除
    ids.push(row);
  } else {
    // 批量删除：获取所有选中的记录ID
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  // 调用删除API
  deleteHealthFood({ ids }).then(() => {
    message.success('删除成功!');
    // 刷新表格
    gridApi.query();
  });
};

/**
 * 导出保健食品数据
 * 将数据导出为Excel文件
 */
const passApplication = () => {
  // 调用导出API
  exportHealthFoodApi().then((res) => {
    // 创建下载链接并触发下载
    downloadByData(res.data, '萧康云医-保健食品导出.xlsx');
    message.success('导出成功!');
  });
};

/**
 * 打开Excel上传弹窗
 * 用于批量导入保健食品数据
 */
const openExcelUploadModal = () => {
  ExcelUploadModalApi.setData({
    // 传入表格API实例，用于导入成功后刷新表格
    gridApi,
  });
  ExcelUploadModalApi.open();
};
</script>

<template>
  <Page auto-content-height title="保健食品管理">
    <ExcelUploadModal />
    <FormModal />
    <CategoryModalComp />
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :flex="false"
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null),
            },
            {
              label: '导入',
              type: 'primary',
              icon: 'ix:export-check',
              onClick: openExcelUploadModal.bind(null),
            },
            {
              label: '导出',
              type: 'primary',
              icon: 'mingcute:download-3-fill',
              onClick: passApplication.bind(null),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, false),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #image="{ row }">
        <Image :src="row.image" height="30" width="30" />
      </template>
      <template #supplier="{ row }">
        {{ row.supplier?.name || row.source }}
      </template>
      <template #zone="{ row }">
        <a class="text-primary cursor-pointer hover:underline" @click="openCategoryModal(row)">
          {{ row.zone_name || '未设置' }}
        </a>
      </template>
      <template #category="{ row }">
        <a class="text-primary cursor-pointer hover:underline" @click="openCategoryModal(row)">
          {{ row.category_name || '未设置' }}
        </a>
      </template>
      <template #instruction="{ row }">
        <div class="div" style="width: 120px; height: 120px; overflow: scroll">
          <Image :src="row.instruction" height="30" width="30" />
        </div>
      </template>
      <template #status="{ row }">
        <Tag :color="row.status_color">{{ row.status_txt }}</Tag>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              onClick: showModal.bind(null, row, true),
            },
            {
              label: '删除',
              type: 'link',
              icon: 'ant-design:delete-outlined',
              size: 'small',
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, row.id),
              },
            },
          ]"
          :drop-down-actions="[]"
        />
      </template>
    </Grid>
  </Page>
</template>
