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: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
      name: '琼海电信小区1', // 设备名称
      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: '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',
    },
  ];

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

export default Demo;
