import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui';
import { VideoPlay } from "$components";
import { useState } from 'react';


const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
   const [videoWidth, setVideoWidth] = useState()
   const [videoHeight, setVideoHeight] = useState()
   // console.log(videoObj);
   useEffect(() => {

      // const resize_ = async () => {
      //    try {
      //       let video = document.getElementById('video' + videoObj.key)
      //       if (video) {
      //          await setVideoWidth(video.clientWidth)
      //          await setVideoHeight(video.clientHeight)
      //       }
      //    } catch (error) {
      //       console.error(error)
      //    }
      // }
      // resize_()
      // window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发
      // return () => {
      //    window.removeEventListener('resize', resize_);
      // }

   }, [])
   useEffect(() => {
      try {
         let video = document.getElementById('video' + videoObj.key)
         if (video) {
            setVideoWidth(video.clientWidth)
            setVideoHeight(video.clientHeight)
         }
      } catch (error) {
         console.error(error)
      }
   }, [pageSize, showHeader])
   // console.log(videoWidth, videoHeight);
   return (
      <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>
         {videoWidth && videoHeight ? videoPlay ?
            <VideoPlay sizeWh={{
               width: videoWidth - 10,
               height: videoHeight - 30,
               parentWidth: videoWidth - 10,
               parentHeight: videoHeight - 30,
               // width: 300,
               // height: 200,
               // parentWidth: 300,
               // parentHeight: 200,
            }}
               videoObj={videoObj.camera}
               videoStyle='true'
               containerId={videoObj.key}
               local={true} /> :
            <img src={`${__webpack_public_path__}assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2', 'white2', 'black2') : mould('blue1.5', 'white1.5', 'black1.5')}.png`} style={{
               display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
            }} /> : ""}
         <div style={{ lineHeight: '30px', paddingLeft: 6, color: mould('#FFFFFF', '#615E5E', '#FFFFFF') }}>{videoObj?.label}</div>
      </div>
   )
}

function mapStateToProps (state) {
   const { auth } = state;
   return {
      user: auth.user,
   };
}

export default connect(mapStateToProps)(Container)