import { Modal } from "antd";
import { inject, observer } from "mobx-react";
import { useState } from "react";
import Config from "@/util/config";
import VideoPlayer from "@/pages/home/video";
const WhichVideo = (props) => {
  const { homeStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [deviceList, setDeviceList] = useState<Array<any>>([]);
  const [channelList, setChannelList] = useState<Array<any>>([]);
  const [deviceId, setDeviceId] = useState<number>(0);
  const [channelId, setChannelId] = useState<number>(0);
  const [videoUrl, setVideoUrl] = useState<string | null>("");
  const openDispatch = async () => {
    setIsModalOpen(true);
    let req = await homeStore.getVideoUrlList();
    setDeviceList(req.EasyDarwin.Body.Devices);
  }; 
  const getChannerList = async (id) => {
    let reqs = await homeStore.getChannerUrlList(id);
    setChannelList(reqs.EasyDarwin.Body.Channels);
  };

  const getUrl = async (id) => {
    let reqs = await homeStore.getChannerStrem(deviceId, id);
    if (!reqs.EasyDarwin) return;
    let url = Config.videoApis + reqs.EasyDarwin.Body.URL
    setVideoUrl(url);
  };
  return (
    <>
      <span onClick={openDispatch}> 视频查看</span>
      <Modal
        title={"视频查看"}
        className="owner_model"
        width={"80%"}
        centered
        open={isModalOpen}
        afterClose={() => {
          setDeviceList([]);
          setChannelList([]);
          setVideoUrl(null);
          setChannelId(0);
        }}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div style={{ height: "700px",  width: "100%" }}>
          <div style={{ display: "flex" }}>
            <div style={{overflowY: "scroll",height: "700px"}}>
              {deviceList.map((item, index) => {
                return (
                  <div
                    key={index}
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                      setDeviceId(item.DeviceID);
                      getChannerList(item.DeviceID);
                    }}
                  >
                    <p
                      style={{
                        color: deviceId === item.DeviceID ? "yellow" : "#fff",
                      }}
                    >
                      {item.DeviceName}
                    </p>
                  </div>
                );
              })}
            </div>
            <div style={{ width: "20px" }}></div>
            <div style={{height:"700px",overflow:"scroll"}}>
              {channelList.map((item, index) => {
                return (
                  <div
                    key={index}
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                      setChannelId(item.ChannelID);
                      getUrl(item.ChannelID);
                    }}
                  >
                    <p
                      style={{
                        color: channelId === item.ChannelID ? "yellow" : "#fff",
                      }}
                    >
                      {item.Name}
                    </p>
                  </div>
                );
              })}
            </div>
            <div className="video" style={{ width: "100%", height: "400px" }}>
              {
                <VideoPlayer url={videoUrl} />
              }
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};

// export default WhichVideo;
export default inject("homeStore")(observer(WhichVideo));
