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

/** 负责加载摄像头列表、切换企业并请求当前播放地址。 */
function VideoPatrolPanel(props) {
  const [list, setList] = useState([]);
  const [active, setActive] = useState("");
  const [playUrl, setPlayUrl] = useState("");
  const loadPlayUrl = async (cameraNumber) => {
    const { data = {}, success } = await props.getFixedCameraPlayUrl({
      indexCode: cameraNumber,
    });
    if (success && data)
      setPlayUrl(data.url);
  };
  const selectCorp = (item) => {
    setActive(item.corpinfoName);
    if (!item.fixedCameraCOList.length) {
      message.warning("暂无视频");
      setPlayUrl("");
      return;
    }
    loadPlayUrl(
      item.fixedCameraCOList[
        Math.floor(randoms(0, item.fixedCameraCOList.length - 1))
      ].cameraNumber,
    );
  };
  useEffect(() => {
    const loadVideoList = async () => {
      const { data = [] } = await props.getFixedCameraVideoList();
      setList(data);
      if (data.length) {
        selectCorp(data[0]);
      }
    };

    loadVideoList();
  }, []);
  return (
    <Panel title="视频巡屏" className="index-info-bottom__video-patrol">
      <div className="index-info-video-patrol__content">
        <Spin spinning={props.biStatistics.getFixedCameraVideoListLoading}>
          <div className="index-info-video-patrol__menu">
            {list.map(item => (
              <div
                className={`index-info-video-patrol__menu-item ${item.corpinfoName === active ? "index-info-video-patrol__menu-item--active" : ""}`}
                key={item.corpinfoName}
                onClick={() => selectCorp(item)}
              >
                {item.corpinfoName}
              </div>
            ))}
          </div>
        </Spin>
        <div
          className="index-info-video-patrol__screen"
          style={{ backgroundImage: `url(${background})` }}
        >
          <Spin spinning={props.biStatistics.getFixedCameraVideoListLoading || props.biStatistics.getFixedCameraPlayUrlLoading}>
            {playUrl
              ? (
                  <AliPlayer source={playUrl} height="100%" isLive />
                )
              : (
                  <div className="index-info-video-patrol__empty">暂无视频</div>
                )}
          </Spin>
        </div>
      </div>
    </Panel>
  );
}

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