fe_supplier_frontend/src/pages/supplierEvaluateManage/supplierTaskManage/components/BasicInfoStep.tsx

import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
import { Form, Input, Select, DatePicker, Row, Col, Card, Radio } from 'antd';
import moment from 'moment';
import { getAllTemplates } from '@/servers/api/supplierEvaluate';
import CategorySelector from '@/components/CategorySelector';
import styles from '../supplierTaskManageAdd.less';
import { CategoryLimitationType } from '@/dicts/supplierTemplateDict';

const { Option } = Select;

interface BasicInfoStepProps {
  formData: Partial<SupplierEvaluate.TaskAddRequest>;
  onFormDataChange: (data: Partial<SupplierEvaluate.TaskAddRequest>) => void;
}

interface TemplateItem {
  id: string;
  templateName: string;
  categoryLimitation?: string;
}

const BasicInfoStep = forwardRef<any, BasicInfoStepProps>(({ formData, onFormDataChange }, ref) => {
  const [form] = Form.useForm();
  const [templates, setTemplates] = useState<TemplateItem[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(false);

  // 暴露表单方法给父组件
  useImperativeHandle(ref, () => ({
    validateFields: () => form.validateFields(),
    getFieldsValue: () => form.getFieldsValue(),
    setFieldsValue: (values: any) => form.setFieldsValue(values),
  }));

  // 获取模板列表
  const fetchTemplates = async () => {
    setLoading(true);
    try {
      const response = await getAllTemplates();
      if (response.success && response.data) {
        setTemplates(response.data);
      } else {
        setTemplates([
          { id: '1', templateName: '不限品类模板', categoryLimitation: '0' },
          { id: '2', templateName: '限制品类模板', categoryLimitation: '1' },
        ]);
      }
    } catch (error) {
      console.error('获取模板列表失败:', error);
      // 使用模拟数据
      setTemplates([
        { id: '1', templateName: '不限品类模板', categoryLimitation: '0' },
        { id: '2', templateName: '限制品类模板', categoryLimitation: '1' },
      ]);
    } finally {
      setLoading(false);
    }
  };

  // 获取评价模板和初始化表单数据
  useEffect(() => {
    fetchTemplates();

    // 初始化表单数据
    if (formData) {
      form.setFieldsValue(formData);

      // 设置已选品类
      if (formData.categoryId) {
        setSelectedCategoryId(formData.categoryId);
      }
    }
  }, []);

  // 表单值变化时触发
  const handleValuesChange = (changedValues: any, allValues: any) => {
    // 处理模板变更
    if (changedValues.templateId) {
      const template = templates.find((t) => t.id === changedValues.templateId);
      if (template) {
        form.setFieldsValue({
          categoryLimitation: template.categoryLimitation || '0',
        });

        // 如果选择了不限品类的模板，清空品类选择
        if (template.categoryLimitation === '0') {
          form.setFieldsValue({
            categoryId: undefined,
          });
          setSelectedCategoryId(undefined);
        }
      }
    }

    // 处理品类变更
    if (changedValues.categoryId) {
      setSelectedCategoryId(changedValues.categoryId?.[0]);
    }

    // 默认设置weightStatus为0
    const formattedValues = {
      ...allValues,
      weightStatus: 0,
    };

    onFormDataChange(formattedValues);
  };

  // 年度选项生成
  const yearOptions = useCallback(() => {
    const currentYear = new Date().getFullYear();
    return Array.from({ length: 11 }, (_, i) => currentYear - 5 + i).map((year) => (
      <Option key={year} value={year.toString()}>
        {year}
      </Option>
    ));
  }, []);

  // 判断是否显示品类选择器
  const shouldShowCategorySelector = useCallback(() => {
    const categoryLimitation = form.getFieldValue('categoryLimitation');
    return categoryLimitation === CategoryLimitationType.LIMITED;
  }, [form]);

  // 处理品类选择变化
  const handleCategoryChange = useCallback((value: string | string[]) => {
    const categoryId = Array.isArray(value) ? value[0] : value;
    setSelectedCategoryId(categoryId);
  }, []);

  return (
    <div className={styles.basicInfoStep}>
      <Card title="基本信息" bordered={false} className="inner-card">
        <Form
          form={form}
          layout="vertical"
          onValuesChange={handleValuesChange}
          initialValues={{
            ...formData,
            categoryLimitation: formData.categoryLimitation || '0',
          }}
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="评价主题"
                name="evaluateTheme"
                rules={[{ required: true, message: '请输入评价主题' }]}
              >
                <Input placeholder="请输入" maxLength={50} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="评价年度"
                name="evaluateYear"
                rules={[{ required: true, message: '请选择评价年度' }]}
              >
                <Select placeholder="请选择年度" style={{ width: '100%' }}>
                  {yearOptions()}
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="评价开始时间"
                name="startTime"
                rules={[{ required: true, message: '请选择评价开始时间' }]}
                getValueProps={(value) => ({
                  value: value ? moment(value) : undefined,
                })}
                normalize={(value) => value && value.format('YYYY-MM-DD')}
              >
                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="年/月/日" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="评价结束时间"
                name="endTime"
                rules={[{ required: true, message: '请选择评价结束时间' }]}
                getValueProps={(value) => ({
                  value: value ? moment(value) : undefined,
                })}
                normalize={(value) => value && value.format('YYYY-MM-DD')}
              >
                <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" placeholder="年/月/日" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="品类限制类型"
                name="categoryLimitation"
                rules={[{ required: true, message: '请选择品类限制类型' }]}
              >
                <Radio.Group>
                  <Radio value={CategoryLimitationType.UNIVERSAL}>通用不限品类</Radio>
                  <Radio value={CategoryLimitationType.LIMITED}>限制品类</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            {shouldShowCategorySelector() && (
              <Col span={12}>
                <Form.Item
                  label="选择品类"
                  name="categoryId"
                  rules={[{ required: true, message: '请选择品类' }]}
                >
                  <CategorySelector onChange={handleCategoryChange} />
                </Form.Item>
              </Col>
            )}
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="选择模板"
                name="templateId"
                rules={[{ required: true, message: '请选择适用评价模板' }]}
              >
                <Select placeholder="请选择" style={{ width: '100%' }} allowClear loading={loading}>
                  {templates.map((template) => (
                    <Option key={template.id} value={template.id}>
                      {template.templateName}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
  );
});

export default BasicInfoStep;