import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import CountUp from "react-countup";
import iconBackground from "~/assets/images/map_bi/content/icobg.png";
import totalProjectIcon from "~/assets/images/map_bi/content/icon25.png";
import startedProjectIcon from "~/assets/images/map_bi/content/icon26.png";
import labelBackground from "~/assets/images/map_bi/content/label.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 = [
  { image: totalProjectIcon, label: "重点工程总数", count: 0 },
  { image: startedProjectIcon, label: "重点工程开工数量", count: 0 },
];

/** 负责查询并展示重点工程总量与开工数量。 */
function KeyProjectPanel(props) {
  const { portArea } = useContext(Context);
  const [statistics, setStatistics] = useState(defaultStatistics);

  useEffect(() => {
    const loadStatistics = async () => {
      const { data = {} } = await props.getKeyProjectLargeScreenProjectStatistics({
        portArea,
      });
      const counts = [data.totalProjectCount, data.startCount];
      setStatistics(
        defaultStatistics.map((item, index) => ({
          ...item,
          count: counts[index],
        })),
      );
    };

    loadStatistics();
  }, []);

  return (
    <Panel title="重点工程" className="port-key-supervision__project">
      <Spin spinning={props.biStatistics.getKeyProjectLargeScreenProjectStatisticsLoading}>
        <div className="port-key-project__options">
          {statistics.map(item => (
            <div key={item.label} className="port-key-project__option">
              <div
                className="port-key-project__icon"
                style={{ backgroundImage: `url(${iconBackground})` }}
              >
                <img src={item.image} alt="" />
              </div>
              <div className="port-key-project__info">
                <div
                  className="port-key-project__label"
                  style={{ backgroundImage: `url(${labelBackground})` }}
                >
                  {item.label}
                </div>
                <div className="port-key-project__count">
                  <CountUp end={+item.count} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </Spin>
    </Panel>
  );
}

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