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 { 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";

/** 消防设备列表区块根据查询条件请求并展示消防点位设备。 */
function FireDeviceListPanel(props) {
  const { portArea } = useContext(Context);
  const { queryParams } = props;
  const [deviceList, setDeviceList] = useState([]);
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const loadDeviceList = async () => {
      setIsVisible(false);
      const { data = [] } = await props.getFirePointDeviceList({
        portArea,
        ...queryParams,
        pageIndex: 1,
        pageSize: 9999,
      });
      setDeviceList(data);
      setIsVisible(true);
    };

    loadDeviceList();
  }, [queryParams]);

  return (
    <Panel title="消防设备列表" className="port-fire__device-list">
      <div className="port-fire-device-list__content">
        <div className="port-fire-device-list__table">
          <div className="port-fire-device-list__row">
            <div className="port-fire-device-list__cell">消防点位</div>
            <div className="port-fire-device-list__cell">设备类型</div>
            <div className="port-fire-device-list__cell">数量</div>
          </div>
          <div className="port-fire-device-list__table-body">
            <Spin spinning={props.biStatistics.getFirePointDeviceListLoading}>
              {isVisible && (
                <SeamlessScroll list={deviceList} step={0.5}>
                  {deviceList.map((item, index) => (
                    <div key={index} className="port-fire-device-list__row">
                      <div className="port-fire-device-list__cell">
                        {item.firePointName}
                      </div>
                      <div className="port-fire-device-list__cell">
                        {item.fireDeviceTypeName}
                      </div>
                      <div className="port-fire-device-list__cell">
                        {item.deviceCount}
                      </div>
                    </div>
                  ))}
                </SeamlessScroll>
              )}
            </Spin>
          </div>
        </div>
      </div>
    </Panel>
  );
}

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