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

function MiddlePanel() {
  const [block1List, setBlock1List] = useState([
    { name: "综合应急预案", num: "13" },
    { name: "现场处置方案", num: "75" },
    { name: "应急应对措施", num: "58" },
    { name: "应急救援队伍", num: "3" },
  ]);
  const [block2List, setBlock2List] = useState([
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
    { unitName: "二公司", name: "王岩", duties: "公司经理", phone: "3095311" },
  ]);
  const [block3List, setBlock3List] = useState([
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
    { unitName: "二公司", state: "未处置", preventiveMeasures: "远离大树、电线杆..." },
  ]);
  const [block4List, setBlock4List] = useState([
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
    { unitName: "二公司", safetySupervisionDepartment: "4", technicalDepartment: "3", engineeringDepartment: "2", businessDepartment: "1", accident: "0", humanResourcesDepartment: "0", score: "0" },
  ]);
  const [block5List, setBlock5List] = useState([
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
    { unitName: "二公司", scores: "96" },
  ]);
  const [block6List, setBlock6List] = useState([
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
    { domainName: "设备", scores: "96" },
  ]);
  const [block7List, setBlock7List] = useState([
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
    { Name: "王丹", scores: "96" },
  ]);

  return (
    <div className="white_share_middle">
      <div className="block1">
        <Title title="应急管理" />
        <div className="block1_content">
          <div className="block1_content_con">
            <div className="emergency_left">
              <div className="top">
                {
                  block1List.map((item, index) => (
                    <div key={index} className="item">
                      <p className="name">{item.name}</p>
                      <div className="num">{item.num}</div>
                    </div>
                  ))
                }
              </div>
              <div className="emergency_left_main">
                <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={block2List} step={0.5}>
                      {block2List.map((item, index) => (
                        <div key={index} className="tr">
                          <div className="td">{item.unitName}</div>
                          <div className="td">{item.name}</div>
                          <div className="td">{item.duties}</div>
                          <div className="td">{item.phone}</div>
                        </div>
                      ))}
                    </SeamlessScroll>
                  </div>
                </div>
              </div>
            </div>

            <div className="emergency_right">
              <div className="weather">
                <div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div>
                <div className="weather_main">
                  <div className="item">
                    <img src={weather} alt="" />
                    晴
                  </div>
                  <div className="item">
                    <div>温度</div>
                    <div className="num">25℃</div>
                  </div>
                  <div className="item">
                    <div>风速：</div>
                    <div className="num">16米8级</div>
                  </div>
                </div>
                <div className="weather_bottom">
                  <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.unitName}</div>
                            <div className="td fcb">{item.state}</div>
                            <div className="td">{item.preventiveMeasures}</div>
                          </div>
                        ))}
                      </SeamlessScroll>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="block1_content_bottem">
            <div className="top">
              <div className="title">
                <img src={img1} alt="" />
                分子公司安全考评
              </div>
              <div className="block1_content_bottem_tab">
                <div className="item active">年度</div>
                <div className="item">季度</div>
              </div>
            </div>
            <div className="block1_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 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.unitName}</div>
                        <div className="td">{item.safetySupervisionDepartment}</div>
                        <div className="td">{item.technicalDepartment}</div>
                        <div className="td">{item.engineeringDepartment}</div>
                        <div className="td">{item.businessDepartment}</div>
                        <div className="td">{item.accident}</div>
                        <div className="td">{item.humanResourcesDepartment}</div>
                        <div className="td">{item.score}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="履职尽责" />
        <div className="block2_content">
          <div className="item">
            <div className="title">分子公司排名</div>
            <div className="block2_content_con">
              <div className="table">
                <div className="tr">
                  <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.unitName}</div>
                        <div className="td">{item.scores}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="title">领域排名</div>
            <div className="block2_content_con">
              <div className="table">
                <div className="tr">
                  <div className="th">领域名称</div>
                  <div className="th">分数</div>
                </div>
                <div className="scroll">
                  <SeamlessScroll list={block6List} step={0.5}>
                    {block6List.map((item, index) => (
                      <div key={index} className="tr">
                        <div className="td">{item.domainName}</div>
                        <div className="td">{item.scores}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
          </div>
          <div className="item">
            <div className="title">人员排名</div>
            <div className="block2_content_con">
              <div className="table">
                <div className="tr">
                  <div className="th">姓名</div>
                  <div className="th">分数</div>
                </div>
                <div className="scroll">
                  <SeamlessScroll list={block7List} step={0.5}>
                    {block7List.map((item, index) => (
                      <div key={index} className="tr">
                        <div className="td">{item.Name}</div>
                        <div className="td">{item.scores}</div>
                      </div>
                    ))}
                  </SeamlessScroll>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  );
}

export default MiddlePanel;
