import TreeData from "./treeData"
import './index.less'
import { Radio, Tabs, Empty } from "antd"
import { useEffect, useRef, useState } from "react";
import HFivePlayer from "../../components/video1Plary";
import { translate } from "ol/transform";
// import HFivePlayer from "./video1";

const SplitScreen: React.FC = (props: any) => {
  const [size, setSize] = useState(1);
  const [list, setList] = useState<any>([]);
  const [videoList, setVideoList] = useState<any>([]);
  const [num, setNum] = useState<any>(999);
  const [styleType, setStyle] = useState(false);


  const onChange = (e: any) => {
    setSize(Number(e));
    handDate(Number(e))
    setNum(999)
  };
  const handDate = (size: any) => {
    props.getType(size)
    console.log(new Array(size).fill(1),'4678999');
    
    setList(new Array(size).fill(1))
    setVideoList([])
  }
  const clickVideo = (index: any,item:any) => {
    if(num == index){
        props.clickIndex(999,item)
        setStyle(true)
        setNum(999)
    }else{
      props.clickIndex(index,item)
      setStyle(false)
      setNum(index)
    }
    
  }
  const getNum = () => {
    if (num === 999) {
      // return props.videoArr.length - 1
    } else {
      return num
    }
  }
  useEffect(() => {
    if (props.count !== 999) {
      setNum(props.count)
    }
  }, [props.count])
  useEffect(() => {
    
    setVideoList(props.videoArr)
    console.log(props.videoArr,'props.videoArr');
    
  }, [props.videoArr])

  useEffect(() => {
    onChange('9')
  }, [])
  const items = [
    { key: '1', label: '单屏' },
    { key: '4', label: '四分屏' },
    { key: '9', label: '九分屏' },
  ]
  return (
    <div className='splitScreen'>
      <Tabs
        onChange={onChange}
        defaultActiveKey='9'
        type="card"
        items={items}
      />
      {/* {props.videoArr} */}
      <div className={['flex', 'flexwarp', 'borderF'].join(' ')} style={{ position: 'relative' }}>
        {list.map((item: any, index: any) => {
          return <div onClick={() => clickVideo(index,item)}
            // onClick={()=>clickVideo(index)}
            className={[getNum() == index ? 'videoBorder' : null,
            size == 1 ? 'videoBorder1' : null, size == 4 ? 'videoBorder4' : null,
            size == 9 ? 'videoBorder9' : null,'borderFa'].join(' ')}>
            {props.videoArr[index]&&<div style={{height:'100%',width:'100%'}}>
              <div style={{ height: 'calc(100% - 20px)',width:'100%' }}>
              {videoList.length&&<HFivePlayer size={size} wsUrl={videoList[index]} playerID={index} />}
              </div>
              <div style={{ textAlign: 'center' }}>{videoList[index]?.name}</div>
            </div>}
            {!props.videoArr[index]&&<div className='borderType'>
              <img src={require('../../assets/images/no-video.png')}/>
              <div className='text'>暂无视频数据</div>
              </div>}
          </div>

        })}
      </div>
    </div>
  )
}
export default SplitScreen