import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { Box, YSIframePlayer } from '$components';
import { Select } from 'antd';
import './style.less';


const DataTop5 = ({ dispatch, actions }) => {
   const [videoList, setVideoList] = useState([])
   const [options, setOptions] = useState([])
   const [videoData, setVideoData] = useState({})


   useEffect(() => {
      dispatch(actions.firecontrol.getVideoCenterList()).then(res => {
         if (res.success) {
            setVideoList(res.payload.data || [])
            setOptions(res.payload.data?.map(v => ({ value: v.deviceSerial, label: v.deviceName })) || [])
            setVideoData(res.payload.data[0] || {})
         }
      })
   }, [])


   return <div style={{ height: '100%', width: '100%', margin: "0px 0px 28px" }}>
      <div style={{
         height: "100%", listStyle: 'none',

      }}>
         <div className='box_header_bg'  >
            <span className='card-title'>视频监控</span>
            <Select
               className='bigscreen-select'
               style={{
                  width: 100,
                  float: 'right',
                  margin: '18px 20px 0 0 '
               }}
               value={videoData?.deviceSerial}
               onChange={v => {
                  setVideoData(videoList?.find(s => s.deviceSerial == v) ||{})
               }}
            options={options}
            />
         </div>
         <div className='children-container'>
            <YSIframePlayer
               containerId={`yingshiPlay_lu_${videoData?.deviceSerial}`}
               height='100%'
               width="100%"
               url={`ezopen://open.ys7.com/${videoData?.deviceSerial}/${'1'}.hd.live`}
               audio="0"
               ysToken={videoData?.token}
               videoState={{
                  status: videoData?.status
               }}
            />
         </div>
      </div>
   </div>
}
function mapStateToProps (state) {
   const { auth, global } = state
   return {
      user: auth.user,
      actions: global.actions,
   }
}
export default connect(mapStateToProps)(DataTop5);