import React, { useState } from 'react';
import { Button } from 'antd';
import VideoSliderModal from '../index';

const Demo = () => {
  const [showModal, setShowModal] = useState(false);
  // 关闭弹窗
  const closeModal = () => {
    setShowModal(false);
  };
  // 弹窗参数
  const modalInfo = {
    title: '视频预览测试',
    open: showModal,
    onCancel: closeModal,
  };

  // 视频数据源信息
  const videos = [
    {
      id: 'E48A1B9F-16AD-4728-9A9F-9D86E897B1CC', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区1', // 设备名称
      protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
      address: '236644034',
    },
    {
      id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区2', // 设备名称
      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
      address: '236644034',
    },
    {
      id: '972DF430-2E69-4960-86E2-C1D336B85280', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区3', // 设备名称
      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
      username: '6c44c8e92d1c4d75a9818756025df550',
      password: '78b7dc88f9f4bf19c2b1aabfdd995244',
      dataRate: 'Sub', // Main 主码流  Sub 子码流
      pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
      address: '236644034',
    },
  ];

  const _JessibucaObj = {
    operateBtns: {
      screenshot: false,
    },
    loadingText: '视频加载中',
    decoder: '/JessibucaVideo/decoder.js',
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>打开弹窗</Button>
      <VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={_JessibucaObj} />
    </>
  );
};

export default Demo;
