import { useMount } from "ahooks";
import { useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import bg4 from "~/assets/images/map_bi/content/bg4.png";
import bg5 from "~/assets/images/map_bi/content/bg5.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";

function IndexRight() {
  const [block1List, setBlock1List] = useState([
    { title: "口门进出统计", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
    { title: "进入申请待审批", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
    { title: "封闭区域人员情况", label1: "区域数", label2: "人数", count1: 123, count2: 123, bgImg: bg5 },
    { title: "封闭区域作业情况", label1: "区域数", label2: "作业数", count1: 123, count2: 123, bgImg: bg5 },
  ]);
  const [block3List, setBlock3List] = useState([
    { name: "A区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:00:00", status: "1" },
    { name: "B区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:05:00", status: "2" },
    { name: "C区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:10:00", status: "1" },
    { name: "D区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:15:00", status: "2" },
    { name: "E区", requiredDevices: "视频遮挡", anchoredDevices: "2024-01-01 10:20:00", status: "1" },
    { name: "F区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:25:00", status: "2" },
    { name: "G区", requiredDevices: "紧急按钮", anchoredDevices: "2024-01-01 10:30:00", status: "1" },
    { name: "H区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:35:00", status: "2" },
    { name: "I区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:40:00", status: "1" },
    { name: "J区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:45:00", status: "2" },
  ]);
  const [block4List, setBlock4List] = useState([
    { department: "技术部", threeOrMoreWork: 12, dangerousWork: 8, newWork: 5 },
    { department: "生产部", threeOrMoreWork: 15, dangerousWork: 10, newWork: 3 },
    { department: "安全部", threeOrMoreWork: 5, dangerousWork: 12, newWork: 2 },
    { department: "质检部", threeOrMoreWork: 8, dangerousWork: 6, newWork: 4 },
    { department: "设备部", threeOrMoreWork: 10, dangerousWork: 15, newWork: 7 },
    { department: "维修部", threeOrMoreWork: 18, dangerousWork: 9, newWork: 6 },
    { department: "仓储部", threeOrMoreWork: 7, dangerousWork: 5, newWork: 3 },
    { department: "物流部", threeOrMoreWork: 9, dangerousWork: 4, newWork: 2 },
    { department: "人事部", threeOrMoreWork: 3, dangerousWork: 2, newWork: 1 },
    { department: "财务部", threeOrMoreWork: 2, dangerousWork: 1, newWork: 0 },
  ]);

  const chartInstance = useRef(null);
  const main1Ref = useRef(null);

  useMount(() => {
    initEcharts1(main1Ref, chartInstance, [
      { name: "技术部1", unitCount: 95, personnelCount: 92 },
      { name: "技术部2", unitCount: 95, personnelCount: 92 },
      { name: "技术部3", unitCount: 95, personnelCount: 92 },
      { name: "技术部4", unitCount: 95, personnelCount: 92 },
      { name: "技术部5", unitCount: 95, personnelCount: 92 },
      { name: "技术部6", unitCount: 95, personnelCount: 92 },
      { name: "技术部7", unitCount: 95, personnelCount: 92 },
      { name: "技术部8", unitCount: 95, personnelCount: 92 },
      { name: "技术部9", unitCount: 95, personnelCount: 92 },
      { name: "技术部0", unitCount: 95, personnelCount: 92 },
    ]);

    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
        chartInstance.current = null;
      }
    };
  });

  return (
    <div className="branch_office_index_right">
      <div className="block1">
        <Title title="口门及封闭区域" />
        <div className="options">
          <div className="items">
            {
              block1List.map((item, index) => (
                <div className="item" key={index} style={{ backgroundImage: `url(${item.bgImg})` }}>
                  <div className="title">{item.title}</div>
                  <div className="info">
                    <div>
                      {item.label1}
                      ：
                      {item.count1}
                    </div>
                    <div>
                      {item.label2}
                      ：
                      {item.count2}
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className="block2">
        <Title title="封闭区域人员状态" />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
        </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.name}</div>
                    <div className="td">{item.requiredDevices}</div>
                    <div className="td">{item.anchoredDevices}</div>
                    <div className="td" style={{ color: item.status === "1" ? "#f18308" : "#60b321" }}>
                      {item.status === "1" && "待处置"}
                      {item.status === "2" && "已处置"}
                    </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.department}</div>
                    <div className="td">{item.threeOrMoreWork}</div>
                    <div className="td">{item.dangerousWork}</div>
                    <div className="td">{item.newWork}</div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default IndexRight;
