import React, { useState, useEffect } from 'react';
import {
  Card,
  Typography,
  Form,
  Input,
  Select,
  Button,
  Table,
  Space,
  Divider,
  Radio,
  message,
  Row,
  Col,
} from 'antd';
import { ArrowLeftOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { history, useLocation } from 'umi';
import {
  ProcessStatus,
  ProcessStatusText,
  ApprovalResult,
  ApprovalResultText
} from '@/dicts/supplierEvaluateDict';
// Use inline styles instead of importing a less file

const { Title, Text } = Typography;
const { Option } = Select;
const { TextArea } = Input;

const SupplierEvaluateResultApprovalInfo: React.FC = () => {
  const location = useLocation<{ record: SupplierEvaluate.ApprovalRecord }>();
  const [loading, setLoading] = useState<boolean>(false);
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [record, setRecord] = useState<SupplierEvaluate.ApprovalRecord | null>(null);
  const [form] = Form.useForm();
  const [evaluationData, setEvaluationData] = useState<SupplierEvaluate.SupplierEvaluationRecord[]>([]);

  // 模拟获取评价详情数据
  const fetchEvaluationData = () => {
    setLoading(true);
    // 模拟API请求
    setTimeout(() => {
      // 模拟数据
      const mockData = [
        {
          id: '1',
          supplierName: '中山市合创展包装材料有限公司',
          category: '燃油',
          score: 98,
          level: 'A',
          evaluator: '张三',
          evaluateTime: '2023-05-15',
        },
        {
          id: '2',
          supplierName: '深圳市欧阳华斯电源有限公司',
          category: '燃油',
          score: 95,
          level: 'A',
          evaluator: '李四',
          evaluateTime: '2023-05-16',
        },
        {
          id: '3',
          supplierName: '广东振兴塑胶机械有限公司',
          category: '燃油',
          score: 80,
          level: 'B',
          evaluator: '王五',
          evaluateTime: '2023-05-17',
        },
        {
          id: '4',
          supplierName: '上海硕建建筑技术工程有限公司',
          category: '备件',
          score: 60,
          level: 'C',
          evaluator: '赵六',
          evaluateTime: '2023-05-18',
        },
        {
          id: '5',
          supplierName: '中山市合创展包装材料有限公司',
          category: '润滑油',
          score: 98,
          level: 'A',
          evaluator: '张三',
          evaluateTime: '2023-05-19',
        },
        {
          id: '6',
          supplierName: '深圳市欧阳华斯电源有限公司',
          category: '备件',
          score: 95,
          level: 'A',
          evaluator: '李四',
          evaluateTime: '2023-05-20',
        },
        {
          id: '7',
          supplierName: '广东振兴塑胶机械有限公司',
          category: '润滑油',
          score: 80,
          level: 'B',
          evaluator: '王五',
          evaluateTime: '2023-05-21',
        },
        {
          id: '8',
          supplierName: '上海硕建建筑技术工程有限公司',
          category: '备件',
          score: 60,
          level: 'C',
          evaluator: '赵六',
          evaluateTime: '2023-05-22',
        },
        {
          id: '9',
          supplierName: '广东振兴塑胶机械有限公司',
          category: '润滑油',
          score: 80,
          level: 'B',
          evaluator: '王五',
          evaluateTime: '2023-05-23',
        },
        {
          id: '10',
          supplierName: '上海硕建建筑技术工程有限公司',
          category: '备件',
          score: 60,
          level: 'C',
          evaluator: '赵六',
          evaluateTime: '2023-05-24',
        },
      ];

      setEvaluationData(mockData);
      setLoading(false);
    }, 500);
  };

  // 获取上级页面传递的数据
  useEffect(() => {
    if (location.state?.record) {
      setRecord(location.state.record);
      // 模拟获取评价详情数据
      fetchEvaluationData();
    }
  }, [location]);

  // 处理返回
  const handleBack = () => {
    history.goBack();
  };

  // 处理提交
  const handleSubmit = async (values: SupplierEvaluate.ApprovalFormValues) => {
    setSubmitting(true);
    try {
      // 模拟提交
      setTimeout(() => {
        console.log('提交审批结果:', values);
        message.success('审批提交成功');
        setSubmitting(false);
        history.goBack();
      }, 1000);
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败');
      setSubmitting(false);
    }
  };

  const columns = [
    {
      title: '序号',
      render: (_: any, __: SupplierEvaluate.SupplierEvaluationRecord, index: number) => index + 1,
      width: 80,
    },
    {
      title: '供应商名称',
      dataIndex: 'supplierName',
      key: 'supplierName',
      width: 200,
    },
    {
      title: '评价品类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
    },
    {
      title: '评价得分',
      dataIndex: 'score',
      key: 'score',
      width: 100,
      align: 'center' as const,
    },
    {
      title: '评价等级',
      dataIndex: 'level',
      key: 'level',
      width: 100,
      align: 'center' as const,
    },
    {
      title: '评价人',
      dataIndex: 'evaluator',
      key: 'evaluator',
      width: 120,
    },
    {
      title: '评价时间',
      dataIndex: 'evaluateTime',
      key: 'evaluateTime',
      width: 120,
    },
  ];

  if (!record) {
    return <div className="common-container">加载中...</div>;
  }

  return (
    <div className="common-container">
      <Card bordered={false}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
          <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
            返回
          </Button>
          <Title level={4} style={{ margin: 0 }}>供应商评价结果审批</Title>
        </div>

        <div style={{ marginBottom: 20 }}>
          <Row gutter={16}>
            <Col span={8}>
              <Text strong>评价主题：</Text>
              <Text>{record.evaluateTitle}</Text>
            </Col>
            <Col span={8}>
              <Text strong>评价品类：</Text>
              <Text>{record.evaluateCategory}</Text>
            </Col>
            <Col span={8}>
              <Text strong>发起单位：</Text>
              <Text>{record.initiatingUnit}</Text>
            </Col>
          </Row>
          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={8}>
              <Text strong>申请时间：</Text>
              <Text>{record.applyTime}</Text>
            </Col>
            <Col span={8}>
              <Text strong>流程状态：</Text>
              <Text>{ProcessStatusText[record.processStatus as keyof typeof ProcessStatusText] || '未知状态'}</Text>
            </Col>
          </Row>
        </div>

        <Divider />

        <Table
          columns={columns}
          dataSource={evaluationData}
          pagination={false}
          loading={loading}
          bordered
          size="middle"
          scroll={{ x: 1000 }}
        />

        <Divider />

        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{ approvalResult: ApprovalResult.APPROVED }}
        >
          <Title level={5}>审批意见</Title>
          <Form.Item
            name="approvalResult"
            label="审批结果"
            rules={[{ required: true, message: '请选择审批结果' }]}
          >
            <Radio.Group>
              <Radio value={ApprovalResult.APPROVED}>
                <CheckCircleOutlined style={{ color: 'green' }} /> {ApprovalResultText[ApprovalResult.APPROVED]}
              </Radio>
              <Radio value={ApprovalResult.REJECTED}>
                <CloseCircleOutlined style={{ color: 'red' }} /> {ApprovalResultText[ApprovalResult.REJECTED]}
              </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="comment"
            label="备注"
            rules={[{ required: true, message: '请输入审批备注' }]}
          >
            <TextArea rows={4} placeholder="请输入审批备注" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={submitting}>
              提交
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={handleBack}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default SupplierEvaluateResultApprovalInfo;
