import React, { Component } from 'react';
import './../../../../styles/view/biz/monitor/videoLabel.scss';
import LiverPlay from './../../../hikvideo/index';

class RightSix extends Component {

    constructor(props) {
        super(props);
    }

    buildVideo = (monitorList, index) => {
        if(monitorList.length > index ){
            return (
                // <video src={ monitorList[index].url } autoPlay width="100%" height="100%" controls="controls"></video>
                <LiverPlay key={monitorList[index].id} token={monitorList[index].token} vedioId={monitorList[index].id} width="100%" height="100%"/>
            )
        }
    }

    render(){
        let { time, monitorList } = this.props;
        return(
            <div className="monitor-six">   
                <div className="up">
                    <div className="up-content">
                        <div className="up-content-top">
                            {/* <span className="img-time">{ time }</span> */}
                            <span className="img-name">{ monitorList.length > 0 ? monitorList[0].name : '' }</span>
                        </div>
                        { this.buildVideo(monitorList, 0) }
                        {/* <iframe src={ monitorList.length > 0 ? monitorList[0].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                    </div>
                    <div className="right-up">
                        <div className="right-up-content">
                            <div className="right-up-content-top">
                               {/* <span className="img-time">{ time }</span> */}
                                <span className="img-name">{ monitorList.length > 1 ? monitorList[1].name : '' }</span>
                            </div>
                            { this.buildVideo(monitorList, 1) }
                            {/* <iframe src={ monitorList.length > 1 ? monitorList[1].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                        </div>
                        <div className="right-middle-content">
                            <div className="right-middle-content-top">
                                {/* <span className="img-time">{ time }</span> */}
                                <span className="img-name">{ monitorList.length > 2 ? monitorList[2].name : '' }</span>
                            </div>
                            { this.buildVideo(monitorList, 2) }
                            {/* <iframe src={ monitorList.length > 2 ? monitorList[2].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                        </div>
                    </div>
                </div>
                <div className="down">
                    <div className="left-down">
                        <div className="left-down-content">
                            <div className="left-down-content-top">
                                {/* <span className="img-time">{ time }</span> */}
                                <span className="img-name">{ monitorList.length > 3 ? monitorList[3].name : '' }</span>
                            </div>
                            { this.buildVideo(monitorList, 3) }
                            {/* <iframe src={ monitorList.length > 3 ? monitorList[3].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                        </div>
                    </div>
                    <div className="middle-down">
                        <div className="middle-down-content">
                            <div className="middle-down-content-top">
                                {/* <span className="img-time">{ time }</span> */}
                                <span className="img-name">{ monitorList.length > 4 ? monitorList[4].name : '' }</span>
                            </div>
                            { this.buildVideo(monitorList, 4) }
                            {/* <iframe src={ monitorList.length > 4 ? monitorList[4].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                        </div>
                    </div>
                    <div className="right-down">
                        <div className="right-down-content">
                            <div className="right-down-content-top">
                                {/* <span className="img-time">{ time }</span> */}
                                <span className="img-name">{ monitorList.length > 5 ? monitorList[5].name : '' }</span>
                            </div>
                            { this.buildVideo(monitorList, 5) }
                            {/* <iframe src={ monitorList.length > 5 ? monitorList[5].url : ''} scrolling="no" style={{ width:"100%",height:"100%" }} frameBorder="0"></iframe> */}
                        </div>
                    </div>
                </div>   
            </div>
        );
    }
}

export default RightSix;