import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import CountUp from "react-countup";
import highBackground from "~/assets/images/map_bi/content/img2_1.png";
import normalBackground from "~/assets/images/map_bi/content/img2_2.png";
import majorIcon from "~/assets/images/map_bi/content/img2ico1.png";
import highIcon from "~/assets/images/map_bi/content/img2ico2.png";
import normalIcon from "~/assets/images/map_bi/content/img2ico3.png";
import lowIcon from "~/assets/images/map_bi/content/img2ico4.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: "重大风险点数",
    image: majorIcon,
    background: highBackground,
    level: "levelA",
    count: 0,
  },
  {
    label: "较大风险点数",
    image: highIcon,
    background: highBackground,
    level: "levelB",
    count: 0,
  },
  {
    label: "一般风险点数",
    image: normalIcon,
    background: normalBackground,
    level: "levelC",
    count: 0,
  },
  {
    label: "低风险点数",
    image: lowIcon,
    background: normalBackground,
    level: "levelD",
    count: 0,
  },
];

/** 负责查询并展示不同风险等级的风险点数量。 */
function RiskStatsPanel(props) {
  const { portArea } = useContext(Context);
  const [statistics, setStatistics] = useState(defaultStatistics);

  useEffect(() => {
    const loadStatistics = async () => {
      const { data = [] } = await props.getRiskPointCorpRiskLevel({ portArea });
      const countByLevel = Object.fromEntries(
        data.map(item => [item.level, item.count]),
      );

      setStatistics(
        defaultStatistics.map(item => ({
          ...item,
          count: countByLevel[item.level] || 0,
        })),
      );
    };

    loadStatistics();
  }, []);

  return (
    <Panel title="风险区域统计" className="port-index__risk-stats">
      <Spin spinning={props.biStatistics.getRiskPointCorpRiskLevelLoading}>
        <div className="port-risk-stats__options">
          {statistics.map(item => (
            <div key={item.level} className="port-risk-stats__option">
              <img
                src={item.image}
                className="port-risk-stats__option-icon"
                alt=""
              />
              <img
                src={item.background}
                className="port-risk-stats__option-background"
                alt=""
              />
              <div>
                <div className="port-risk-stats__option-label">
                  {item.label}
                </div>
                <div className="port-risk-stats__option-count">
                  <CountUp end={+item.count} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </Spin>
    </Panel>
  );
}

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