import React from "react";
import { Tag, Button, Card, Row, Col, Table, Statistic, Flex } from "antd";

const TeamContent = () => (
  <div>
    <div className="pf-permission">
      <Tag color="blue" className="pf-tag">评价部经理 / 机构主账号</Tag>
      <span className="pf-desc">
        添加人员时可同时选择多个项目角色和多名人员；普通角色可配置多人。"项目负责人（项目组组长）"和"过程控制负责人"每个项目只能配置1人，选择任一唯一角色时，本次只能选择1名人员。
      </span>
    </div>

  
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={6}>
          <Card size="small">
            <Statistic title="已配置人员" value={5} suffix="人" />
          
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic title="已覆盖角色" value="5 / 11" />
         
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic title="项目负责人" value="已配置" valueStyle={{ color: "#52c41a" }} />
        
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic title="过程控制负责人" value="待配置" valueStyle={{ color: "#faad14" }} />
         
          </Card>
        </Col>
      </Row>

      <Flex justify="flex-end" align="center" style={{ marginBottom: 12 }}>
       
        <Button type="primary" size="small">＋ 添加人员与角色</Button>
      </Flex>

      <Table
        dataSource={[
          { id: 1, name: "张建国", dept: "评价一部", role: "项目负责人", qualification: "一级评价师/化工", check: "通过", duty: "制定实施计划并组织启动、初勘、检查表、现场勘查、整改复查及报告编制" },
          { id: 2, name: "李明华", dept: "评价一部", role: "报告编制人", qualification: "二级评价师/安全", check: "通过", duty: "整合各专业内容形成报告初稿" },
        ]}
        columns={[
          { title: "姓名", dataIndex: "name" },
          { title: "部门/岗位", dataIndex: "dept" },
          { title: "项目角色", dataIndex: "role" },
          { title: "资质与专业", dataIndex: "qualification" },
          { title: "配置校验", dataIndex: "check" },
          { title: "主要职责", dataIndex: "duty", ellipsis: true },
          { title: "操作", width: 100, render: () => <Button type="link" danger size="small">移除</Button> },
        ]}
        rowKey="id"
        pagination={false}
      />

      <details style={{ marginTop: 12, cursor: "pointer" }}>
        <summary style={{ color: "#1677ff", fontSize: 13, padding: "8px 0" }}>查看11类项目角色职责说明</summary>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8, padding: "8px 0" }}>
          {[
            { name: "市场部业务员", unique: false, summary: "获取项目基础信息，形成风险分析记录；风险通过后签订合同并下达任务通知单。" },
            { name: "技术负责人", unique: false, summary: "评估人员专业匹配与技术可行性，审核检查表并开展评价报告技术审核。" },
            { name: "过程控制负责人", unique: true, summary: "核查利益冲突、资质范围和人员配置，负责受控管理、程序合规审核及归档前校验。" },
            { name: "财务人员", unique: false, summary: "核算人工、费用、税金和利润等全成本，评估项目经济性及合同金额合理性。" },
            { name: "评价机构负责人", unique: false, summary: "综合多方意见决定是否承接项目，并在全部审核通过后终审签发评价报告。" },
            { name: "评价部经理", unique: false, summary: "签发项目组任命文件，审核组长资格、行业经验及成员专业配置。" },
            { name: "项目负责人（项目组组长）", unique: true, summary: "制定实施计划并组织启动、初勘、检查表、现场勘查、整改复查及报告编制。" },
            { name: "项目组各专业组员", unique: false, summary: "按专业分工开展资料收集、检查表编制、现场检查、危险辨识和评价报告专业内容编写。" },
            { name: "内审人", unique: false, summary: "审核报告初稿及修改结果，重点核查依据、危险辨识、单元划分、评价方法和结论。" },
            { name: "报告编制人", unique: false, summary: "整合各专业内容形成报告初稿，根据各级审核意见修改并整理全过程档案。" },
            { name: "档案管理员", unique: false, summary: "办理档案交接、编号、分类、装订和入库，并按规定开展报告信息公开。" },
          ].map((role) => (
            <div key={role.name} style={{ border: "1px solid #e8e8e8", borderRadius: 6, padding: "8px 10px", background: "#f8fafc" }}>
              <strong style={{ fontSize: 13 }}>
                {role.name}
                {role.unique && <Tag color="blue" style={{ marginLeft: 6, fontSize: 11 }}>单人唯一</Tag>}
              </strong>
              <p style={{ fontSize: 12, color: "#666", margin: "4px 0 0", lineHeight: 1.55 }}>{role.summary}</p>
            </div>
          ))}
        </div>
      </details>

      <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
        <Button>暂存</Button>
        <Button>生成项目组任命文件</Button>
        <Button type="primary">确认项目组</Button>
      </Flex>
    
  </div>
);

export default TeamContent;