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

import React, { useState, useEffect } from 'react';
import { Form, Input, Select, DatePicker, Row, Col, Card } from 'antd';
import moment from 'moment';
import CategorySelector from '@/components/CategorySelector';
import styles from '../supplierTaskManageAdd.less';

const { Option } = Select;

interface BasicInfoStepProps {
  formData: any;
  onFormDataChange: (data: any) => void;
}

interface TemplateItem {
  id: string;
  templateName: string;
  isUnlimitedCategory?: boolean;
}

const BasicInfoStep: React.FC<BasicInfoStepProps> = ({ formData, onFormDataChange }) => {
  const [form] = Form.useForm();
  const [templates, setTemplates] = useState<TemplateItem[]>([]);
  const [categoryTemplates, setCategoryTemplates] = useState<any[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>(undefined);

  // 获取评价模板和初始化表单数据
  useEffect(() => {
    // 模拟API调用获取模板列表
    const mockTemplates = [
      { id: '1', templateName: '不限品类', isUnlimitedCategory: true },
      { id: '2', templateName: '按品类', isUnlimitedCategory: false },
    ];
    setTemplates(mockTemplates);

    // 初始化表单数据
    if (formData) {
      const initialValues = {
        ...formData,
        evaluateStartTime: formData.evaluateStartTime ? moment(formData.evaluateStartTime) : undefined,
        evaluateEndTime: formData.evaluateEndTime ? moment(formData.evaluateEndTime) : undefined,
      };
      form.setFieldsValue(initialValues);

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

  // 获取品类对应的模板数据
  useEffect(() => {
    if (selectedCategoryId) {
      // 模拟API调用，根据品类ID获取对应的模板列表
      const mockCategoryTemplates = [
        { id: 'ct1', templateName: '硬件设备评价模板' },
        { id: 'ct2', templateName: '备件评价模板' },
        { id: 'ct3', templateName: '通用备件评价模板' },
      ];
      setCategoryTemplates(mockCategoryTemplates);
    } else {
      setCategoryTemplates([]);
    }
  }, [selectedCategoryId]);

  // 检查当前选择的模板是否限制品类
  const isTemplateUnlimitedCategory = () => {
    const templateId = form.getFieldValue('templateId');
    const currentTemplate = templates.find(t => t.id === templateId);
    return currentTemplate?.isUnlimitedCategory;
  };

  // 表单值变化时触发
  const handleValuesChange = (changedValues: any, allValues: any) => {
    // 处理模板变更
    if (changedValues.templateId) {
      // 如果选择了不限品类的模板，清空品类选择和品类模板选择
      if (isTemplateUnlimitedCategory()) {
        form.setFieldsValue({
          categoryId: undefined,
          categoryTemplateId: undefined
        });
        setSelectedCategoryId(undefined);
      }
    }

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

    // 将moment对象转换为字符串再传递
    const formattedValues = {
      ...allValues,
      evaluateStartTime: allValues.evaluateStartTime?.format('YYYY-MM-DD'),
      evaluateEndTime: allValues.evaluateEndTime?.format('YYYY-MM-DD'),
    };
    onFormDataChange(formattedValues);
  };

  // 年度选项生成
  const yearOptions = () => {
    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 = () => {
    const templateId = form.getFieldValue('templateId');
    if (!templateId) return false;

    const currentTemplate = templates.find(t => t.id === templateId);
    return currentTemplate && !currentTemplate.isUnlimitedCategory;
  };

  return (
    <div className={styles.basicInfoStep}>
      <Card title="基本信息" bordered={false} className="inner-card">
        <Form
          form={form}
          layout="vertical"
          onValuesChange={handleValuesChange}
          initialValues={formData}
        >
          <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="2025" style={{ width: '100%' }}>
                  {yearOptions()}
                </Select>
              </Form.Item>
            </Col>
          </Row>

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

          <Row gutter={24} align="middle">
            <Col span={12}>
              <Form.Item
                label="适用评价模板"
                name="templateId"
                rules={[{ required: true, message: '请选择适用评价模板' }]}
              >
                <Select
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  allowClear
                >
                  {templates.map(template => (
                    <Option key={template.id} value={template.id}>
                      {template.templateName}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {shouldShowCategorySelector() && (
              <Col span={12}>
                <Form.Item
                  label="选择品类"
                  name="categoryId"
                  rules={[{ required: true, message: '请选择品类' }]}
                >
                  <CategorySelector
                    onChange={(values: string[]) => {
                      const categoryId = values?.[0];
                      setSelectedCategoryId(categoryId);

                      if (!categoryId) {
                        form.setFieldsValue({ categoryTemplateId: undefined });
                      }
                    }}
                  />
                </Form.Item>
              </Col>
            )}
          </Row>

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

export default BasicInfoStep;