import { useMount } from "ahooks";
import { useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1, initEcharts2 } from "./echarts";
import "./index.less";

function RenYuan() {
  const chart1Instance = useRef(null);
  const main1Ref = useRef(null);
  const chart2Instance = useRef(null);
  const main2Ref = useRef(null);

  const [block3List, setBlock3List] = useState([
    { name: "张三", area: "A区", onlineStatus: 1 },
    { name: "李四", area: "B区", onlineStatus: 1 },
    { name: "王五", area: "C区", onlineStatus: 2 },
    { name: "赵六", area: "D区", onlineStatus: 1 },
    { name: "钱七", area: "E区", onlineStatus: 1 },
    { name: "孙八", area: "F区", onlineStatus: 2 },
    { name: "周九", area: "G区", onlineStatus: 1 },
    { name: "吴十", area: "H区", onlineStatus: 1 },
    { name: "郑一", area: "I区", onlineStatus: 2 },
    { name: "王二", area: "J区", onlineStatus: 1 },
  ]);
  const [block4List, setBlock4List] = useState([
    { alarmContent: "SOS紧急告警", personnelInvolved: "张三", dispositionStatus: 1 },
    { alarmContent: "静止/滞留告警", personnelInvolved: "李四", dispositionStatus: 2 },
    { alarmContent: "电子围栏越界", personnelInvolved: "王五", dispositionStatus: 1 },
    { alarmContent: "非授权区域停留", personnelInvolved: "赵六", dispositionStatus: 3 },
    { alarmContent: "设备及信号类告警", personnelInvolved: "钱七", dispositionStatus: 1 },
    { alarmContent: "聚集告警", personnelInvolved: "孙八", dispositionStatus: 2 },
    { alarmContent: "单独作业告警", personnelInvolved: "周九", dispositionStatus: 1 },
    { alarmContent: "超员/缺员告警", personnelInvolved: "吴十", dispositionStatus: 3 },
    { alarmContent: "SOS紧急告警", personnelInvolved: "郑一", dispositionStatus: 1 },
    { alarmContent: "静止/滞留告警", personnelInvolved: "王二", dispositionStatus: 2 },
  ]);

  useMount(() => {
    initEcharts1(main1Ref, chart1Instance, [
      { name: "SOS紧急告警", value: "120" },
      { name: "静止/滞留告警", value: "10" },
      { name: "电子围栏越界", value: "10" },
      { name: "非授权区域停留", value: "20" },
      { name: "设备及信号类告警", value: "30" },
      { name: "聚集告警", value: "40" },
      { name: "单独作业告警", value: "50" },
      { name: "超员/缺员告警", value: "60" },
      { name: "已处置报警数/报警数", value: "10" },
    ]);
    initEcharts2(main2Ref, chart2Instance, [
      { name: "A区", unitPersonnelCount: 120, relatedPartyPersonnelCount: 85 },
      { name: "B区", unitPersonnelCount: 95, relatedPartyPersonnelCount: 70 },
      { name: "C区", unitPersonnelCount: 80, relatedPartyPersonnelCount: 60 },
      { name: "D区", unitPersonnelCount: 150, relatedPartyPersonnelCount: 110 },
      { name: "E区", unitPersonnelCount: 75, relatedPartyPersonnelCount: 55 },
      { name: "F区", unitPersonnelCount: 110, relatedPartyPersonnelCount: 80 },
      { name: "G区", unitPersonnelCount: 65, relatedPartyPersonnelCount: 45 },
      { name: "H区", unitPersonnelCount: 140, relatedPartyPersonnelCount: 100 },
      { name: "I区", unitPersonnelCount: 90, relatedPartyPersonnelCount: 65 },
      { name: "J区", unitPersonnelCount: 125, relatedPartyPersonnelCount: 90 },
    ]);

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

  return (
    <div className="branch_office_renyuan">
      <div className="block1">
        <Title title="报警类型" />
        <div className="options">
          <div ref={main1Ref} style={{ width: "100%", height: "250px" }} />
        </div>
      </div>
      <div className="block2">
        <Title title="封闭区域人员统计情况" />
        <div className="options">
          <div ref={main2Ref} 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>
            <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.area}</div>
                    <div className="td" style={{ color: item.onlineStatus === 1 ? "#1DB924" : "#fff" }}>{item.onlineStatus === 1 ? "在线" : "离线"}</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>
            <div className="scroll">
              <SeamlessScroll list={block4List} step={0.5}>
                {block4List.map((item, index) => (
                  <div key={index} className="tr">
                    <div className="td">{item.alarmContent}</div>
                    <div className="td">{item.personnelInvolved}</div>
                    <div className="td" style={{ color: item.dispositionStatus === 1 ? "#1DB924" : item.dispositionStatus === 2 ? "#FF611C" : "#258FF1" }}>
                      {item.dispositionStatus === 1 ? "已处置" : item.dispositionStatus === 2 ? "未处置" : "处置中"}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RenYuan;
