import React, {Component} from "react";
import {WordsBtn, on, trigger, publicSearchs} from 'educoder';

import {Menu, Spin} from 'antd';

import axios from 'axios';
import Videos from './Video';
import Lives from './Live';
import LivesNew from './LiveNew';
import VideoLink from './VideoLink';
import Videostatistics from '../videostatistics/Videostatistics';
import './video.css';
import '../css/Courses.css';
import '../publicNav/nav.css';
import Videostatisticscomtwo from '../videostatistics/component/Videostatisticscomtwo';
const PAGE_SIZE = 15;
const LIVE_PAGE_SIZE = 10;
const $ = window.$;

function getRight() {
	var right = parseInt($(".-task-sidebar").css("right"));
	return right === 0 ? 0 : right;
}

class VideoIndex extends Component {
	constructor(props) {
		super(props);
		this.state = {
			page: 1,
			upload: false,
			videos: undefined,
			videoData: undefined,
			otherLinkVisible: false,
			type: "video",
			isSpining: false,

			lives: undefined,
			liveData: undefined,

			liveId: undefined,

			liveVisible: false,
			statistics: false,
			myktid:null,
			mytitle:''
		}
	}

	checkType = (type, page) => {
		this.setState({
			type,
			isSpining: true
		})
		if (type === "video") {
			this.getList(page);
		} else {
			this.getLiveList(page);
		}
	}
  Setmyktid=(id,title)=>{
		const isAdmin = this.props&& this.props.isAdmin();
    if(isAdmin===true){
			this.setState({
				myktid:id,
				statistics:true,
				mytitle:title,
			})
		}else{
			this.setState({
				statistics:true,
				myktid:null,
				mytitle:"",

			})
		}

	}
	componentDidMount = () => {
		const {search} = this.props.location;
		const {page} = this.state;
		if (search && search === "?open=live") {
			this.setState({
				type: "live"
			})
			this.checkType("live", page);
		} else {
			if (search === "?open=new") {
				this.setState({
					upload: true
				})
			}
			this.checkType("video", page);
		}
	}
	componentDidUpdate = (prevProps) => {
		try {
			if (this.props.homedirectory !== prevProps.homedirectory) {
				if(this.props.homedirectory ===true){
					this.setState({
						statistics:false,
						myktid:null,
						mytitle:"",
					})
				}
			}
		}catch (e) {

		}

		if (this.props.match.params.videoId !== prevProps.match.params.videoId) {
			this.setState({
				upload: false,
			})
			const {page} = this.state;
			this.checkType("video", page);
		}


	}
	// 获取直播列表
	getLiveList = (page) => {
		const CourseId = this.props.match.params.coursesId;
		const url = `/courses/${CourseId}/live_links.json`;
		axios.get(url, {
			params: {
				page,
				limit: LIVE_PAGE_SIZE
			}
		}).then(result => {
			if (result) {
				this.setState({
					liveData: result.data,
					lives: result.data.lives,
					isSpining: false,
				})
			}
		}).catch(error => {
			console.log(error);
		})
	}

	// 获取视频列表
	getList = (page) => {
		const {coursesId, videoId} = this.props.match.params;
		const fetchUrl = `/courses/${coursesId}/course_videos.json`;
		axios.get(fetchUrl, {
				params: {
					page,
					limit: PAGE_SIZE,
					category_id: videoId
				}
			})
			.then((response) => {
				if (response) {
					this.setState({
						videos: response.data.videos,
						videoData: response.data,
						isSpining: false
					})
				}
			}).catch((error) => {
			console.log(error);
		})
	}

	changeType = (e) => {
		this.setState({
			type: e.key,
			upload: false,
			page: 1
		})
		this.checkType(e.key, 1);
	}

	changePage = (page, type) => {
		this.setState({
			page
		})
		this.checkType(type, page);
	}

	onEditVideo = (item) => {
		let videoId = {
			videoId: item.id,
			title: item.title
		}
		this.setState({
			videoId,
		})
		this.setVisible(true);
	}
	uploadVideo = (upload) => {

		this.setState({
			upload,
			isSpining: true
		})
		const {page} = this.state;
		setTimeout(() => {
			this.getList(page);
		}, 500)
	}

