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 applyIcon from "~/assets/images/map_bi/content/icon27.png";
import approvingIcon from "~/assets/images/map_bi/content/icon28.png";
import archivedIcon from "~/assets/images/map_bi/content/icon29.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: applyIcon, label: "申请数", count: 0 },
  { image: approvingIcon, label: "审批中", count: 0 },
  { image: archivedIcon, label: "归档数", count: 0 },
];

/** 负责查询并展示危险作业申请、审批和归档状态统计。 */
function WorkStatusPanel(props) {
  const { portArea } = useContext(Context);
  const [statistics, setStatistics] = useState(defaultStatistics);

  useEffect(() => {
    const loadStatistics = async () => {
      const { data = {} } = await props.getEightWorkInfoScreenStatusStatistics({
        portArea,
      });
      const counts = [
        data.appliedCount,
        data.approvingCount,
        data.archivedCount,
      ];
      setStatistics(
        defaultStatistics.map((item, index) => ({
          ...item,
          count: counts[index],
        })),
      );
    };

    loadStatistics();
  }, []);

  return (
    <Panel title="安全作业状态统计" className="port-danger-work__status">
      <Spin spinning={props.biStatistics.getEightWorkInfoScreenStatusStatisticsLoading}>
        <div className="port-danger-work-status__options">
          {statistics.map(item => (
            <div key={item.label} className="port-danger-work-status__option">
              <div
                className="port-danger-work-status__icon"
                style={{ backgroundImage: `url(${iconBackground})` }}
              >
                <img src={item.image} alt="" />
              </div>
              <div
                className="port-danger-work-status__label"
                style={{ backgroundImage: `url(${labelBackground})` }}
              >
                {item.label}
                ：
                <CountUp end={+item.count} />
              </div>
            </div>
          ))}
        </div>
      </Spin>
    </Panel>
  );
}

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