import React, { useState } from "react";
import { Tag, Button, Card, Row, Col, Table, Select, Input, Flex, Typography } from "antd";

const { TextArea } = Input;

const INITIAL_ROWS = [
  { dim: "资料有效性", focus: "现场资料和检测报告齐全有效", result: "符合", opinion: "资料有效" },
  { dim: "危险辨识", focus: "辨识充分、规律准确", result: "符合", opinion: "辨识充分" },
  { dim: "评价方法", focus: "选型合理、计算正确", result: "需修改", opinion: "补充事故模拟参数来源" },
  { dim: "对策措施", focus: "针对性和可行性", result: "符合", opinion: "措施可行" },
  { dim: "评价结论", focus: "结论正确、反映风险", result: "符合", opinion: "结论正确" },
];

const TechnicalReviewContent = () => {
  const [rows, setRows] = useState(INITIAL_ROWS);

  const updateRow = (index, field, value) => {
    const next = [...rows];
    next[index] = { ...next[index], [field]: value };
    setRows(next);
  };

  return (
    <div>
      <div className="pf-permission">
        <Tag color="blue" className="pf-tag">技术负责人</Tag>
        <span className="pf-desc">技术负责人独立审核技术路线和结论</span>
      </div>

     
        <Row gutter={16} style={{ marginBottom: 16 }}>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">审核版本</Typography.Text><div><strong>V1.4</strong></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">技术负责人</Typography.Text><div><strong>陈志强</strong></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">专业匹配</Typography.Text><div><Typography.Text strong type="success">化工安全</Typography.Text></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">备案校验</Typography.Text><div><Typography.Text strong type="success">有效</Typography.Text></div></Card></Col>
        </Row>

        <Table
          dataSource={rows}
          columns={[
            { title: "审核维度", dataIndex: "dim", width: 120 },
            { title: "技术审核重点", dataIndex: "focus", width: 200 },
            {
              title: "结论", dataIndex: "result", width: 120,
              render: (val, _, idx) => (
                <Select value={val} size="small" style={{ width: 100 }} onChange={(v) => updateRow(idx, "result", v)}>
                  <Select.Option value="符合">符合</Select.Option>
                  <Select.Option value="需修改">需修改</Select.Option>
                </Select>
              ),
            },
            {
              title: "技术意见", dataIndex: "opinion",
              render: (val, _, idx) => (
                <Input size="small" value={val} onChange={(e) => updateRow(idx, "opinion", e.target.value)} />
              ),
            },
          ]}
          rowKey="dim"
          pagination={false}
          size="small"
        />

        <div style={{ marginTop: 12 }}>
          <Typography.Text strong>技术审核意见</Typography.Text>
          <TextArea rows={2} defaultValue="补充定量评价参数来源后通过技术审核。" style={{ marginTop: 4 }} />
        </div>

        <Flex justify="space-between" align="center" style={{ marginTop: 10 }}>
          <Flex gap={8} align="center">
            <Typography.Text type="secondary">技术负责人签字</Typography.Text>
            <strong>陈志强</strong>
            <Button size="small">下发APP签字</Button>
          </Flex>
        </Flex>

        <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
          <Button>保存意见</Button>
          <Button>查看修改反馈</Button>
          <Button type="primary">确认技审并提交过程控制</Button>
        </Flex>
     
    </div>
  );
};

export default TechnicalReviewContent;