import { useBoolean } from "ahooks";
import { Modal } from "antd";
import { useState } from "react";
import AliPlayer from "zy-react-library/components/Video/AliPlayer";
import "./index.less";

function Camera() {
  const [state, { setFalse }] = useBoolean(true);
  const [parentList, setParentList] = useState([
    { title: "一级一级一级一级一级一级一级一级一级一级一级一级一级一级一级一级" },
    { title: "二级" },
    { title: "三级" },
  ]);
  const [parentCurrentIndex, setParentCurrentIndex] = useState(0);
  const [childList, setChildList] = useState([
    { title: "一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一" },
    { title: "一级_二" },
    { title: "一级_三" },
    { title: "一级_四" },
    { title: "一级_五" },
    { title: "一级_六" },
  ]);
  const [childCurrentIndex, setChildCurrentIndex] = useState(0);
  const [videoList, setVideoList] = useState([
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
  ]);

  const onChangeParentList = (index) => {
    if (index === parentCurrentIndex)
      return;
    setParentCurrentIndex(index);
    setChildCurrentIndex(0);
  };

  const onChangeChildList = (index) => {
    if (index === childCurrentIndex)
      return;
    setChildCurrentIndex(index);
  };

  return (
    <Modal
      open={state}
      mask={{ closable: false }}
      footer={null}
      width={1500}
      onCancel={setFalse}
      title="视频巡屏"
      classNames={{ wrapper: "map_content_branch_office_camera_modal map_bi_model" }}
    >
      <div className="container">
        <div className="parent_tabs">
          {parentList.map((item, index) => (
            <div
              key={index}
              className={`tab ${parentCurrentIndex === index ? "active" : ""}`}
              onClick={() => {
                onChangeParentList(index);
              }}
            >
              {item.title}
            </div>
          ))}
        </div>
        <div className="info">
          <div className="child_tabs">
            {childList.map((item, index) => (
              <div
                key={index}
                className={`tab ${childCurrentIndex === index ? "active" : ""}`}
                onClick={() => {
                  onChangeChildList(index);
                }}
              >
                {item.title}
              </div>
            ))}
          </div>
          <div className="videos">
            {videoList.map((item, index) => (
              <div key={index} className="video">
                <AliPlayer source={item.src} height="150px" isLive />
              </div>
            ))}
          </div>
        </div>
      </div>
    </Modal>
  );
}

export default Camera;
