import { useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg1 from "~/assets/images/map_bi/content/bg9.png";
import bg2 from "~/assets/images/map_bi/content/bg10.png";
import icon1 from "~/assets/images/map_bi/content/ico4.png";
import icon2 from "~/assets/images/map_bi/content/ico5.png";
import icon3 from "~/assets/images/map_bi/content/ico6.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import "./index.less";

function WeiXian() {
  const [block1List, setBlock1List] = useState([
    { title: "四新作业", count1: 123, count2: 123, icon: icon1 },
    { title: "危险作业", count1: 123, count2: 123, icon: icon2 },
    { title: "三人及以上作业", count1: 123, count2: 123, icon: icon3 },
  ]);
  const [block2List, setBlock2List] = useState([
    { title: "四新<br/>作业", count1: 123, count2: 123, count3: 123 },
    { title: "危险<br/>作业", count1: 123, count2: 123, count3: 123 },
    { title: "三人及<br/>以上作业", count1: 123, count2: 123, count3: 123 },
  ]);
  const [block3List, setBlock3List] = useState([
    { department: "技术部", newWork: 15, dangerousWork: 22, threeOrMoreWork: 18 },
    { department: "生产部", newWork: 12, dangerousWork: 28, threeOrMoreWork: 25 },
    { department: "安全部", newWork: 8, dangerousWork: 35, threeOrMoreWork: 12 },
    { department: "质检部", newWork: 10, dangerousWork: 15, threeOrMoreWork: 20 },
    { department: "设备部", newWork: 18, dangerousWork: 30, threeOrMoreWork: 22 },
    { department: "维修部", newWork: 14, dangerousWork: 25, threeOrMoreWork: 16 },
    { department: "仓储部", newWork: 6, dangerousWork: 12, threeOrMoreWork: 14 },
    { department: "物流部", newWork: 9, dangerousWork: 18, threeOrMoreWork: 19 },
    { department: "人事部", newWork: 3, dangerousWork: 5, threeOrMoreWork: 8 },
    { department: "财务部", newWork: 2, dangerousWork: 3, threeOrMoreWork: 5 },
  ]);
  const [block4List, setBlock4List] = useState([
    { dangerousWorkCategory: "高空作业", workCount: 25, workStatusCount: 18, personnelCount: 45 },
    { dangerousWorkCategory: "动火作业", workCount: 32, workStatusCount: 28, personnelCount: 68 },
    { dangerousWorkCategory: "受限空间作业", workCount: 18, workStatusCount: 15, personnelCount: 32 },
    { dangerousWorkCategory: "临时用电作业", workCount: 42, workStatusCount: 38, personnelCount: 56 },
    { dangerousWorkCategory: "吊装作业", workCount: 21, workStatusCount: 19, personnelCount: 35 },
    { dangerousWorkCategory: "挖掘作业", workCount: 15, workStatusCount: 12, personnelCount: 28 },
    { dangerousWorkCategory: "爆破作业", workCount: 8, workStatusCount: 6, personnelCount: 18 },
    { dangerousWorkCategory: "带压作业", workCount: 12, workStatusCount: 10, personnelCount: 22 },
    { dangerousWorkCategory: "断路作业", workCount: 9, workStatusCount: 7, personnelCount: 15 },
    { dangerousWorkCategory: "其他危险作业", workCount: 16, workStatusCount: 14, personnelCount: 26 },
  ]);

  return (
    <div className="branch_office_weixian">
      <div className="block1">
        <Title title="重点作业统计" />
        <div className="options">
          <div className="items">
            {block1List.map((item, index) => (
              <div className="item" key={index}>
                <div className="title">{item.title}</div>
                <div className="img">
                  <img src={item.icon} alt="" />
                </div>
                <div className="info">
                  <span>当前作业数：</span>
                  <CountUp end={+item.count1}></CountUp>
                </div>
                <div className="info">
                  <span>申请数：</span>
                  <CountUp end={+item.count2}></CountUp>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="重点作业" />
        <div className="options">
          <div className="items">
            {
              block2List.map((item, index) => (
                <div className="item" key={index} style={{ backgroundImage: `url(${index % 2 === 0 ? bg1 : bg2})` }}>
                  <div className="title" dangerouslySetInnerHTML={{ __html: item.title }} />
                  <div className="info">
                    <div>
                      <div className="label">当前作业数</div>
                      <div className="value">
                        <CountUp end={+item.count1}></CountUp>
                      </div>
                    </div>
                    <div>
                      <div className="label">作业中</div>
                      <div className="value">
                        <CountUp end={+item.count2}></CountUp>
                      </div>
                    </div>
                    <div>
                      <div className="label">已归档</div>
                      <div className="value">
                        <CountUp end={+item.count3}></CountUp>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className="block3">
        <Title title="部门作业统计" />
        <div className="options">
          <div className="table">
            <div className="tr">
              <div className="td">部门名称</div>
              <div className="td">四新作业</div>
              <div className="td">危险作业</div>
              <div className="td">三人以上作业数</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.newWork}</div>
                    <div className="td">{item.dangerousWork}</div>
                    <div className="td">{item.threeOrMoreWork}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
      <div className="block4">
        <Title title="危险作业数据统计" />
        <div className="options">
          <div className="table">
            <div className="tr">
              <div className="td">危险作业类别</div>
              <div className="td">作业数</div>
              <div className="td">作业状态数</div>
              <div className="td">参与人员数</div>
            </div>
            <div className="scroll">
              <SeamlessScroll list={block4List} step={0.5}>
                {block4List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.dangerousWorkCategory}</div>
                    <div className="td">{item.workCount}</div>
                    <div className="td">{item.workStatusCount}</div>
                    <div className="td">{item.personnelCount}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default WeiXian;
