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



//条目
class Studenticscom 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 teacherentrydivss ">
						<div className="ws100s sortinxdirection">
							<p className="sortinxdirection h40s" onClick={()=>this.props.statisticsy(false)} >
								<i className="iconfont icon-zuojiantou1 font-14  posiivsiconmyss mr5 colorbluesigin xiaoshou h36s" style={{color:'#BBBBBB'}} onClick={()=>this.props.statisticsy(false)} ></i>
							</p>
							<div className="ws47s sptits font-18" style={{
								color:"#333333"
							}}><span className="ml10">视频统计总览</span></div>
							<div className="ws50s sptitss xaxisreverseorder">播放数据从{this.props.watch_staticsdata&&this.props.watch_staticsdata.begin_at?this.props.watch_staticsdata.begin_at:0}开始统计</div>
						</div>
						<style>
							{
								`
              .yslsprenshu{
                background-image: url(${getImageUrl(`images/qiandao/studentbz1.png`)});
                  background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
              .yslspcishu{
                background-image: url(${getImageUrl(`images/qiandao/studentbz2.png`)});
                  background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
             .yslshipingshi{
                background-image: url(${getImageUrl(`images/qiandao/studentbz3.png`)});
                 background-repeat:no-repeat;
                -moz-background-size:100% 100%; 
                background-size:100% 100%;
              }
                  
              `
							}
						</style>
						<div className="ws100s spacearound mt10">
							<div className="yslsprenshu mr30" 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="yslspcishu mr30" 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.num?this.props.watch_staticsdata.num: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?formatSeconds(this.props.watch_staticsdata.total_duration):0}</div>
								</div>
							</div>

						</div>



					</div>

				</div>

			</React.Fragment>
		)
	}
}

export default Studenticscom;