WEB/src/pages/Site/Shop/EditSiteForm.tsx

import { stockcontrollerGetallstockpoints } from '@/servers/api/stock';
import {
  DrawerForm,
  ProFormDependency,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import * as countries from 'i18n-iso-countries';
import zhCN from 'i18n-iso-countries/langs/zh';
import React, { useEffect } from 'react';

// 定义组件的 props 类型
interface EditSiteFormProps {
  open: boolean; // 控制抽屉表单的显示和隐藏
  onOpenChange: (visible: boolean) => void; // 当抽屉表单显示状态改变时调用
  onFinish: (values: any) => Promise<boolean | void>; // 表单提交成功时的回调
  initialValues?: any; // 表单的初始值
  isEdit: boolean; // 标记当前是编辑模式还是新建模式
}

const EditSiteForm: React.FC<EditSiteFormProps> = ({
  open,
  onOpenChange,
  onFinish,
  initialValues,
  isEdit,
}) => {
  const [form] = Form.useForm();

  // 初始化中文语言包
  countries.registerLocale(zhCN);

  // 当 initialValues 或 open 状态变化时, 更新表单的值
  useEffect(() => {
    // 如果抽屉是打开的
    if (open) {
      // 如果是编辑模式并且有初始值
      if (isEdit && initialValues) {
        // 编辑模式下, 设置表单值为初始值
        const { token, consumerKey, consumerSecret, ...safeInitialValues } =
          initialValues;
        // 清空敏感字段, 让用户输入最新的数据
        form.setFieldsValue({
          ...safeInitialValues,
          isDisabled: initialValues.isDisabled === 1, // 将后端的 1/0 转换成 true/false
        });
      } else {
        // 新建模式或抽屉关闭时, 重置表单
        form.resetFields();
      }
    }
  }, [initialValues, isEdit, open, form]);

  // 获取所有国家/地区的选项
  const getCountryOptions = () => {
    // 获取所有国家的 ISO 代码
    const countryCodes = countries.getAlpha2Codes();
    // 将国家代码转换为选项数组
    return Object.keys(countryCodes).map((code) => ({
      label: countries.getName(code, 'zh') || code, // 使用中文名称, 如果没有则使用代码
      value: code,
    }));
  };

  return (
    <DrawerForm
      title={isEdit ? '编辑站点' : '新建站点'}
      form={form}
      open={open}
      onOpenChange={onOpenChange}
      onFinish={async (values) => {
        // 直接将表单值传递给 onFinish 回调
        // 后端需要布尔值, 而 ProFormSwitch 已经提供了布尔值
        return onFinish(values);
      }}
      layout="vertical"
    >
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormTextArea
        name="description"
        label="描述"
        placeholder="请输入描述"
      />
      <ProFormText
        name="apiUrl"
        label="API 地址"
        rules={[{ required: true, message: '请输入 API 地址' }]}
        placeholder="请输入 API 地址"
      />
      <ProFormText
        name="websiteUrl"
        label="网站地址"
        placeholder="请输入网站地址"
      />
      <ProFormText
        name="webhookUrl"
        label="Webhook 地址"
        placeholder="请输入 Webhook 地址"
      />
      <ProFormSelect
        name="type"
        label="平台"
        options={[
          { label: 'WooCommerce', value: 'woocommerce' },
          { label: 'Shopyy', value: 'shopyy' },
        ]}
        rules={[{ required: true, message: '请选择平台' }]}
        placeholder="请选择平台"
      />
      {/* 根据选择的平台动态显示不同的认证字段 */}
      <ProFormDependency name={['type']}>
        {({ type }) => {
          // 如果平台是 woocommerce
          if (type === 'woocommerce') {
            return (
              <>
                <ProFormText
                  name="consumerKey"
                  label="Consumer Key"
                  rules={[
                    { required: !isEdit, message: '请输入 Consumer Key' },
                  ]}
                  placeholder={
                    isEdit ? '留空表示不修改' : '请输入 Consumer Key'
                  }
                />
                <ProFormText
                  name="consumerSecret"
                  label="Consumer Secret"
                  rules={[
                    { required: !isEdit, message: '请输入 Consumer Secret' },
                  ]}
                  placeholder={
                    isEdit ? '留空表示不修改' : '请输入 Consumer Secret'
                  }
                />
              </>
            );
          }
          // 如果平台是 shopyy
          if (type === 'shopyy') {
            return (
              <ProFormText
                name="token"
                label="Token"
                rules={[{ required: !isEdit, message: '请输入 Token' }]}
                placeholder={isEdit ? '留空表示不修改' : '请输入 Token'}
              />
            );
          }
          return null;
        }}
      </ProFormDependency>
      <ProFormText
        name="skuPrefix"
        label="SKU 前缀"
        placeholder="请输入 SKU 前缀"
      />
      <ProFormSelect
        name="areas"
        label="区域"
        mode="multiple"
        placeholder="请选择区域"
        
        showSearch
        filterOption={(input, option) =>
          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
        }
        options={getCountryOptions()}
      />
      <ProFormSelect
        name="stockPointIds"
        label="关联仓库"
        mode="multiple"
        placeholder="请选择关联仓库"
        request={async () => {
          // 从后端接口获取仓库数据
          const res = await stockcontrollerGetallstockpoints();
          // 使用可选链和空值合并运算符来安全地处理可能未定义的数据
          return (
            res?.data?.map((sp: any) => ({ label: sp.name, value: sp.id })) ??
            []
          );
        }}
      />
      <ProFormSwitch name="isDisabled" label="是否禁用" />
    </DrawerForm>
  );
};

export default EditSiteForm;