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

class RightSix extends Component {

    constructor(props) {
        super(props);
    }

    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>
                        <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>
                            <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>
                            <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>
                            <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>
                            <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>
                            <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;