import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import CountUp from "react-countup";
import branchIcon from "~/assets/images/map_bi/content/img3.png";
import relatedIcon from "~/assets/images/map_bi/content/img4.png";
import userIcon from "~/assets/images/map_bi/content/img5.png";
import oval from "~/assets/images/map_bi/content/oval.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: branchIcon, count: 0 },
  { label: "相关方单位数", image: relatedIcon, count: 0 },
  { label: "员工数", image: userIcon, count: 0 },
];

/** 负责查询并展示港区单位、相关方及员工基础统计。 */
function BasicInfoPanel(props) {
  const { portArea } = useContext(Context);
  const [statistics, setStatistics] = useState(defaultStatistics);

  useEffect(() => {
    const loadStatistics = async () => {
      const { data = {} } = await props.getCorpInfoCorpUserSummary({ portArea });
      const counts = [
        data.branchCorpCount,
        data.relatedCorpCount,
        data.userCount,
      ];

      setStatistics(
        defaultStatistics.map((item, index) => ({
          ...item,
          count: counts[index],
        })),
      );
    };

    loadStatistics();
  }, []);

  return (
    <Panel title="单位基础信息" className="port-index__basic-info">
      <Spin spinning={props.biStatistics.getCorpInfoCorpUserSummaryLoading}>
        <div className="port-basic-info__options">
          {statistics.map(item => (
            <div key={item.label} className="port-basic-info__option">
              <img
                src={item.image}
                className="port-basic-info__option-icon"
                alt=""
              />
              <img src={oval} className="port-basic-info__option-oval" alt="" />
              <div className="port-basic-info__option-label">{item.label}</div>
              <div className="port-basic-info__option-count">
                <CountUp end={+item.count} />
              </div>
            </div>
          ))}
        </div>
      </Spin>
    </Panel>
  );
}

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