<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" label-width="90px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="商品编号" prop="productNo">
                  <el-input v-model="queryParams.productNo" placeholder="请输入商品编号" clearable @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品名称" prop="itemName">
                  <el-input v-model="queryParams.itemName" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="text-left">
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </transition>




    <el-card shadow="never">
      <el-table v-loading="loading" border :data="baseList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="图片" align="center" prop="productImage" width="100" fixed="left">
          <template #default="scope">
            <image-preview :src="scope.row.productImage" :width="60" :height="60" />
          </template>
        </el-table-column>
        <el-table-column label="产品编号" align="center" prop="productNo" width="120">
          <template #default="scope">
            <el-link type="primary" @click="handleView(scope.row)">{{ scope.row.productNo }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="itemName" min-width="250" show-overflow-tooltip />
        <el-table-column label="类别" align="center" prop="categoryName" width="120" />
        <el-table-column label="品牌" align="center" prop="brandName" width="100" />
        <el-table-column label="单位" align="center" prop="unitName" width="80" />
        <el-table-column label="市场价" align="center" prop="marketPrice" width="100">
          <template #default="scope">
            <span>{{ scope.row.marketPrice || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台价" align="center" prop="memberPrice" width="100">
          <template #default="scope">
            <span>{{ scope.row.memberPrice || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最低售价" align="center" prop="minSellingPrice" width="100">
          <template #default="scope">
            <span>{{ scope.row.minSellingPrice || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用库存数" align="center" prop="availableStock" width="100">
          <template #default="scope">
            <span>{{ (scope.row.actualStock || 0) + (scope.row.virtualStock || 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="起订量" align="center" prop="minOrderQuantity" width="80">
          <template #default="scope">
            <span>{{ scope.row.minOrderQuantity || '1' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="对接状态" align="center" prop="connectStatus" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.connectStatus === '已对接'" type="success">已对接</el-tag>
            <el-tag v-else type="warning">未对接</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleConnect(scope.row)">对接</el-button>
            <el-button link type="primary" @click="handleView(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 游标分页控制 -->
      <pagination
        v-show="baseList.length > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        v-model:way="queryParams.way"
        :cursor-mode="true"
        :has-more="hasMore"
        @pagination="getList"
      />
    </el-card>

    <!-- 对接弹框 -->
    <el-dialog v-model="connectDialog.visible" title="选择第三方产品分类" width="600px" append-to-body @close="cancelConnect">
      <el-form ref="connectFormRef" :model="connectForm" :rules="connectRules" label-width="130px">
        <el-form-item label="价格模式:" prop="pricingRule">
          <el-radio-group v-model="connectForm.pricingRule" @change="handlePriceModeChange">
            <el-radio label="0" >一品一率</el-radio>
            <el-radio label="1">折扣率</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="第三方产品分类:" prop="externalCategoryId">
          <el-cascader
            v-model="connectForm.externalCategoryId"
            :options="externalCategoryList"
            :props="cascaderProps"
            placeholder="请选择"
            clearable
            style="width: 100%"
            @change="handleCategoryChange"
          />
        </el-form-item>
        <el-form-item v-if="connectForm.pricingRule === '1'" label="折扣率:">
          <el-text type="info">{{ discountRateDisplay }}</el-text>
        </el-form-item>
        <el-form-item label="第三方平台售价:" prop="externalPrice">
          <el-input-number v-model="connectForm.externalPrice" :precision="2" :min="0" :controls="false" :disabled="connectForm.pricingRule === '1'" style="width: 100%" />
        </el-form-item>
        <el-form-item label="市场价:">
          <el-text>{{ connectForm.marketPrice }}</el-text>
        </el-form-item>
        <el-form-item label="平台价:">
          <el-text>{{ connectForm.memberPrice }}</el-text>
        </el-form-item>
        <el-form-item label="起订量:">
          <el-input-number v-model="connectForm.minOrderQuantity" :min="1" :controls="false" style="width: 100%" />
        </el-form-item>
        <el-form-item label="最低售价:">
          <el-text type="danger">¥{{ connectForm.minSellingPrice }}</el-text>
        </el-form-item>
        <el-alert title="(当选价不能低于最低售价,不低于平台价)" type="warning" :closable="false" show-icon style="margin-bottom: 10px" />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="warning" @click="cancelConnect">返回</el-button>
          <el-button type="success" @click="submitConnect" :loading="connectLoading">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Base" lang="ts">
import { getProjectProductPage, getBase, delBase, brandList, categoryTree } from '@/api/product/base';
import { BaseVO, BaseQuery, BaseForm } from '@/api/product/base/types';
import { BrandVO } from '@/api/product/brand/types';
import { categoryTreeVO } from '@/api/product/category/types';
import { addProduct, updateProduct, getProductByProductId } from '@/api/external/product';
import { ProductForm } from '@/api/external/product/types';
import { listProductCategory, getProductCategory } from '@/api/external/productCategory';
import { ProductCategoryVO } from '@/api/external/productCategory/types';
import { useRoute, useRouter } from 'vue-router';
import cache from '@/plugins/cache';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const route = useRoute();

const baseList = ref<BaseVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const categoryOptions = ref<categoryTreeVO[]>([]);
const hasMore = ref(true); // 是否还有更多数据
// 页面历史记录，存储每页的第一个id和最后一个id，用于支持双向翻页
const pageHistory = ref([]);

// 统计信息
const statistics = ref({
  total: 0,
  configured: 0,
  onShelf: 0,
  reviewStatus: '待审核0条',
  shelfStatus: '上架0条'
});

const queryFormRef = ref<ElFormInstance>();
const baseFormRef = ref<ElFormInstance>();
const connectFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

// 对接弹框状态
const connectDialog = reactive({
  visible: false
});

// 对接表单
const connectForm = ref({
  id: undefined as string | number | undefined, // 对接记录 ID（编辑时使用）
  productId: undefined as string | number | undefined,
  externalCategoryId: undefined as string | number | undefined,
  externalPrice: 0,
  marketPrice: 0,
  memberPrice: 0,
  minSellingPrice: 0,
  minOrderQuantity: 1,
  discountRate: 0, // 折扣率
  pricingRule: '0' // 价格模式：0=一品一率，1=折扣率
});

// 外部分类列表（懒加载模式只需要初始化为空数组）
const externalCategoryList = ref<ProductCategoryVO[]>([]);

// 级联选择器懒加载配置
const cascaderProps = {
  value: 'id',
  label: 'categoryName',
  checkStrictly: false,
  emitPath: false,
  lazy: true,
  lazyLoad: async (node: any, resolve: any) => {
    try {
      const { level, value } = node;
      // level 0 表示根节点，加载一级分类
      // level > 0 表示子节点，根据父节点ID加载子分类
      const parentId = level === 0 ? 0 : value;

      // 从缓存中获取项目ID
      const currentProject = cache.local.getJSON('currentProject');
      const itemId = currentProject?.id;

      const res = await listProductCategory({ parentId, itemId });
      const responseData = (res as any).rows || res.data || [];

      // 为每个节点添加 leaf 属性，判断是否有子节点
      const nodes = responseData.map((item: ProductCategoryVO) => ({
        ...item,
        leaf: !item.hasChildren && level >= 2 // 如果没有子节点或已经是三级分类，则标记为叶子节点
      }));

      resolve(nodes);
    } catch (error) {
      console.error('加载分类数据失败:', error);
      proxy?.$modal.msgError('加载分类数据失败');
      resolve([]);
    }
  }
};

// 对接加载状态
const connectLoading = ref(false);

// 对接表单验证规则
const connectRules = {
  externalCategoryId: [{ required: true, message: '请选择第三方产品分类', trigger: 'change' }],
  externalPrice: [
    { required: true, message: '第三方平台售价不能为空', trigger: 'blur' },
    {
      validator: (rule: any, value: number, callback: any) => {
        if (value < connectForm.value.minSellingPrice) {
          callback(new Error('第三方价格不能低于最低售价'));
        } else if (value < connectForm.value.memberPrice) {
          callback(new Error('第三方价格不能低于平台价'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

// 折扣率显示值（从分类获取）
const discountRateDisplay = computed(() => {
  if (!connectForm.value.discountRate && connectForm.value.discountRate !== 0) {
    return '请先选择第三方产品分类';
  }
  return (connectForm.value.discountRate * 100).toFixed(2) + '%';
});

const initFormData: BaseForm = {
  id: undefined,
  productNo: undefined,
  itemName: undefined,
  brandId: undefined,
  topCategoryId: undefined,
  mediumCategoryId: undefined,
  bottomCategoryId: undefined,
  unitId: undefined,
  productImage: undefined,
  isSelf: undefined,
  productReviewStatus: undefined,
  homeRecommended: undefined,
  categoryRecommendation: undefined,
  cartRecommendation: undefined,
  recommendedProductOrder: undefined,
  isPopular: undefined,
  isNew: undefined,
  productStatus: undefined,
  remark: undefined
};
const data = reactive<PageData<BaseForm, BaseQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    productNo: undefined,
    itemName: undefined,
    brandName: undefined,
    productTag: undefined,
    purchaseNature: undefined,
    supplierType: undefined,
    supplierNature: undefined,
    projectOrg: undefined,
    topCategoryId: undefined,
    mediumCategoryId: undefined,
    bottomCategoryId: undefined,
    isSelf: undefined,
    productReviewStatus: undefined,
    productStatus: undefined,
    lastSeenId: undefined, // 游标分页的lastSeenId
    way: undefined,
    auditStatus: 2,
    params: {}
  },
  rules: {
    productNo: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
    itemName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
    brandId: [{ required: true, message: '品牌id不能为空', trigger: 'blur' }],
    topCategoryId: [{ required: true, message: '顶级分类id不能为空', trigger: 'blur' }],
    mediumCategoryId: [{ required: true, message: '中级分类id不能为空', trigger: 'blur' }],
    bottomCategoryId: [{ required: true, message: '底层分类id不能为空', trigger: 'blur' }],
    unitId: [{ required: true, message: '单位id不能为空', trigger: 'blur' }],
    productImage: [{ required: true, message: '产品图片URL不能为空', trigger: 'blur' }],
    productReviewStatus: [{ required: true, message: '产品审核状态 0=待采购审核,1=审核通过,2=驳回,3=待营销审核不能为空', trigger: 'change' }],
    homeRecommended: [{ required: true, message: '首页推荐：1=推荐，0=不推荐不能为空', trigger: 'blur' }],
    categoryRecommendation: [{ required: true, message: '分类推荐：1=推荐，0=不推荐不能为空', trigger: 'blur' }],
    cartRecommendation: [{ required: true, message: '购物车推荐：1=推荐，0=不推荐不能为空', trigger: 'blur' }],
    recommendedProductOrder: [{ required: true, message: '推荐产品顺序不能为空', trigger: 'blur' }],
    isPopular: [{ required: true, message: '是否热门：1=是，0=否不能为空', trigger: 'blur' }],
    isNew: [{ required: true, message: '是否新品：1=是，0=否不能为空', trigger: 'blur' }],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);


/** 查询产品基础信息列表 */
const getList = async () => {
  loading.value = true;
  try {
    const params = { ...queryParams.value };
    const currentPageNum = queryParams.value.pageNum;

    // 从缓存中获取项目ID
    const currentProject = cache.local.getJSON('currentProject');
    if (currentProject?.id) {
      params.itemId = currentProject.id;
    }

    // 第一页不需要游标参数
    if (currentPageNum === 1) {
      delete params.lastSeenId;
      delete params.way;
    } else {
      // way参数：0=上一页，1=下一页
      if (queryParams.value.way === 0) {
        // 上一页：使用目标页（即当前显示页）的firstId
        const nextPageHistory = pageHistory.value[currentPageNum];
        if (nextPageHistory) {
          params.firstSeenId = nextPageHistory.firstId;
          params.way = 0;
        }
      } else {
        // 下一页：使用前一页的lastId作为lastSeenId
        const prevPageHistory = pageHistory.value[currentPageNum - 1];
        if (prevPageHistory) {
          params.lastSeenId = prevPageHistory.lastId;
          params.way = 1;
        }
      }
    }

    const res = await getProjectProductPage(params);
    baseList.value = res.rows || [];

    // 判断是否还有更多数据
    hasMore.value = baseList.value.length === queryParams.value.pageSize;

    // 记录当前页的第一个id和最后一个id
    if (baseList.value.length > 0) {
      const firstItem = baseList.value[0];
      const lastItem = baseList.value[baseList.value.length - 1];
      //如果长度小于currentPageNum则创建

      if (pageHistory.value.length <= currentPageNum) {
        pageHistory.value[currentPageNum] = {
          firstId: firstItem.id,
          lastId: lastItem.id
        };
      }
    }

    total.value = res.total || 0;

    // 更新统计信息
    statistics.value.total = res.total || 0;
    statistics.value.configured = res.rows?.filter((item: any) => item.isConfigured)?.length || 0;
    statistics.value.onShelf = res.rows?.filter((item: any) => item.productStatus === '1')?.length || 0;
  } catch (error) {
    console.error('获取列表失败:', error);
  } finally {
    loading.value = false;
  }
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 初始化路由参数 */
const initRouteParams = () => {
  // 从路由参数中获取筛选条件
  if (route.query.productReviewStatus) {
    queryParams.value.productReviewStatus = Number(route.query.productReviewStatus);
  }
  if (route.query.brandName) {
    queryParams.value.brandName = route.query.brandName as string;
  }
  if (route.query.bottomCategoryId) {
    queryParams.value.bottomCategoryId = route.query.bottomCategoryId as string;
  }
  if (route.query.isSelf) {
    queryParams.value.isSelf = Number(route.query.isSelf);
  }
  if (route.query.productCategory) {
    queryParams.value.productCategory = Number(route.query.productCategory);
  }
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  baseFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  // 同步查询参数到游标分页参数
  queryParams.value = {
    ...queryParams.value,
    pageNum: 1,
    productNo: queryParams.value.productNo,
    itemName: queryParams.value.itemName,
    brandName: queryParams.value.brandName,
    bottomCategoryId: queryParams.value.bottomCategoryId,
    isSelf: queryParams.value.isSelf,
    productReviewStatus: queryParams.value.productReviewStatus,
    productStatus: queryParams.value.productStatus,
    lastSeenId: undefined
  };
  pageHistory.value = []; // 重置页面历史
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.lastSeenId = undefined;
  pageHistory.value = []; // 重置页面历史
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: BaseVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  router.push('/product/base/add');
};

/** 修改按钮操作 */
const handleUpdate = async (row?: BaseVO) => {
  const _id = row?.id || ids.value[0];
  router.push(`/product/base/edit/${_id}`);
};

/** 删除按钮操作 */
const handleDelete = async (row?: BaseVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除产品基础信息编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delBase(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'product/base/export',
    {
      ...queryParams.value
    },
    `base_${new Date().getTime()}.xlsx`
  );
};

/** 查看商品详情 */
const handleView = (row: BaseVO) => {
  router.push(`/product/base/detail/${row.id}`);
};

/** 对接操作 */
const handleConnect = async (row: BaseVO) => {
  // 初始化表单数据，默认一品一率模式
  connectForm.value = {
    id: undefined,
    productId: row.id,
    externalCategoryId: undefined,
    externalPrice: 0,
    marketPrice: row.marketPrice || 0,
    memberPrice: row.memberPrice || 0,
    minSellingPrice: row.minSellingPrice || 0,
    minOrderQuantity: row.minOrderQuantity || 1,
    discountRate: 0,
    pricingRule: '0' // 默认一品一率
  };

  // 查询是否已有对接信息
  try {
    const res = await getProductByProductId(row.id);
    if (res.data) {
      // 已有对接信息，回显数据
      const existData = res.data;
      connectForm.value.id = existData.id;
      connectForm.value.externalCategoryId = existData.externalCategoryId;
      connectForm.value.externalPrice = existData.externalPrice || 0;

      // 如果有分类，获取折扣率
      if (existData.externalCategoryId) {
        const currentProject = cache.local.getJSON('currentProject');
        const itemId = currentProject?.id;
        const categoryRes = await getProductCategory(existData.externalCategoryId, itemId);
        if (categoryRes.data) {
          connectForm.value.discountRate = categoryRes.data.discountRate || 0;
        }
      }

      // 根据是否有自定义价格判断价格模式
      // 如果 externalPrice 为 0 或者等于计算出的折扣价，则认为是折扣率模式
      const calculatedDiscountPrice = Number((connectForm.value.memberPrice * connectForm.value.discountRate).toFixed(2));
      if (connectForm.value.externalPrice === 0 || connectForm.value.externalPrice === calculatedDiscountPrice) {
        connectForm.value.pricingRule = '1';
      } else {
        connectForm.value.pricingRule = '0';
      }
    }
  } catch (error) {
    console.log('暂无对接信息，将新增');
  }

  connectDialog.visible = true;
};



/** 分类变化处理 */
const handleCategoryChange = async (value: string | number) => {
  if (!value) {
    connectForm.value.externalPrice = 0;
    connectForm.value.discountRate = 0;
    return;
  }

  // 获取选中分类的详情，包含折扣率
  try {
    const currentProject = cache.local.getJSON('currentProject');
    const itemId = currentProject?.id;
    const res = await getProductCategory(value, itemId);
    const category = res.data;

    // 设置折扣率
    const discountRate = category?.discountRate || 0;
    connectForm.value.discountRate = discountRate;

    // 只有在折扣率模式下才自动计算价格
    if (connectForm.value.pricingRule === '1') {
      // 第三方价格默认为平台价 * 折扣率
      const defaultPrice = Number((connectForm.value.memberPrice * discountRate).toFixed(2));
      connectForm.value.externalPrice = defaultPrice;
    }
  } catch (error) {
    console.error('获取分类详情失败:', error);
    // 如果获取失败，默认使用会员价作为第三方价格
    if (connectForm.value.pricingRule === '1') {
      connectForm.value.externalPrice = connectForm.value.memberPrice;
    }
    connectForm.value.discountRate = 0;
  }
};

/** 价格模式变化处理 */
const handlePriceModeChange = (value: '1' | '0') => {
  if (value === '1') {
    // 切换到折扣率模式，自动计算价格
    const discountRate = connectForm.value.discountRate || 0;
    const defaultPrice = Number((connectForm.value.memberPrice * discountRate).toFixed(2));
    connectForm.value.externalPrice = defaultPrice;
  }
  // 切换到一品一率模式，不做任何操作，允许用户手动输入
};

/** 取消对接 */
const cancelConnect = () => {
  connectDialog.visible = false;
  connectFormRef.value?.resetFields();
};

/** 提交对接 */
const submitConnect = async () => {
  if (!connectFormRef.value) return;

  await connectFormRef.value.validate(async (valid) => {
    if (valid) {
      connectLoading.value = true;
      try {
        const data: ProductForm = {
          id: connectForm.value.id,
          productId: connectForm.value.productId,
          externalCategoryId: connectForm.value.externalCategoryId,
          pricingRule : connectForm.value.pricingRule,
          externalPrice: connectForm.value.externalPrice,
          minOrderQuantity: connectForm.value.minOrderQuantity,
          pushStatus: 0 // 0=未推送
        };

        // 判断是新增还是编辑
        if (connectForm.value.id) {
          await updateProduct(data);
          proxy?.$modal.msgSuccess('编辑成功');
        } else {
          await addProduct(data);
          proxy?.$modal.msgSuccess('对接成功');
        }
        connectDialog.visible = false;

        // 刷新列表
        await getList();
      } catch (error) {
        console.error('对接失败:', error);
        proxy?.$modal.msgError('对接失败');
      } finally {
        connectLoading.value = false;
      }
    }
  });
};

/** 上下架操作 */
const handleShelf = async (row: BaseVO) => {
  const action = row.productStatus === '1' ? '下架' : '上架';
  await proxy?.$modal.confirm(`确认${action}该商品吗？`);
  // TODO: 调用上下架API
  proxy?.$modal.msgSuccess(`${action}成功`);
  await getList();
};

/** 价格设置 */
const handlePrice = (row: BaseVO) => {
  console.log('设置价格', row);
  // TODO: 打开价格设置对话框
};

/** 供货存管理 */
const handleSupply = (row: BaseVO) => {
  console.log('供货存管理', row);
  // TODO: 打开供货存管理对话框
};

/** 停售操作 */
const handleDiscontinue = async (row: BaseVO) => {
  await proxy?.$modal.confirm('确认停售该商品吗？');
  // TODO: 调用停售API
  proxy?.$modal.msgSuccess('停售成功');
  await getList();
};

/** 跳转到商品审核页面 */
const handleGoReview = () => {
  router.push({
    path: '/product/base/review',
    query: {
      productReviewStatus: 1 // 默认显示待审核的商品
    }
  });
};

/** 查询分类树 */
const getCategoryTree = async () => {
  const res = await categoryTree();
  categoryOptions.value = res.data || [];
};

onMounted(() => {
  getList();
  getCategoryTree();
});
</script>
