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

import { getProductClassificationTreeOptionApi } from '#/views/my-gen/product-classification/api';
import { getProductLabelOptionApi } from '#/views/my-gen/product-label/api';

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'],
      },
    },
    // 生成的表单字段
    {
      fieldName: 'cover',
      label: '封面图',
      component: 'Avatar',
      rules: 'required',
    },
    {
      fieldName: 'title',
      label: '商品名称',
      component: 'VbenInput',
      formItemClass: 'col-span-6',
      rules: 'required',
    },
    {
      fieldName: 'price',
      label: '价格',
      component: 'VbenInput',
      formItemClass: 'col-span-6',
      rules: 'required',
    },
    {
      fieldName: 'classification_id',
      label: '产品分类',
      component: 'ApiTreeSelect',
      componentProps: {
        api: getProductClassificationTreeOptionApi,
        filterOption: (input: string, option: any) => {
          // 自定义过滤逻辑，确保可以根据 name 进行搜索
          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        showSearch: true,
        // 菜单接口转options格式
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.id,
          }));
        },
      },
      rules: 'required',
    },
    {
      fieldName: 'labels',
      label: '产品标签',
      component: 'ApiSelect',
      componentProps: {
        api: getProductLabelOptionApi,
        filterOption: (input: string, option: any) => {
          // 自定义过滤逻辑，确保可以根据 name 进行搜索
          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        showSearch: true,
        // 菜单接口转options格式
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.id,
          }));
        },
        mode: 'multiple',
      },
      rules: 'required',
    },
    {
      fieldName: 'images',
      label: '产品图片',
      component: 'UploadImage',
      rules: 'required',
    },
    {
      fieldName: 'introduction',
      label: '简介',
      component: 'Textarea',
      rules: 'required',
    },
    {
      fieldName: 'description',
      label: '详细说明',
      component: 'VbenInput',
      rules: 'required',
    },
  ],
  showDefaultActions: false,
};
