tools_auto_web/src/pages/PendingToolsDetail.js

import React, { useState, useEffect } from "react";
import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin } from "antd";
import { useParams, useNavigate, useLocation } from "react-router-dom";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { pendingToolsApi } from "../services/api";
import moment from "moment";
import { STATUS_TAG_COLOR, STATUS_MAP } from "./PendingToolsList";

const { TextArea } = Input;
const { Option } = Select;

const PendingToolsDetail = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const isEditMode = location.search.includes("mode=edit");

  const getStatusColor = (status) => {
    return STATUS_TAG_COLOR[status] || "default";
  };

  const getStatusText = (status) => {
    return STATUS_MAP[status] || "未知";
  };

  const fetchData = async () => {
    try {
      const response = await pendingToolsApi.getDetail(id);
      setData(response.data);
      if (response.data.task) {
        form.setFieldsValue(response.data.task);
      }
    } catch (error) {
      message.error("获取详情失败");
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (values) => {
    setSaving(true);
    try {
      await pendingToolsApi.update(id, values);
      message.success("更新成功");
      navigate("/pending-tools");
    } catch (error) {
      message.error("更新失败");
    } finally {
      setSaving(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [id]);

  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" />
      </div>
    );
  }

  if (!data) {
    return (
      <div className="error-container">
        <div className="text-red-500 text-lg">数据不存在</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate("/pending-tools")}
          className="hover:bg-gray-50"
        >
          返回列表
        </Button>
        <div className="text-sm text-gray-500">{isEditMode ? "编辑模式" : "查看模式"}</div>
      </div>

      {isEditMode ? (
        <Card
          title="编辑待接入工具"
          className="shadow-lg border-0"
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSave}
            className="form-container"
          >
            <Form.Item
              label="工具名称"
              name="tools_name"
              rules={[{ required: true, message: "请输入工具名称" }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="工具功能名称"
              name="tools_function_name"
              rules={[{ required: true, message: "请输入工具功能名称" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="状态"
              name="status"
              rules={[{ required: true, message: "请选择状态" }]}
            >
              <Select>
                <Option value={0}>待处理</Option>
                <Option value={1}>处理中</Option>
                <Option value={2}>已完成</Option>
                <Option value={3}>失败</Option>
                <Option value={4}>待审核</Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="工具功能描述"
              name="tools_function_desc"
            >
              <TextArea rows={4} />
            </Form.Item>

            <Form.Item
              label="失败原因"
              name="fail_reason"
            >
              <TextArea rows={3} />
            </Form.Item>

            <div className="button-group">
              <Button onClick={() => navigate("/pending-tools")}>取消</Button>
              <Button
                type="primary"
                htmlType="submit"
                loading={saving}
              >
                保存
              </Button>
            </div>
          </Form>
        </Card>
      ) : (
        <div className="space-y-6">
          <Card
            title="基本信息"
            className="shadow-lg border-0"
          >
            <Descriptions
              column={2}
              bordered
              size="small"
            >
              <Descriptions.Item label="工具ID">{data.task.search_task_id}</Descriptions.Item>
              <Descriptions.Item label="工具名称">{data.task.tools_name}</Descriptions.Item>
              <Descriptions.Item label="工具功能名称">{data.task.tools_function_name}</Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={getStatusColor(data.task.status)}>{getStatusText(data.task.status)}</Tag>
              </Descriptions.Item>
              <Descriptions.Item
                label="工具功能描述"
                span={2}
              >
                {data.task.tools_function_desc}
              </Descriptions.Item>
              <Descriptions.Item
                label="失败原因"
                span={2}
              >
                {data.task.fail_reason || "无"}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {moment(data.task.create_time).format("YYYY-MM-DD HH:mm:ss")}
              </Descriptions.Item>
              <Descriptions.Item label="更新时间">
                {moment(data.task.update_time).format("YYYY-MM-DD HH:mm:ss")}
              </Descriptions.Item>
            </Descriptions>
          </Card>

          {data.detail && (
            <Card
              title="详细信息"
              className="shadow-lg border-0"
            >
              <Descriptions
                column={2}
                bordered
                size="small"
              >
                <Descriptions.Item label="检索渠道">{data.detail.search_channel}</Descriptions.Item>
                <Descriptions.Item
                  label="检索结果"
                  span={2}
                >
                  <div style={{ maxHeight: "200px", overflow: "auto" }}>
                    <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                      {data.detail.search_result || "无"}
                    </pre>
                  </div>
                </Descriptions.Item>
              </Descriptions>
            </Card>
          )}
        </div>
      )}
    </div>
  );
};

export default PendingToolsDetail;