import { useInterval } from "ahooks";
import { useEffect, useState } from "react";
import weatherBackground from "~/assets/images/map_bi/content/qixiang_img1.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const defaultStatistics = [
  { title: "风速监测", count: "-" },
  { title: "温度监测", count: "-" },
  { title: "风向监测", count: "-" },
  { title: "监测数据来源", count: "-" },
];

/** 负责气象监测数据的定时刷新控制与展示。 */
function WeatherDataPanel() {
  const [statistics] = useState(defaultStatistics);
  const [isPending, setIsPending] = useState(false);
  const getData = async () => {
    if (isPending)
      return;
    setIsPending(true);
    try {
      console.log("请求数据");
    }
    finally {
      setIsPending(false);
    }
  };

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

  return (
    <Panel title="气象监测数据" className="port-weather__data">
      <div className="port-weather-data__options">
        <div
          className="port-weather-data__background"
          style={{ backgroundImage: `url(${weatherBackground})` }}
        />
        {statistics.map(item => (
          <div key={item.title} className="port-weather-data__option">
            <div className="port-weather-data__label">
              {item.title}
              ：
            </div>
            <div className="port-weather-data__count">{item.count || "-"}</div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default WeatherDataPanel;
