import React, { useEffect, useState } from 'react';
import { history, useLocation, useIntl } from 'umi';
import {
  Card,
  Form,
  Input,
  Select,
  Button,
  Table,
  Space,
  Row,
  Col,
  Tooltip,
  message,
  Divider,
} from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import { getEvaluateSupplierList, getAllEvaluateRules } from '@/servers/api/supplierEvaluate';
import GlobalModal from '../GlobalModal/index';

const EvaluationApproval: React.FC<{
  visible: boolean;
  record: any;
}> = ({ visible, record = {} }) => {
  const intl = useIntl();
  const supplierDetailModal = useSupplierDetailModal();
  const [resultData, setResultData] = useState<SupplierEvaluateResult.EvaluateSupplierItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [visibleGlobalModal, setVisibleGlobalModal] = useState(false);
  const [id, setId] = useState('');
  const columns = [
    {
      title: intl.formatMessage({ id: 'supplierEvaluateResult.column.index' }),
      render: (_: any, __: SupplierEvaluateResult.EvaluateSupplierItem, index: number) => index + 1,
      width: 80,
    },
    {
      title: intl.formatMessage({ id: 'supplierEvaluateResult.column.supplierName' }),
      dataIndex: 'supplierName',
      key: 'supplierName',
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (supplierName: string, record: SupplierEvaluateResult.EvaluateSupplierItem) => (
        <Tooltip placement="topLeft" title={supplierName}>
          <a
            onClick={() => {
              setId(record.supplierId);
              setVisibleGlobalModal(true);
            }}
          >
            {supplierName}
          </a>
        </Tooltip>
      ),
    },
    {
      title: intl.formatMessage({ id: 'supplierEvaluateResult.column.categoryName' }),
      dataIndex: 'categoryName',
      key: 'categoryName',
      width: 120,
    },
    {
      title: intl.formatMessage({ id: 'supplierEvaluateResult.column.reviewScore' }),
      dataIndex: 'reviewScore',
      key: 'reviewScore',
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'supplierEvaluateResult.column.levelName' }),
      dataIndex: 'levelName',
      key: 'levelName',
      width: 100,
      align: 'center' as const,
    },
  ];
  // 获取评价规则列表
  const fetchResultDetailList = async () => {
    // 确保有评价任务ID
    if (!record?.id) {
      message.error(intl.formatMessage({ id: 'supplierEvaluateResult.message.missingTaskId' }));
      return;
    }
    setLoading(true);
    try {
      // 构建请求参数
      const requestParams: SupplierEvaluateResult.EvaluateSupplierRequest = {
        basePageRequest: {
          pageNo: 1,
          pageSize: 999,
        },
        evaluateTaskId: record.id,
      };
      // 调用接口获取数据
      const response = await getEvaluateSupplierList(requestParams);
      if (response.data && response.success) {
        const { records } = response.data;
        setResultData(records);
      } else {
        message.error(
          response.message ||
            intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchDetailFailed' }),
        );
      }
    } catch (error) {
      console.error('获取评价结果详情列表失败:', error);
      message.error(intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchDetailFailed' }));
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    if (visible) {
      fetchResultDetailList();
    }
  }, [visible, record]);
  return (
    <div>
      <div className="content-area">
        <Table
          columns={columns}
          rowKey="id"
          dataSource={resultData}
          loading={loading}
          scroll={{ x: 1100 }}
          pagination={false}
        />
      </div>
      <GlobalModal
        visible={visibleGlobalModal}
        id={id}
        onCancel={() => setVisibleGlobalModal(false)}
      />
    </div>
  );
};

export default EvaluationApproval;