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/White/BranchOffice/components/Title";
import "./index.less";

function RightPanel() {
  const [block1List, setBlock1List] = useState([
    { name: "封闭区域公司数", num: "13" },
    { name: "封闭区域数", num: "75" },
    { name: "封闭区域当前人数", num: "58" },
  ]);
  const [block2List, setBlock2List] = useState([
    { type: "生产类", numberOfUnits: "23", number: "33" },
    { type: "工程类", numberOfUnits: "21", number: "22" },
    { type: "劳务类", numberOfUnits: "2", number: "11" },
    { type: "卫生环保类", numberOfUnits: "22", number: "454" },
    { type: "物资管理类", numberOfUnits: "33", number: "65" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
    { type: "其他", numberOfUnits: "44", number: "43" },
  ]);
  const [block3List, setBlock3List] = useState([
    { unitName: "生产类", numberOfItems: "23", number: "33", amount: "5698" },
    { unitName: "生产类", numberOfItems: "23", number: "33", amount: "5698" },
    { unitName: "生产类", numberOfItems: "23", number: "33", amount: "5698" },
    { unitName: "生产类", numberOfItems: "23", number: "33", amount: "5698" },
  ]);

  return (
    <div className="white_share_right">
      <div className="block1">
        <Title title="四色四固定" extra="更多>" />
        <div className="white_share_right_block1_content">
          {
            block1List.map((item, index) => (
              <div key={index} className="item">
                <img src={img1} alt="" />
                <div className="info">
                  <div className="name">{item.name}</div>
                  <div className="num">{item.num}</div>
                </div>
              </div>
            ))
          }
        </div>
      </div>
      <div className="block2">
        <Title title="封闭区域重点作业" extra="更多>" />
        <div className="block2_content">
          <div className="item" style={{ backgroundImage: `url(${bg1})` }}>
            <div className="title">
              重点作业
              <br />
              情况统计
            </div>
            <div className="content">
              <div className="wrap">
                <div className="name">单项发包作业</div>
                <div className="num">56</div>
              </div>
              <div className="wrap">
                <div className="name">危险作业</div>
                <div className="num">56</div>
              </div>
              <div className="wrap">
                <div className="name">三人及以上作业</div>
                <div className="num">56</div>
              </div>
              <div className="wrap">
                <div className="name">四新作业</div>
                <div className="num">56</div>
              </div>
            </div>
          </div>
          <div className="item" style={{ backgroundImage: `url(${bg2})` }}>
            <div className="title">
              聚集场所
              <br />
              情况统计
            </div>
            <div className="content">
              <div className="wrap">
                <div className="name">聚集场所数</div>
                <div className="num fc9">56</div>
              </div>
              <div className="wrap">
                <div className="name">聚集场所检查数</div>
                <div className="num fc9">56</div>
              </div>
              <div className="wrap">
                <div className="name">检查率</div>
                <div className="num fc9">56</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="block3">
        <Title title="相关方单位情况统计" extra="更多>" />
        <div className="block3_content">
          <div className="item">
            <div className="title">一级相关方</div>
            <div className="content_main">
              <div className="table">
                <div className="tr">
                  <div className="th">类型</div>
                  <div className="th">单位数</div>
                  <div className="th">人数</div>
                </div>
                <div className="scroll">
                  <SeamlessScroll list={block2List} step={0.5}>
                    {block2List.map((item, index) => (
                      <div key={index} className="tr">
                        <div className="td">{item.type}</div>
                        <div className="td">{item.numberOfUnits}</div>
                        <div className="td">{item.number}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
                <div className="tr fch">
                  <div className="td">统计</div>
                  <div className="td">43</div>
                  <div className="td">345</div>
                </div>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="title">二级相关方</div>
            <div className="content_main">
              <div className="table">
                <div className="tr">
                  <div className="th">类型</div>
                  <div className="th">单位数</div>
                  <div className="th">人数</div>
                </div>
                <div className="scroll">
                  <SeamlessScroll list={block2List} step={0.5}>
                    {block2List.map((item, index) => (
                      <div key={index} className="tr">
                        <div className="td">{item.type}</div>
                        <div className="td">{item.numberOfUnits}</div>
                        <div className="td">{item.number}</div>

                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
                <div className="tr fch">
                  <div className="td">统计</div>
                  <div className="td">43</div>
                  <div className="td">345</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="block4">
        <Title title="相关方处罚统计表" extra="更多>" />
        <div className="block4_content">
          <div className="block4_content_con">
            <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="scroll1">
                <SeamlessScroll list={block3List} step={0.5}>
                  {block3List.map((item, index) => (
                    <div key={index} className="tr">
                      <div className="td">{item.unitName}</div>
                      <div className="td">{item.number}</div>
                      <div className="td">{item.numberOfItems}</div>
                      <div className="td">{item.amount}</div>
                    </div>
                  ))}
                </SeamlessScroll>
              </div>
              <div className="tr fch">
                <div className="td">统计</div>
                <div className="td">43</div>
                <div className="td">33</div>
                <div className="td">345</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RightPanel;
