import type { VbenFormProps } from '#/adapter/form';

import { useUserStore } from '@vben/stores';

import { getSupplierOption } from '#/views/system/supplier/api';
import { getDrugCategoriesTree, getZoneOptions } from '#/views/business/product/drug-categories/api';

const userStore = useUserStore();

export const modalFormProps: VbenFormProps = {
  wrapperClass: 'grid-cols-12', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-12',
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'id',
      label: 'ID',
      formItemClass: 'col-span-6',
      dependencies: {
        show: false,
        triggerFields: ['id'],
      },
    },
    {
      component: 'VbenInput',
      fieldName: 'showSelect',
      label: 'ID',
      formItemClass: 'col-span-6',
      dependencies: {
        show: false,
        triggerFields: ['id'],
      },
    },
    {
      component: 'Avatar',
      fieldName: 'image',
      label: '产品图片',
      rules: 'required',
      formItemClass: 'col-span-6',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        showSearch: true,
        filterOption: (input: string, option: any) => {
          // 自定义过滤逻辑，确保可以根据 name 进行搜索
          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        // 菜单接口转options格式
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.id,
          }));
        },
        api: getSupplierOption,
        placeholder: '请选择',
      },
      dependencies: {
        disabled() {
          return userStore?.userInfo?.roles?.user_type === 3;
        },
        triggerFields: ['supplier_id'],
      },
      fieldName: 'supplier_id',
      formItemClass: 'col-span-6',
      label: '所属供应商',
      rules: 'required',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        api: getZoneOptions,
        labelField: 'title',
        valueField: 'id',
        placeholder: '请选择分区',
        allowClear: true,
      },
      fieldName: 'zone_id',
      formItemClass: 'col-span-6',
      label: '所属分区',
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        api: getDrugCategoriesTree,
        childrenField: 'children',
        labelField: 'category_name',
        valueField: 'id',
        placeholder: '请先选择分区',
        allowClear: true,
        treeDefaultExpandAll: true,
        immediate: false,  // 首次不立即加载
        alwaysLoad: true,  // 每次展开都重新加载
      },
      fieldName: 'category_id',
      formItemClass: 'col-span-6',
      label: '所属分类',
      dependencies: {
        componentProps(values, formApi) {
          return {
            // 使用 beforeFetch 在请求发出前动态获取最新的 zone_id
            beforeFetch: async () => {
              const currentValues = await formApi.getValues();
              return { zone_id: currentValues.zone_id };
            },
            placeholder: values.zone_id ? '请选择分类' : '请先选择分区',
          };
        },
        trigger(values, formApi) {
          // zone_id 变化时清空分类选择
          formApi.setFieldValue('category_id', undefined);
        },
        triggerFields: ['zone_id'],
      },
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入服务包昵称',
      },
      fieldName: 'drug_name',
      formItemClass: 'col-span-6',
      label: '服务包昵称',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入服务包别名',
      },
      fieldName: 'drug_alias',
      formItemClass: 'col-span-6',
      label: '服务包别名',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入服务包编号',
      },
      fieldName: 'drug_number',
      formItemClass: 'col-span-6',
      label: '服务包编号',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入功能',
      },
      fieldName: 'function',
      formItemClass: 'col-span-6',
      label: '功能',
      rules: 'required',
    },
    // {
    //   component: 'VbenInput',
    //   componentProps: {
    //     placeholder: '请输入规格',
    //   },
    //   fieldName: 'specification',
    //   formItemClass: 'col-span-6',
    //   label: '规格',
    //   rules: 'required',
    // },
    {
      component: 'VbenSelect',
      componentProps: {
        placeholder: '请选择规格',
        options: [
          {
            label: '7天',
            value: '7天',
          },
          {
            label: '14天',
            value: '14天',
          },
          {
            label: '30天',
            value: '30天',
          },
          {
            label: '60天',
            value: '60天',
          },
          {
            label: '90天',
            value: '90天',
          },
          {
            label: '180天',
            value: '180天',
          },
        ],
      },
      fieldName: 'specification',
      formItemClass: 'col-span-6',
      label: '规格',
      rules: 'required',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        placeholder: '请选择',
        options: [
          {
            label: '草稿',
            value: 1,
          },
          {
            label: '下架',
            value: 2,
          },
          {
            label: '上架',
            value: 3,
          },
        ],
      },
      defaultValue: 1,
      formItemClass: 'col-span-6',
      fieldName: 'status',
      label: '商品状态',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入平台分成',
      },
      suffix: () => '%',
      defaultValue: 15,
      fieldName: 'platform_ledger',
      formItemClass: 'col-span-4',
      label: '平台分成',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入诊所分成',
      },
      suffix: () => '%',
      defaultValue: 35,
      fieldName: 'store_ledger',
      formItemClass: 'col-span-4',
      label: '诊所分成',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入供应商分成',
      },
      suffix: () => '%',
      defaultValue: 50,
      fieldName: 'supplier_ledger',
      formItemClass: 'col-span-4',
      label: '供应商分成',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入服务包介绍',
      },
      fieldName: 'small_info',
      label: '服务包介绍',
      rules: 'required',
    },
    {
      component: 'Avatar',
      fieldName: 'instruction',
      label: '产品说明书',
      rules: 'required',
      formItemClass: 'col-span-6',
    },
  ],
  showDefaultActions: false,
};
