import React, {Component} from "react";
import '../../signin/css/signincdi.css';
import {Progress, message} from 'antd';
import {getImageUrl} from 'educoder';
import axios from 'axios';



//条目
class Videostatisticscom extends Component {
	//条目组件
	constructor(props) {
		super(props);

		this.state = {}
	}

	componentDidMount() {

	}

	componentDidUpdate = (prevProps) => {


	}



	render() {

		return (
			<React.Fragment>
				<div className="ws100s edu-back-white sortinxdirection" style={{
					position: "relative"
				}}>
					<div className="ws100s teacherentrydivs ">
						<div className="ws100s sortinxdirection">
							<div className="ws50s sptits">视频统计总览</div>
							<div className="ws50s sptitss xaxisreverseorder">播放数据从2020-03-13 24:00开始统计</div>
						</div>
						<style>
							{
								`
              .yslsprenshu{
                background-image: url(${getImageUrl(`images/qiandao/sprenshu.png`)});
                  background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
              .yslspcishu{
                background-image: url(${getImageUrl(`images/qiandao/spcishu.png`)});
                  background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
             .yslshipingshi{
                background-image: url(${getImageUrl(`images/qiandao/shipingshi.png`)});
                 background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
                  
              `
							}
						</style>
						<div className="ws100s spacearound mt20">
							<div className="yslsprenshu" style={{width:260,height:100}}>
								<div className="ws100s verticallayout tbrt">
                 <div className="ws100s ts">观看总人数（人）</div>
									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.people_num?this.props.watch_staticsdata.people_num:0}</div>

								</div>

							</div>

							<div className="yslspcishu" style={{width:260,height:100}}>
								<div className="ws100s verticallayout tbrt">
									<div className="ws100s ts">观看总人次（次）</div>
									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.freq?this.props.watch_staticsdata.freq:0}</div>
								</div>
							</div>

							<div className="yslshipingshi" style={{width:260,height:100}}>
								<div className="ws100s verticallayout tbrt">
									<div className="ws100 ts">总观看时长（时）</div>
									<div className="ws100s tss">{this.props.watch_staticsdata&&this.props.watch_staticsdata.total_duration?this.props.watch_staticsdata.total_duration:0}</div>
								</div>
							</div>

						</div>



					</div>

				</div>

			</React.Fragment>
		)
	}
}

export default Videostatisticscom;