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

import dayjs from 'dayjs';
import {
  getOrderPrescriptionTypeOption,
  getOrderStatusOption,
} from '#/views/business/order/product-order/api';

export const formOptions: VbenFormProps = {
  // 默认收起只显示第一行，点「展开」看全部筛选（字段多，全展开太占高度）
  collapsed: true,
  commonConfig: {
    // label 默认 100px，本页筛选名最长 4 字，收窄到 70px 让控件占满格子（否则控件被挤得只剩一半宽）
    labelWidth: 70,
    // antd Select/RangePicker 默认按内容收缩，统一撑满格子，保证一行里各控件等宽整齐
    componentProps: {
      class: 'w-full',
    },
  },
  // 响应式多列：抽出 grid 后 vben form 默认单列（一行一个字段），必须显式给栅格
  wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
  schema: [
    {
      // 放第一位：时间范围有默认值（本月至今），默认收起时必须始终可见，否则用户不知道当前查的是哪段数据
      component: 'RangePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
        // 提交纯日期，后端 getWhereBetween 会把结束日扩到当天 23:59:59
        valueFormat: 'YYYY-MM-DD',
      },
      defaultValue: [
        dayjs().startOf('month').format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD'),
      ],
      fieldName: 'search_time',
      label: '时间范围',
    },
    {
      // 统一 antd 系控件：与 ApiSelect/门店搜索同一套视觉（此前 VbenInput 是 shadcn 风格，高度圆角不一致）
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '输入订单号',
      },
      defaultValue: '',
      fieldName: 'order_no',
      label: '订单号',
    },
    {
      // 门店多选：名称/拼音首拼气泡选择，诊所+药店
      component: 'StoreMultiSearch',
      componentProps: {
        placeholder: '输入名称或拼音首拼',
      },
      defaultValue: [],
      fieldName: 'store_ids',
      label: '门店',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        filterOption: true,
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.id,
          }));
        },
        api: getOrderStatusOption,
        placeholder: '请选择',
      },
      fieldName: 'status',
      label: '订单状态',
    },
    {
      // 医生代支付：2=代支付（含历史单流水回落），1=用户自付
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '代支付', value: 2 },
          { label: '用户自付', value: 1 },
        ],
        placeholder: '全部',
      },
      fieldName: 'pay_user_type',
      label: '付款方式',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '快递到家',
            value: 0,
          },
          {
            label: '诊所自提',
            value: 1,
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'delivery_method',
      label: '发货方式',
    },
    {
      // 类型从后端枚举拉取，避免前端写死漏掉非药品/医疗器械等
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        filterOption: true,
        showSearch: true,
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item) => ({
            label: item.name,
            value: item.id,
          }));
        },
        api: getOrderPrescriptionTypeOption,
        placeholder: '请选择',
      },
      fieldName: 'prescription_type',
      label: '订单类型',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '药品名称/拼音首拼',
      },
      defaultValue: '',
      fieldName: 'drug_keyword',
      label: '药品',
    },
    {
      // 就诊人筛选：后端 whereHas userPatient 姓名/手机号模糊
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '姓名/手机号',
      },
      defaultValue: '',
      fieldName: 'patient_keyword',
      label: '就诊人',
    },
    {
      // 医生筛选：后端 whereHas doctorInfo 姓名/手机号模糊
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '姓名/手机号',
      },
      defaultValue: '',
      fieldName: 'doctor_keyword',
      label: '医生',
    },
  ],
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 任意输入框回车即搜索；下拉面板打开时的回车只选中选项（core 层已处理），第二次回车才搜索
  submitOnEnter: true,
};
