import React, { forwardRef, useImperativeHandle, useEffect, useState } from 'react';
import { Card } from 'antd';
import styles from '../supplierAnnualTaskManageAdd.less';
import SupplierSelector from '@/components/SupplierSelector';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { SupplierTaskModelState } from '@/models/supplierAnnualTaskManage';

interface SupplierSelectStepProps {
  supplierAnnualTaskManage: SupplierTaskModelState;
  dispatch: Dispatch;
  innerRef?: any; // 使用 innerRef 作为属性名
}

// 定义组件，使用 innerRef 代替直接的 ref
const SupplierSelectStepComponent = (props: SupplierSelectStepProps) => {
  const { supplierAnnualTaskManage, dispatch, innerRef } = props;

  // 从model获取数据
  const { taskFormData } = supplierAnnualTaskManage;

  // 内部状态，避免直接操作formData导致循环更新
  const [selectedSuppliers, setSelectedSuppliers] = useState<supplierAnnualTaskManage.SupplierItem[]>([]);

  // 当taskFormData.selectedSuppliers更新时，同步到本地状态
  useEffect(() => {
    if (taskFormData.selectedSuppliers && taskFormData.selectedSuppliers.length > 0) {
      setSelectedSuppliers(taskFormData.selectedSuppliers);
    }
  }, [taskFormData.selectedSuppliers]); // 只在表单ID变化时更新（编辑模式加载时）

  // 暴露表单方法给父组件，使用 innerRef
  useImperativeHandle(innerRef, () => ({
    validateFields: () => {
      // 这里可以添加自定义验证逻辑
      return Promise.resolve();
    },
    // 删除不必要的方法，因为现在使用Dva管理数据
  }));

  // 处理供应商选择
  const handleSupplierSelect = (suppliers: supplierAnnualTaskManage.SupplierItem[]) => {
    // 确保每个供应商都有evaluators字段
    const suppliersWithEvaluators = suppliers.map(supplier => ({
      ...supplier,
      evaluators: supplier.evaluators || [],  // 确保evaluators字段存在，即使是空数组
      evaluatorCount: supplier.evaluators?.length || 0  // 计算评价人员数量
    }));

    // 更新本地状态
    setSelectedSuppliers(suppliersWithEvaluators);

    // 通过dispatch更新model数据
    dispatch({
      type: 'supplierAnnualTaskManage/updateFormData',
      payload: {
        selectedSuppliers: suppliersWithEvaluators,
        supplierIds: suppliersWithEvaluators.map(supplier => ({ suppliedId: supplier.id }))
      }
    });
  };

  return (
    <div className={styles.supplierSelectStep}>
      <Card title="供应商选择" bordered={false} className="inner-card">
        <SupplierSelector
          onSelect={handleSupplierSelect}
          selectedSuppliers={selectedSuppliers}
        />
      </Card>
    </div>
  );
};

// 连接 Dva model
const ConnectedComponent = connect(
  ({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
    supplierAnnualTaskManage,
  })
)(SupplierSelectStepComponent);

// 外层转发 ref 到 innerRef
const SupplierSelectStep = forwardRef((props: any, ref) => (
  <ConnectedComponent {...props} innerRef={ref} />
));

export default SupplierSelectStep;