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

function LeftPanel() {
  const [block1List, setBlock1List] = useState([
    { name: "隐患总数", num: "1398" },
    { name: "隐患整改数", num: "1212" },
    { name: "隐患未整改数", num: "563" },
    { name: "隐患整改率", num: "89%" },
  ]);
  const [block2List, setBlock2List] = useState([
    { name: "隐患总数", num: "1398" },
    { name: "隐患整改数", num: "1212" },
    { name: "隐患未整改数", num: "563" },
    { name: "隐患整改率", num: "89%" },
  ]);
  const [block3List, setBlock3List] = useState([
    { id: 1, level: "二级", name: "东区一号罐", state: "正常" },
    { id: 2, level: "二级", name: "东区一号罐", state: "正常" },
    { id: 3, level: "二级", name: "东区一号罐", state: "正常" },
    { id: 4, level: "二级", name: "东区一号罐", state: "正常" },
    { id: 5, level: "二级", name: "东区一号罐", state: "正常" },
    { id: 6, level: "二级", name: "东区一号罐", state: "正常" },
  ]);
  const [block4List, setBlock4List] = useState([
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
    { name: "一级", total: "1398", rectificationNumber: "56", unNumber: "56", rectificationRate: "89%" },
  ]);

  return (
    <div className="white_share_left">
      <div className="block1">
        <Title title="风险辨识管控情况" />
        <div className="white_share_left_conten">
          <div className="cake">
            <img src={cake} alt="" />
          </div>
          <div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
            <div className="item">
              <div className="title">重大风险</div>
              <div className="num fcr">467</div>
            </div>
            <div className="item">
              <div className="title">较大风险</div>
              <div className="num fco">467</div>
            </div>
            <div className="item">
              <div className="title">一般风险</div>
              <div className="num fcc">467</div>
            </div>
            <div className="item">
              <div className="title">低风险</div>
              <div className="num fcb">98091</div>
            </div>
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="重大危险源安全情况" />
        <div className="white_share_left_conten">
          <div className="top">
            <div className="item">
              <div className="title">二级重大危险源（1个）</div>
              <div className="item_container">
                <span>
                  储罐数:
                  <span className="fcb">3</span>
                </span>
                <span>
                  在用数:
                  <span className="fcg">3</span>
                </span>
                <span>
                  停用数:
                  <span className="fcr">0</span>
                </span>
              </div>
            </div>
            <div className="item">
              <div className="title">三级重大危险源（2个）</div>
              <div className="item_container">
                <span>
                  储罐数:
                  <span className="fcb">10</span>
                </span>
                <span>
                  在用数:
                  <span className="fcg">10</span>
                </span>
                <span>
                  停用数:
                  <span className="fcr">0</span>
                </span>
              </div>
            </div>
          </div>
          <div className="container">
            <div className="left_table">
              <div className="table">
                <div className="tr">
                  <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.level}</div>
                        <div className="td">{item.name}</div>
                        <div className="td">{item.state}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
            <div className="info">
              <div className="title">
                <img src={img1} alt="" />
                东区二号罐液位过低
              </div>
              <div className="comment">
                <p>
                  温度待处置数/报警个数：
                  <span>0/0</span>
                </p>
                <p>
                  压力待处置数/报警个数：
                  <span>0/0</span>
                </p>
                <p>
                  液位待处置数/报警个数：
                  <span>
                    <span className="fcr">1</span>
                    /1
                  </span>
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
      <div className="block3">
        <Title title="隐患排查治理情况" />
        <div className="white_share_left_conten">
          <div className="top">
            <div className="item">
              <div className="content">
                <div className="title">
                  股份
                  <br />
                  公司
                </div>
                <div className="info">
                  {
                    block1List.map((item, index) => (
                      <div key={index} className="list">
                        <div className="name">{item.name}</div>
                        <div className="num">{item.num}</div>
                      </div>
                    ))
                  }
                </div>
              </div>
            </div>
            <div className="item">
              <div className="content">
                <div className="title">
                  分子
                  <br />
                  公司
                </div>
                <div className="info">
                  {
                    block2List.map((item, index) => (
                      <div key={index} className="list">
                        <div className="name">{item.name}</div>
                        <div className="num">{item.num}</div>
                      </div>
                    ))
                  }
                </div>
              </div>
            </div>
          </div>
          <div className="field">
            <div className="top">领域隐患</div>
          </div>
          <div className="main">
            <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.name}</div>
                      <div className="td">{item.total}</div>
                      <div className="td">{item.rectificationNumber}</div>
                      <div className="td">{item.unNumber}</div>
                      <div className="td">{item.rectificationRate}</div>
                    </div>
                  ))}
                </SeamlessScroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default LeftPanel;
