import { useInterval } from "ahooks";
import { useContext, useEffect, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img2 from "~/assets/images/map_bi/content/img2.png";
import img2icon1 from "~/assets/images/map_bi/content/img2icon1.png";
import img2icon2 from "~/assets/images/map_bi/content/img2icon2.png";
import qixiang_icon1 from "~/assets/images/map_bi/content/qixiang_icon1.png";
import qixiang_icon2 from "~/assets/images/map_bi/content/qixiang_icon2.png";
import qixiang_icon3 from "~/assets/images/map_bi/content/qixiang_icon3.png";
import qixiang_icon4 from "~/assets/images/map_bi/content/qixiang_icon4.png";
import qixiang_img1 from "~/assets/images/map_bi/content/qixiang_img1.png";
import navTitleOn from "~/assets/images/map_bi/content/title.png";
import navTitle from "~/assets/images/map_bi/content/title_on.png";
import Title from "~/pages/Container/Map/components/Content/port/Title";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const block3OptionsNavList = ["传感器数据列表", "报警信息列表"];
const QiXiang = () => {
  const { currentPort, area, currentBranchOffice } = useContext(Context);
  const [block1OptionsList, setBlock1OptionsList] = useState([
    { title: "风速监测", img: qixiang_icon1, count: "-" },
    { title: "温度监测", img: qixiang_icon2, count: "-" },
    { title: "风向监测", img: qixiang_icon3, count: "-" },
    { title: "监测数据来源", img: qixiang_icon4, count: "-" },
  ]);

  const [block2OptionsList, setBlock2OptionsList] = useState([
    { title: "监测站数", img: img2icon1, onlineCount: "0", offlineCount: "0" },
    { title: "报警数", img: img2icon2, onlineCount: 0, offlineCount: 0 },
  ]);
  const [block3Index, setBlock3Index] = useState(0);
  const [block3List, setBlock3List] = useState([
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "151新港湾集装箱码头装船机测试", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "137", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-S10", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "155-六公司R2取料机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司A1Z", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: " 二公司B2D", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-SS2#变楼顶", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "101-六公司3号装船机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "133-七公司R5-2", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-R112", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "106-六公司ST2堆料机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-中控楼顶", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "110-六公司4号取料机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "122", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "181-七公司PR4", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "气象站", NAME: "九公司气象站-除尘部办公楼顶", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "118-七公司S7", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "119-杂货804门机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-SL12", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-T8", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "135-杂货一队422门机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司A6Q", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "二公司B3D", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "147-杂货517门机", isshow: "1" },
    { EQUIPMENTTYPE_NAME: "风速站", NAME: "九公司风速站-S11", isshow: "1" },
  ]);

  const [isPending, setIsPending] = useState(false);

  const getData = async () => {
    if (isPending)
      return;
    setIsPending(true);
    try {
      console.log("请求数据");
    }
    finally {
      setIsPending(false);
    }
  };

  useInterval(() => {
    getData();
  }, 10000);

  const block3OptionsClick = (index) => {
    if (index === block3Index)
      return;
    setBlock3Index(index);
    setBlock3List([]);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="port_qixiang">
      <div className="block1">
        <Title title="气象监测数据" />
        <div className="options">
          <div
            className="bg"
            style={{ backgroundImage: `url(${qixiang_img1})` }}
          />
          {block1OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="label">
                {item.title}
                ：
              </div>
              <div className="info">
                <span className="count">{item.count || "-"}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block2">
        <Title title="监测设备状态" />
        <div className="options">
          {block2OptionsList.map((item, index) => (
            <div key={index} className="option">
              <div className="title">{item.title}</div>
              <div className="info">
                <div
                  className="img"
                  style={{ backgroundImage: `url(${img2})` }}
                >
                  <img src={item.img} alt="" />
                </div>
                {item.title === "监测站数"
                  ? (
                      <div className="count">
                        <div style={{ display: "flex" }}>
                          在线数：
                          <CountUp end={+item.onlineCount} />
                        </div>
                        <div style={{ display: "flex" }}>
                          离线数：
                          <CountUp end={+item.offlineCount} />
                        </div>
                      </div>
                    )
                  : (
                      <div className="count">
                        <div>在线数：-</div>
                        <div>离线数：-</div>
                      </div>
                    )}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="block3">
        <Title title="设备监测详情" />
        <div className="content">
          <div className="options">
            {block3OptionsNavList.map((item, index) => (
              <div
                key={index}
                className="title"
                style={{ backgroundImage: index === block3Index ? `url(${navTitleOn})` : `url(${navTitle})` }}
                onClick={() => block3OptionsClick(index)}
              >
                {item}
              </div>
            ))}
          </div>
          <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.EQUIPMENTTYPE_NAME}</div>
                    <div className="td">{item.NAME}</div>
                    <div className={`td ${item.isshow === "1" ? "green" : ""} ${item.isshow === "2" ? "red" : ""}`}>
                      {item.isshow === "2" ? "离线" : "在线"}
                    </div>
                  </div>
                ))}
              </SeamlessScroll>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QiXiang;
