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

const { Option } = Select;

function DataTop5(props) {
    const { structures, accessToken, videoList } = props;
    const [showVideoList, setShowVideoList] = useState([]);

    useEffect(() => {
        if (videoList.length && structures.length) setShowVideoList(videoList.filter(v => v.structId === structures[0].id));
    }, [videoList])

    const renderSubtitle = () => (
        <Select
            className="gis-search-select"
            popupClassName="super-dropdownClassName"
            style={{ width: 120, height: 24 }}
            showSearch={false}
            optionFilterProp="children"
            key={Math.random()}
            defaultValue={structures[0]?.id}
            onChange={(value) => { setShowVideoList(videoList.filter(v => v.structId === value)) }}
        >
            {structures.map(s => <Option key={s.id} value={s.id}>{s.name}</Option>)}
        </Select>
    );
    return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
        <div className='water_video_container'>
            {
                showVideoList?.map((v, i) => {
                    const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}`
                    return <div className='_item' key={v.url}>
                        <iframe
                            id={`myPlayer-${i}`}
                            src={src}
                            width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
                            height='100%'
                            allowFullScreen
                        >
                        </iframe>
                        <div className='video_bottom'>
                            <span className='video_bottom_text'>{v.name}</span>
                        </div>
                    </div>
                })
            }

        </div>
    </Box>
}

export default DataTop5;