fe_supplier_frontend/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageDetail.tsx

import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Button, Card, Descriptions, Divider, Spin, message, Typography, Empty, Space } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { getTemplateDetail } from '@/servers/api/supplierEvaluate';
import {
  TaskType,
  TaskTypeText,
  TemplateStatus,
  TemplateStatusText,
  TemplateStatusColor,
  CategoryLimitationType,
  CategoryLimitationTypeText,
  StarLevel,
} from '@/dicts/supplierTemplateDict';
import ScoreEvaluationTable from '@/components/ScoreEvaluationTable';
import EvaluateTemplateTable from '@/components/EvaluateTemplateTable';
import type { TemplateDimension } from '@/servers/dao/supplierEvaluateTask';

const { Title } = Typography;

const SupplierTemplateManageDetail: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [templateDetail, setTemplateDetail] = useState<TemplateDimension | null>(
    null,
  );
  const [templateData, setTemplateData] = useState<any[]>([]);

  // 从路由获取ID
  const { id } = history.location.state as { id: string };

  // 获取模板详情
  const fetchTemplateDetail = async (templateId: string) => {
    try {
      setLoading(true);
      const res = await getTemplateDetail(templateId);
      if (res.success && res.data) {
        setTemplateDetail(res.data);

        // 直接设置指标数据，无需转换
        if (res.data.indicatorStList && res.data.indicatorStList.length > 0) {
          setTemplateData(res.data.indicatorStList);
        }
      } else {
        message.error(res.message || '获取模板详情失败');
      }
    } catch (error) {
      console.error('获取模板详情失败:', error);
      message.error('获取模板详情失败');
    } finally {
      setLoading(false);
    }
  };

  // 首次加载获取数据
  useEffect(() => {
    if (id) {
      fetchTemplateDetail(id);
    } else {
      message.error('模板ID不存在，无法获取详情');
      history.goBack();
    }
  }, [id]);

  // 返回列表页
  const handleBack = () => {
    history.goBack();
  };

  // 获取状态标签
  const getStatusText = (status: string | undefined) => {
    if (!status) return '未知状态';
    return TemplateStatusText[status as keyof typeof TemplateStatusText] || '未知状态';
  };

  return (
    <div className="common-container">
      <Card>
        <div className="page-header">
          <Title level={4} style={{ margin: 0 }}>
            模板详情
          </Title>
          <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
            返回
          </Button>
        </div>
        <Spin spinning={loading}>
          {templateDetail ? (
            <>
              <Card title="基本信息" bordered={false}>
                <Descriptions column={2} bordered>
                  <Descriptions.Item label="模板名称">
                    {templateDetail.templateName}
                  </Descriptions.Item>
                  <Descriptions.Item label="品类限制">
                    {CategoryLimitationTypeText[templateDetail.categoryLimitation as keyof typeof CategoryLimitationTypeText] || '未知'}
                  </Descriptions.Item>
                  <Descriptions.Item label="品类">
                    {templateDetail.categoryName || '未知品类'}
                  </Descriptions.Item>
                  <Descriptions.Item label="状态">
                    {getStatusText(templateDetail.status)}
                  </Descriptions.Item>
                  <Descriptions.Item label="创建时间">
                    {templateDetail.createTime}
                  </Descriptions.Item>
                  {templateDetail.updateTime && (
                    <Descriptions.Item label="更新时间">
                      {templateDetail.updateTime}
                    </Descriptions.Item>
                  )}
                </Descriptions>
              </Card>

              <Divider />

              <Card title="评价指标" bordered={false}>
                {templateData.length > 0 ? (
                  <EvaluateTemplateTable
                    value={templateData}
                    isDetail={true}
                  />
                ) : (
                  <Empty description="暂无指标数据" />
                )}
              </Card>
            </>
          ) : (
            !loading && <Empty description="暂无模板详情数据" />
          )}
        </Spin>
      </Card>
    </div>
  );
};

export default SupplierTemplateManageDetail;