import React, {Component} from "react";
import '../../signin/css/signincdi.css';
import {Pagination,Table,Spin} from 'antd';
import {getImageUrl,sortDirections,formatSeconds} from 'educoder';
import axios from 'axios';
import LoadingSpin from "../../../../common/LoadingSpin";
import NoneDatas from "../../signin/component/NoneDatas";


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

		this.state = {
			columnsstu: [
				{
					title: '序号',
					dataIndex: 'number',
					key: 'number',
					align: "center",
					className: 'font-14',
					width: '100px',
					render: (text, record) => (
						<span style={{width: '100px'}}>{record.number}</span>
					),
				},
				{
					title: '视频名称',
					dataIndex: 'title',
					key: 'title',
					align: "left",
					className: 'font-14 width200s widh150wpos',
					width:200,
					render: (text, record) => (
						<div className="maxnamewidth200ss textalignlefts"  style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
							<script>
								{
									`
									a{text-decoration:none !important;}
						  a:hover {text-decoration: none !important;}    
              a:active{text-decoration:none !important;}
							`
								}
							</script>
							<a className="maxnamewidth200ss textalignlefts xiaoshout" style={{
								color:"#333333"
							}} title={record.title}>{record.title}</a>

						</div>
					),
				},
				{
					title: '观看人数',
					dataIndex: 'people_num',
					key: 'people_num',
					align: "center",
					className: 'font-14 width150s',
					sorter: true,
					sortDirections: sortDirections,
					width:150,
					render: (text, record) => (
						<span>{record.people_num}</span>
					),
				},
				{
					title: '观看时长',
					dataIndex: 'total_time',
					key: 'total_time',
					align: "center",
					className: 'font-14 width100s ',
					sorter: true,
					sortDirections: sortDirections,
					width:100,
					render: (text, record) => (
						<div  className="maxnamewidth100s ">
							<script>
								{
									`
								a{text-decoration:none !important;}
						  a:hover {text-decoration: none !important;}    
              a:active{text-decoration:none !important;}
							`
								}
							</script>
										<a className="maxnamewidth100s xiaoshout" style={{
											color:"#333333"
										}} title={record.total_time}>{record.total_time}</a>

							</div>
					),
				},
				{
					title: '发布人',
					dataIndex: 'user_name',
					key: 'user_name',
					align: "center",
					className: 'font-14 width150s',
					width:150,
					render: (text, record) => (
						<span  className="maxnamewidth150ss">
							<script>
								{
									`
								a{text-decoration:none !important;}
						  a:hover {text-decoration: none !important;}    
              a:active{text-decoration:none !important;}
							`
								}
							</script>
							<a className="maxnamewidth150ss xiaoshout" style={{
								color:"#333333"
							}} title={record.user_name}>{record.user_name}</a>

						</span>
					),
				},
				{
					title: '详情',
					dataIndex: 'id',
					key: 'id',
					align: "center",
					className: 'font-14',
					render: (text, record) => (
						<span style={{color:'#5091FF'}} className="xiaoshou" onClick={()=>this.props.tisticsbools(true,record.id,record.title)}>详情</span>
					),
				}
			],
			loading:false,
			data:[],
			page:1,
			limit:20,
			members_count:0,
			order:undefined,
		}
	}

	componentDidMount() {
		let data={
			page:1,
			order:this.state.order
		}
		this.togetdatas(data);

	}

	componentDidUpdate = (prevProps) => {


	}
	paginationonChange = (pageNumber) => {
		this.setState({
			page: pageNumber,
		})
		let data={
			page:pageNumber,
			order:this.state.order
		}
   this.togetdatas(data);
	}


	togetdatas(data){
		this.setState({
			loading:true
		})
		const CourseId=this.props.match.params.coursesId;
		let url=`/courses/${CourseId}/watch_video_histories.json`;
		axios.get(url,{params:data
		}).then((response) => {
			if (response) {
				if (response.data) {
					if (response.data.videos.length > 0) {
						let datalists = [];
						for (var i = 0; i < response.data.videos.length; i++) {
							datalists.push({
								number: (parseInt(this.state.page) - 1) * parseInt(this.state.limit) + (i + 1),
								title: response.data.videos[i].title,
								people_num: response.data.videos[i].people_num,
								total_time: response.data.videos[i].total_time?formatSeconds(response.data.videos[i].total_time):0,
								user_name: response.data.videos[i].user_name,
								id: response.data.videos[i].id,
						})
						}

						this.setState({
							data: datalists,
							members_count: response.data.count,
						})
					} else {
						this.setState({
							data: [],
							members_count: response.data.count,
						})
					}
				} else {
					this.setState({
						data: [],
						members_count: response.data.count,
					})
				}


			}



			this.setState({
				loading:false
			})
		}).catch((error) => {
			this.setState({
				loading:false
			})
		});
	}


	//实训作业tbale 列表塞选数据
	table1handleChange = (pagination, filters, sorter) => {
		if (JSON.stringify(sorter) === "{}") {
			//没有选择
		} else {
			try {
				//学生学号排序
				if (sorter.columnKey === "people_num"||sorter.columnKey === "total_time") {
					let mysorder="";
					if (sorter.order === "ascend") {
						if(sorter.columnKey === "people_num"){
							mysorder="people_num-asc";
						}else{
							mysorder="total_time-asc";

						}
						//升序
						let data={
							page:this.state.page,
							order:mysorder
						}
						this.togetdatas(data);
						this.setState({
							order: mysorder,
						})
					} else if (sorter.order === "descend") {
						if(sorter.columnKey === "people_num"){
							mysorder="people_num-desc";
						}else{
							mysorder="total_time-desc";

						}
						//降序
						let data={
							page:this.state.page,
							order:mysorder
						}
						this.togetdatas(data);
						this.setState({
							order: mysorder,
						})
					}
				}
			} catch (e) {

			}

		}

	}



	render() {
    let {loading,data,columnsstu,page,members_count,limit}=this.state;
		return (
			<React.Fragment>
				<div className="ws100s  mt20">
					<script>
						{
							`
							a{ 
							    text-decoration:none !important;
							}
						  a:hover {text-decoration: none !important;}    
              a:active{text-decoration:none !important;}
							`
						}
					</script>
					<div className="ws100s edu-back-white">
						<div className="ws100s teacherentrydivss pd15s">
							<div className="ws100s sortinxdirection">
								<div className="ws100s sptits font-18">统计列表</div>
							</div>

						</div>
						<style>
							{
								`
								 .ysltableo .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
									 padding: 10px 10px;
									}
								`
							}
						</style>

								<div className="ws100s ysltableo teacherentrydivs pdinstop0" style={{	minHeight: "400px"}}>
									{
										data&&data.length===0?
											<div style={{
												minHeight: "400px",
											}} className="ws100s">
												<NoneDatas></NoneDatas>
											</div>
											:	data&&data.length>0?
											<Spin spinning={loading}>
											<Table
												columns={columnsstu}
												dataSource={data}
												pagination={false}
												onChange={this.table1handleChange}

											/>
											</Spin>
											:
										""
									}


								</div>

					</div>

					<div className="mb30 clearfix educontent mt40 intermediatecenter">
						{
							data&&data.length>0?
								<Pagination showQuickJumper current={this.state.page} onChange={this.paginationonChange}
														pageSize={this.state.limit}
														total={this.state.members_count}></Pagination>
								:""
						}

					</div>
				</div>

			</React.Fragment>
		)
	}
}

export default Videostatisticslist;
