import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import CountUp from "react-countup";
import videoBackground from "~/assets/images/map_bi/content/videoimg1.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";

const defaultStatistics = [
  { label: "视频总数", count: 0 },
  { label: "在线数量", count: 0 },
  { label: "离线数量", count: 0 },
];

/** 负责查询并展示摄像头总数、在线与离线统计。 */
function VideoLocationPanel(props) {
  const { portArea } = useContext(Context);
  const [statistics, setStatistics] = useState(defaultStatistics);

  useEffect(() => {
    const loadStatistics = async () => {
      const { data = {} } = await props.getFixedCameraVideoLocationStat({
        portArea,
      });
      const counts = [data.totalCount, data.onlineCount, data.offlineCount];
      setStatistics(
        defaultStatistics.map((item, index) => ({
          ...item,
          count: counts[index],
        })),
      );
    };

    loadStatistics();
  }, []);

  return (
    <Panel title="视频定位" className="port-key-supervision__video-location">
      <Spin spinning={props.biStatistics.getFixedCameraVideoLocationStatLoading}>
        <div className="port-video-location__options">
          <div className="port-video-location__option">
            <div
              className="port-video-location__image"
              style={{ backgroundImage: `url(${videoBackground})` }}
            />
            <div>
              {statistics.map(item => (
                <div
                  key={item.label}
                  className="port-video-location__statistic"
                >
                  <div>
                    {item.label}
                    ：
                  </div>
                  <div>
                    <CountUp end={+item.count} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Spin>
    </Panel>
  );
}

export default Connect([NS_BI_STATISTICS], true)(VideoLocationPanel);
