import React, { useRef, useEffect, useState } from 'react';
import Video from '../recVideo';

const Demo2 = (props) => {
  const jessibuca = useRef(null);
  let JessibucaObj = {
    operateBtns: {
      // fullscreen: false,
      screenshot: false,
    },
    loadingText: '演示视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };
  // 若是在子应用中，则需加上子应用名称，且兼容基座
  // 如下：
  // let _url = '/civ_energy/JessibucaVideo/decoder.js'
  // let JessibucaObj = {
  //   decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url
  // }
  // let VideoInfo = {
  // key: '123638446', //'1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  // dataRate: `/2`,
  // fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76',
  //  useFullUrl: true,
  // cameraName: `摄像头s8`,
  //  appKey: '6c44c8e92d1c4d75a9818756025df550',
  //  appSecret: '78b7dc88f9f4bf19c2b1aabfdd995244',
  // protocol: '萤石EZOPEN',
  //};

  let VideoParam = {
    id: '9745259F-76B5-4ECB-BDD7-8B1B2C5C84CD',
    name: '3L00AE9PAJ00034',
    protocol: '乐橙云HTTP-FLV',
    username: 'lc0f4b952c86c34c4b',
    password: 'dfdcae9267bf4964ae09998e16f016',
    pandavmsHost: 'ws://192.168.12.154:8080/',
    address: '3L00AE9PAJ00034',
  };

  VideoParam = {
    channel: '2',
    // dataRate: 'Sub', // Main 主码流  Sub 子码流
    name: 'RTSP银河湾五期_通道_2',
    id: '46D6E990-8049-4A61-B592-8503BDFAA07A',
    username: 'admin',
    password: 'zls_1234@abcd',
    address: '172.16.19.2',
    protocol: 'RTSP',
    pandavmsHost: 'ws://192.168.8.30:7000/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
    hoursRuler: 48,
    beginTime: '2024-01-01 00:00:00', // 回放开始时间
    endTime: '2024-01-02 23:59:59', // 回放结束时间
  };

  const [VideoInfo, setVideoInfo] = useState(VideoParam);

  useEffect(() => {
    // 事件 ，返回视频信息
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('videoInfo', function (data) {
        console.log('width:', data.width, 'height:', data.width);
      });

    // 事件 ，播放视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('play', function (data) {
        console.log('play:', jessibuca);
      });

    // 事件 ，暂停视频之后的回调
    jessibuca &&
      jessibuca.current &&
      jessibuca.current.on('pause', function (data) {
        console.log('pause:', data);
      });

    // ******
    // 其他事件需查看在线文档
    // ******
    return () => {
      console.log('销毁。。。。。。。。。。。。。。。。。。。。。。。。。');

      stopVideo();
    };
  }, []);

  const stopVideo = () => {
    jessibuca && jessibuca.current && jessibuca.current.pause && jessibuca.current.pause();
  };

  const startVideo = () => {
    if (jessibuca && jessibuca.current) {
      jessibuca.current.play();
      // console.log(jessibuca.current.isPlaying());
    }
  };
  const testVideo = () => {
    // console.log(jessibuca.current.isPlaying());
    setVideoInfo({
      channel: '2',
      // dataRate: 'Sub', // Main 主码流  Sub 子码流
      name: 'RTSP银河湾五期_通道_2',
      id: '46D6E990-8049-4A61-B592-8503BDFAA07A',
      username: 'admin',
      password: 'zls_1234@abcd',
      address: '172.16.19.2',
      protocol: 'RTSP',
      pandavmsHost: 'ws://192.168.8.30:7000/', // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
      hoursRuler: 24,
      beginTime: '2024-01-01 00:00:00',
      endTime: '2024-01-01 23:59:59',
    });
  };

  const destroyVideo = () => {
    if (VideoParam.protocol != '萤石EZOPEN')
      jessibuca && jessibuca.current && jessibuca.current.destroy();
  };
  return (
    <div>
      <button onClick={stopVideo}>暂停</button>
      <button onClick={startVideo}>开始</button>
      <button onClick={testVideo}>测试</button>
      <button onClick={destroyVideo}>销毁</button>
      <div style={{ height: '700px' }}>
        <Video
          {...{
            JessibucaObj: JessibucaObj,
            VideoInfo: VideoInfo,
            ProgressBar: { strokeColor: 'red', textColor: 'red' },
          }}
          ref={jessibuca}
        />
      </div>
    </div>
  );
};

export default Demo2;
