import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { useEffect, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import background from "~/assets/images/public/bigScreen/bg13.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import Panel from "../../Panel";
import "./index.less";

/** 负责查询并展示相关方单位备案和项目执行统计。 */
function RecordStatsPanel(props) {
  const [list, setList] = useState([]);
  useEffect(() => {
    const loadList = async () => {
      const { data = [] } = await props.getXgfStatisticsListRecordProjectStatistics();
      setList(data);
    };

    loadList();
  }, []);
  return (
    <Panel
      title="相关方单位备案与项目执行统计"
      className="index-info-bottom__record-stats"
    >
      <Spin spinning={props.biStatistics.getXgfStatisticsListRecordProjectStatisticsLoading}>
        <div
          className="index-info-record-stats__table"
          style={{ backgroundImage: `url(${background})` }}
        >
          <div className="index-info-record-stats__header">
            <div>备案类型</div>
            <div>主管部门</div>
            <div>相关方单位备案情况</div>
            <div>项目执行情况统计</div>
            <div>人员培训情况统计</div>
          </div>
          <div className="index-info-record-stats__body">
            <SeamlessScroll list={list} step={0.5}>
              {list.map((item, index) => (
                <div className="index-info-record-stats__row" key={index}>
                  <div>{item.qualificationsTypeName}</div>
                  <div>{item.managerDeptName}</div>
                  <div>{`${item.completedRecordCount}/${item.applyRecordCount}`}</div>
                  <div>{`${item.executingProjectCount}/${item.projectCount}`}</div>
                  <div>{`${item.trainingPassedCount}/${item.projectUserCount}`}</div>
                </div>
              ))}
            </SeamlessScroll>
          </div>
        </div>
      </Spin>
    </Panel>
  );
}

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