import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/public/white/bg5.png";
import bg2 from "~/assets/images/public/white/bg6.png";
import img1 from "~/assets/images/public/white/img3.png";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import "./index.less";

function RightPanel() {
  const [block1List, setBlock1List] = useState([
    { id: 1, department: "安全部", position: "值班经理", name: "张三", phone: "13800138001" },
    { id: 2, department: "生产部", position: "值班主管", name: "李四", phone: "13800138002" },
    { id: 3, department: "质检部", position: "值班员", name: "王五", phone: "13800138003" },
    { id: 4, department: "物流部", position: "调度员", name: "赵六", phone: "13800138004" },
    { id: 5, department: "技术部", position: "工程师", name: "钱七", phone: "13800138005" },
    { id: 6, department: "销售部", position: "业务员", name: "孙八", phone: "13800138006" },
    { id: 7, department: "财务部", position: "会计", name: "周九", phone: "13800138007" },
    { id: 8, department: "人事部", position: "人事专员", name: "吴十", phone: "13800138008" },
    { id: 9, department: "工程部", position: "项目经理", name: "郑一", phone: "13800138009" },
    { id: 10, department: "设备部", position: "维修技师", name: "刘二", phone: "13800138010" },
  ]);
  const [block4List, setBlock4List] = useState([
    { id: 1, type: "承包商", firstLevelUnits: 15, firstLevelPeople: 120, secondLevelUnits: 8, secondLevelPeople: 65 },
    { id: 2, type: "供应商", firstLevelUnits: 22, firstLevelPeople: 85, secondLevelUnits: 12, secondLevelPeople: 45 },
    { id: 3, type: "服务商", firstLevelUnits: 9, firstLevelPeople: 45, secondLevelUnits: 5, secondLevelPeople: 25 },
    { id: 4, type: "租赁商", firstLevelUnits: 6, firstLevelPeople: 30, secondLevelUnits: 3, secondLevelPeople: 15 },
    { id: 5, type: "临时工", firstLevelUnits: 3, firstLevelPeople: 25, secondLevelUnits: 1, secondLevelPeople: 8 },
    { id: 6, type: "外包单位", firstLevelUnits: 12, firstLevelPeople: 95, secondLevelUnits: 7, secondLevelPeople: 50 },
    { id: 7, type: "合作单位", firstLevelUnits: 8, firstLevelPeople: 70, secondLevelUnits: 4, secondLevelPeople: 30 },
    { id: 8, type: "施工单位", firstLevelUnits: 10, firstLevelPeople: 150, secondLevelUnits: 6, secondLevelPeople: 80 },
    { id: 9, type: "监理单位", firstLevelUnits: 5, firstLevelPeople: 20, secondLevelUnits: 2, secondLevelPeople: 10 },
    { id: 10, type: "设计单位", firstLevelUnits: 4, firstLevelPeople: 18, secondLevelUnits: 1, secondLevelPeople: 5 },
  ]);
  const [block5List, setBlock5List] = useState([
    { id: 1, companyName: "华建建设集团有限公司", projectCount: 8, penaltyCount: 2, penaltyAmount: 15000 },
    { id: 2, companyName: "宏达机械设备有限公司", projectCount: 5, penaltyCount: 1, penaltyAmount: 8000 },
    { id: 3, companyName: "永泰建筑工程有限公司", projectCount: 12, penaltyCount: 3, penaltyAmount: 25000 },
    { id: 4, companyName: "安达安全服务有限公司", projectCount: 6, penaltyCount: 0, penaltyAmount: 0 },
    { id: 5, companyName: "兴盛劳务分包有限公司", projectCount: 15, penaltyCount: 5, penaltyAmount: 35000 },
    { id: 6, companyName: "创新技术咨询有限公司", projectCount: 3, penaltyCount: 1, penaltyAmount: 12000 },
    { id: 7, companyName: "顺通物流运输有限公司", projectCount: 7, penaltyCount: 2, penaltyAmount: 18000 },
    { id: 8, companyName: "蓝天环保工程有限公司", projectCount: 4, penaltyCount: 0, penaltyAmount: 0 },
    { id: 9, companyName: "恒力钢结构有限公司", projectCount: 10, penaltyCount: 4, penaltyAmount: 30000 },
    { id: 10, companyName: "美佳装饰设计有限公司", projectCount: 9, penaltyCount: 1, penaltyAmount: 10000 },
  ]);

  const calculateSummary = () => {
    const totalFirstLevelUnits = block4List.reduce((sum, item) => sum + item.firstLevelUnits, 0);
    const totalFirstLevelPeople = block4List.reduce((sum, item) => sum + item.firstLevelPeople, 0);
    const totalSecondLevelUnits = block4List.reduce((sum, item) => sum + item.secondLevelUnits, 0);
    const totalSecondLevelPeople = block4List.reduce((sum, item) => sum + item.secondLevelPeople, 0);

    return {
      totalFirstLevelUnits,
      totalFirstLevelPeople,
      totalSecondLevelUnits,
      totalSecondLevelPeople,
    };
  };

  return (
    <div className="white_branch_office_right_container">
      <div className="block1">
        <Title title="应急值班" />
        <div className="container">
          <div className="info">
            <span>带班领导：李玉龙</span>
            <span>职务：安环部副部长</span>
            <span>电话：3095519</span>
          </div>
          <div className="table">
            <div className="tr">
              <div className="th">部门名称</div>
              <div className="th">职务</div>
              <div className="th">姓名</div>
              <div className="th">电话</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block1List} step={0.5}>
                {block1List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.department}</div>
                    <div className="td">{item.position}</div>
                    <div className="td">{item.name}</div>
                    <div className="td">{item.phone}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="封闭区域统计" />
        <div className="container">
          <div className="img">
            <img src={img1} alt="" />
          </div>
          <div>
            <div className="title">封闭区域数/人数</div>
            <div className="info">
              <div>
                <span className="label">红：</span>
                <span className="value" style={{ color: "#FF0000" }}>5/30</span>
              </div>
              <div>
                <span className="label">橙：</span>
                <span className="value" style={{ color: "#FC5B4A" }}>5/30</span>
              </div>
              <div>
                <span className="label">黄：</span>
                <span className="value" style={{ color: "#F98011" }}>5/30</span>
              </div>
              <div>
                <span className="label">蓝：</span>
                <span className="value" style={{ color: "#347FD3" }}>5/30</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="block3">
        <Title title="重点作业" />
        <div className="container">
          <div className="items">
            <div className="item" style={{ backgroundImage: `url(${bg1})` }}>
              <div className="title">
                重点作业
                <br />
                情况统计
              </div>
              <div className="info" style={{ color: "#347FD3" }}>
                <div>
                  <div className="label">单项发包作业</div>
                  <div className="value">123</div>
                </div>
                <div>
                  <div className="label">危险作业</div>
                  <div className="value">123</div>
                </div>
                <div>
                  <div className="label">三人及以上作业</div>
                  <div className="value">123</div>
                </div>
                <div>
                  <div className="label">四新作业</div>
                  <div className="value">123</div>
                </div>
              </div>
            </div>
            <div className="item" style={{ backgroundImage: `url(${bg2})` }}>
              <div className="title">
                聚集场所
                <br />
                情况统计
              </div>
              <div className="info" style={{ color: "#FF9000" }}>
                <div>
                  <div className="label">聚集场所数</div>
                  <div className="value">123</div>
                </div>
                <div>
                  <div className="label">聚集场所检查数</div>
                  <div className="value">123</div>
                </div>
                <div>
                  <div className="label">检查率</div>
                  <div className="value">100%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="block4">
        <Title title="相关方单位情况统计" />
        <div className="container">
          <div className="table">
            <div className="tr">
              <div className="th">类型</div>
              <div className="th">一级单位数</div>
              <div className="th">一级人数</div>
              <div className="th">二级单位数</div>
              <div className="th">二级人数</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block4List} step={0.5}>
                {block4List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.type}</div>
                    <div className="td">{item.firstLevelUnits}</div>
                    <div className="td">{item.firstLevelPeople}</div>
                    <div className="td">{item.secondLevelUnits}</div>
                    <div className="td">{item.secondLevelPeople}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
            <div className="summary">
              {(() => {
                const summaryData = calculateSummary();
                return (
                  <div className="tr summary-row">
                    <div className="td"><strong>总计</strong></div>
                    <div className="td"><strong>{summaryData.totalFirstLevelUnits}</strong></div>
                    <div className="td"><strong>{summaryData.totalFirstLevelPeople}</strong></div>
                    <div className="td"><strong>{summaryData.totalSecondLevelUnits}</strong></div>
                    <div className="td"><strong>{summaryData.totalSecondLevelPeople}</strong></div>
                  </div>
                );
              })()}
            </div>
          </div>
        </div>
      </div>
      <div className="block5">
        <Title title="相关方处罚统计表" />
        <div className="container">
          <div className="table">
            <div className="tr">
              <div className="th">相关方公司名称</div>
              <div className="th">项目数</div>
              <div className="th">处罚次数</div>
              <div className="th">处罚金额</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block5List} step={0.5}>
                {block5List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.companyName}</div>
                    <div className="td">{item.projectCount}</div>
                    <div className="td">{item.penaltyCount}</div>
                    <div className="td">{item.penaltyAmount}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RightPanel;