import { useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img4 from "~/assets/images/public/white/img4.png";
import img5 from "~/assets/images/public/white/img5.png";
import img6 from "~/assets/images/public/white/img6.png";
import Title from "~/pages/Container/White/BranchOffice/components/Title";
import "./index.less";

function LeftPanel() {
  const [block1List, setBlock1List] = useState([
    { title: "企业人员", label1: "部门数", value1: 35, label2: "人数", value2: 123, img: img4 },
    { title: "一级相关方", label1: "单位数", value1: 35, label2: "人数", value2: 123, img: img5 },
    { title: "二级相关方", label1: "单位数", value1: 35, label2: "人数", value2: 123, img: img6 },
  ]);
  const [block2List, setBlock2List] = useState([
    { id: 1, department: "安全部", deathCount: 0, seriousInjuryCount: 2, minorInjuryCount: 8, loss: 45 },
    { id: 2, department: "生产部", deathCount: 1, seriousInjuryCount: 1, minorInjuryCount: 5, loss: 75 },
    { id: 3, department: "质检部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 3, loss: 20 },
    { id: 4, department: "物流部", deathCount: 0, seriousInjuryCount: 1, minorInjuryCount: 6, loss: 55 },
    { id: 5, department: "技术部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 2, loss: 15 },
    { id: 6, department: "销售部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 1, loss: 10 },
    { id: 7, department: "财务部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 0, loss: 5 },
    { id: 8, department: "人事部", deathCount: 0, seriousInjuryCount: 0, minorInjuryCount: 1, loss: 8 },
    { id: 9, department: "工程部", deathCount: 1, seriousInjuryCount: 2, minorInjuryCount: 7, loss: 85 },
    { id: 10, department: "设备部", deathCount: 0, seriousInjuryCount: 1, minorInjuryCount: 4, loss: 35 },
  ]);
  const [block3List, setBlock3List] = useState([
    { id: 1, department: "安全部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 95 },
    { id: 2, department: "生产部", checkSituation: "已落实", taskFeedback: "进行中", dutyImplementation: "部分执行", score: 82 },
    { id: 3, department: "质检部", checkSituation: "待检查", taskFeedback: "已完成", dutyImplementation: "已执行", score: 88 },
    { id: 4, department: "物流部", checkSituation: "已落实", taskFeedback: "未开始", dutyImplementation: "未执行", score: 75 },
    { id: 5, department: "技术部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 92 },
    { id: 6, department: "销售部", checkSituation: "待检查", taskFeedback: "进行中", dutyImplementation: "部分执行", score: 78 },
    { id: 7, department: "财务部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 90 },
    { id: 8, department: "人事部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 86 },
    { id: 9, department: "工程部", checkSituation: "待检查", taskFeedback: "未开始", dutyImplementation: "未执行", score: 70 },
    { id: 10, department: "设备部", checkSituation: "已落实", taskFeedback: "已完成", dutyImplementation: "已执行", score: 84 },
  ]);

  return (
    <div className="white_branch_office_left_container">
      <div className="block1">
        <Title title="企业人员信息情况" />
        <div className="container">
          <div className="items">
            {
              block1List.map((item, index) => (
                <div key={index} className="item">
                  <div className="img">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="title">{item.title}</div>
                  <div className="info">
                    <div className="label">{`${item.label1}：`}</div>
                    <div className="value">{item.value1}</div>
                  </div>
                  <div className="info">
                    <div className="label">{`${item.label2}：`}</div>
                    <div className="value">{item.value2}</div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className="block2">
        <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">
                直接经济损失
                <br />
                <span className="tip">(20-100万元事故)</span>
              </div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block2List} step={0.5}>
                {block2List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.department}</div>
                    <div className="td">{item.deathCount}</div>
                    <div className="td">{item.seriousInjuryCount}</div>
                    <div className="td">{item.minorInjuryCount}</div>
                    <div className="td">{item.loss}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block3">
        <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={block3List} step={0.5}>
                {block3List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.department}</div>
                    <div className="td">{item.checkSituation}</div>
                    <div className="td">{item.taskFeedback}</div>
                    <div className="td">{item.dutyImplementation}</div>
                    <div className="td">{item.score}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LeftPanel;
