import React, { Component } from 'react';
import './../../../../styles/view/biz/monitor/video.scss';

class RightFour extends Component {

    constructor() {
        super();
    }

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

export default RightFour;