import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useContext, useEffect, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import activeTabBackground from "~/assets/images/map_bi/content/title.png";
import tabBackground from "~/assets/images/map_bi/content/title_on.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 tabs = ["分公司统计", "相关方单位统计"];

/** 负责切换企业类型并展示单位人员统计列表。 */
function PersonnelStatsPanel(props) {
  const { portArea } = useContext(Context);
  const [activeTab, setActiveTab] = useState(0);
  const [statistics, setStatistics] = useState([]);
  const [isVisible, setIsVisible] = useState(false);

  const loadStatistics = async (enterpriseType) => {
    setIsVisible(false);
    const { data = [] } = await props.getCorpInfoCorpUserStatisticPage({
      portArea,
      enterpriseType,
    });
    setStatistics(data);
    setIsVisible(true);
  };

  const handleTabClick = (index) => {
    if (index === activeTab)
      return;

    setActiveTab(index);
    loadStatistics(index === 0 ? 2 : 3);
  };

  useEffect(() => {
    loadStatistics(2);
  }, []);

  return (
    <Panel title="单位人员信息统计" className="port-index__personnel-stats">
      <div className="port-personnel-stats__content">
        <div className="port-personnel-stats__tabs">
          {tabs.map((item, index) => (
            <div
              key={item}
              className="port-personnel-stats__tab"
              style={{
                backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
              }}
              onClick={() => handleTabClick(index)}
            >
              {item}
            </div>
          ))}
        </div>
        <div className="port-personnel-stats__table">
          <div className="port-personnel-stats__row">
            <div className="port-personnel-stats__cell">公司名称</div>
            <div className="port-personnel-stats__cell">部门数</div>
            <div className="port-personnel-stats__cell">人员数</div>
          </div>
          <div className="port-personnel-stats__table-body">
            <Spin spinning={props.biStatistics.getCorpInfoCorpUserStatisticPageLoading}>
              {isVisible && (
                <SeamlessScroll list={statistics} step={0.5}>
                  {statistics.map((item, index) => (
                    <div key={index} className="port-personnel-stats__row">
                      <div className="port-personnel-stats__cell">
                        {item.corpName}
                      </div>
                      <div className="port-personnel-stats__cell">
                        {item.departmentCount}
                      </div>
                      <div className="port-personnel-stats__cell">
                        {item.userCount}
                      </div>
                    </div>
                  ))}
                </SeamlessScroll>
              )}
            </Spin>
          </div>
        </div>
      </div>
    </Panel>
  );
}

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