	toUpload = () => {
		const {admin, is_teacher, business} = this.props.user;
		if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) {
			this.setState({
				type: "video",
				upload: true,
				page: 1
			})
		} else {
			this.props.showProfessionalCertificationDialog();
		}
	}

	// 直播设置后回调的方法
	// successFunc=()=>{
	//   this.setState({
	//     type:"live",
	//     page:1
	//   })
	//   this.checkType("live",1);
	// }
	// 直播设置
	liveSetting = () => {
		this.setState({
			liveId: undefined
		})
		this.setliveVisibel(true);
	}
	//直播设置弹框
	setliveVisibel = (flag, changetypeFlag) => {
		this.setState({
			liveVisible: flag
		})
		if (flag === false) {
			this.setState({
				liveId: undefined
			})
		}
		if (changetypeFlag) {
			this.checkType("live", 1);
		}
	}
	// 列表-编辑（修改传到编辑的id）
	setLiveId = (id) => {
		this.setState({
			liveId: id
		})
		this.setliveVisibel(true);
	}

	// 新增目录
	addDir = () => {
		let {videoData} = this.state;
		trigger('videoAdd', parseInt(videoData.course_module_id));
	}
	// 目录重命名
	editDir = (name, id) => {
		let data = {id, name, update: this.getList}
		trigger('editVideo', data);
	}
	// 增加外链
	setLinkeVisible = (flag, refresh) => {
		this.setState({
			otherLinkVisible: flag
		})
		if (refresh) {
			const {page} = this.state;
			this.getList(page);
		}
	}
	//统计
	statisticsy = (bool) => {

		this.setState({
			statistics: bool,
			myktid:null,
			mytitle:"",
		})

	}
	mystatisticsys = (bool,n) => {

		this.setState({
			statistics: bool,
			myktid:null,
			mytitle:"",
		})

	}

	render() {
		const {videos, upload, videoData, type, liveData, lives, page, liveVisible, isSpining, liveId, otherLinkVisible, statistics,myktid,mytitle} = this.state;
		const {coursesId, videoId} = this.props.match.params;
		let {course_identity} = this.props && this.props.coursedata;
		let is_teacher = this.props && this.props.user && this.props.user.is_teacher;
		const flag = parseInt(course_identity) < 5;
		const newOperation = flag;
		const new_upload = flag && (is_teacher && this.props.checkIfProfessionalCertification());
		let isAdmin = this.props&&this.props.isAdmin();

		return (
			<React.Fragment>
				<VideoLink
					coursesId={coursesId}
					videoId={videoId}
					visible={otherLinkVisible}
					notification={this.props.showNotification}
					setVisible={this.setLinkeVisible}
				></VideoLink>
				<LivesNew
					visible={liveVisible}
					liveId={liveId}
					setliveVisibel={this.setliveVisibel}
					{...this.props}
					{...this.state}
				></LivesNew>
				{
					liveVisible ?
						<style>{
							`
          body{
            width: calc(100% - 7px)!important;
            overflow: hidden!important;
          }
          .-task-sidebar{
            right:${getRight() + 7}px!important;
          }
          `}</style> :
						<style>{
							`
            body{
              width: 100%!important;
            }
            `}</style>
				}
				{
					statistics === false ?
						<div className="edu-back-white" style={{marginBottom: "1px"}}>

							<div className="clearfix pl30 pr30 menuDiv">
								{
									videoData && videoData.category_name && type === "video" ?
										<span className="font-18 fl color-dark-21 mt20 mb20">{videoData.category_name}</span>
										:
										<div className="task_menu_ul fl mt2" style={{width: "240px"}}>
											<Menu mode="horizontal" selectedKeys={[type]} onClick={this.changeType}>
												<Menu.Item key="video">视频</Menu.Item>
												<Menu.Item key="live">直播</Menu.Item>
											</Menu>
										</div>
								}
								<li className="fr mt20 mb20">
									{
										type === "video" ?
											<React.Fragment>
		                <span>
											{
												videoId ?
												  ""
													:videos&&videos.length>0?
													<WordsBtn style="blue" className="ml30 font-16 tongjis"
																		onClick={() => this.statisticsy(true)}
													><i className="iconfont icon-tongji1 mr5 font-14"></i>统计</WordsBtn>
													:""
											}

										</span>
												{
													newOperation ?
														<span>
															{
																videoId ?
																	<WordsBtn style="blue"
																						onClick={() => this.editDir(videoData && videoData.category_name, videoId)}
																						className={"ml30 font-16"}>目录重命名</WordsBtn>
																	:
																  <WordsBtn style="blue" className="ml30 font-16" onClick={this.addDir}>新建目录</WordsBtn>

															}
															<WordsBtn style="blue" className="ml30 font-16"
																				onClick={() => this.setLinkeVisible(true)}>增加外链</WordsBtn>
                      </span> : ""
												}
												{
													new_upload ?
														<span>
                        {
													upload ?
														<WordsBtn style="grey" className="font-16 ml30"
																			onClick={() => this.uploadVideo(false)}>取消</WordsBtn>
														:
														<WordsBtn style="blue" className="font-16 ml30" onClick={this.toUpload}>上传视频</WordsBtn>
												}
                      </span>
														: ""
												}




											</React.Fragment>
											:
											isAdmin===true?
												<WordsBtn style="blue" className="font-16 ml30" onClick={this.liveSetting}>添加直播</WordsBtn>
												:
												""
									}
								</li>
							</div>
						</div>
						:
						(
							myktid===null||myktid===undefined?
								<Videostatistics {...this.props} {...this.state} statisticsy={(b) => this.statisticsy(b)}></Videostatistics>
					    :
								<Videostatisticscomtwo  {...this.state} {...this.props} tisid={myktid} mytitle={mytitle} tisticsbools={(b,id)=>this.mystatisticsys(b,id)}></Videostatisticscomtwo>
						)




				}
				{
					statistics === false ?
						<Spin spinning={isSpining}>
							{
								type === "video" ?
									<Videos
										mykt={"mykt"}
										Setmyktid={(id,title)=>this.Setmyktid(id,title)}
										upload={upload}
										videos={videos}
										page={page}
										data={videoData}
										pageSize={PAGE_SIZE}
										uploadVideo={this.uploadVideo}
										listFunc={this.getList}
										changePage={this.changePage}
										{...this.props}
										{...this.state}
									></Videos>
									:
									<Lives
										lives={lives}
										liveData={liveData}
										page={page}
										pageSize={LIVE_PAGE_SIZE}
										successFunc={this.getLiveList}
										changePage={this.changePage}
										setLiveId={this.setLiveId}
										{...this.props}
										{...this.state}
									></Lives>
							}
						</Spin>
						:
						""
				}
			</React.Fragment>
		)
	}
}

export default VideoIndex;