import React,{ Component } from "react";
import { WordsBtn,ActionBtn,getmyUrl } from 'educoder';
import {Tooltip,message,Input, Button} from 'antd';
import {Link} from 'react-router-dom';
import axios from 'axios'
import moment from 'moment'
import CoursesListType from '../coursesPublic/CoursesListType';
import Showoldfiles from "../coursesPublic/Showoldfiles";
import Modals from '../../modals/Modals';
import HeadlessModal from '../../user/usersInfo/common/HeadlessModal'
import ClipboardJS from 'clipboard'
import  '../../user/usersInfo/video/InfosVideo.css'
let _clipboard = null;
class Fileslistitem extends Component{
	constructor(props){
		super(props);
		this.state = {
			videoModalObj:false,
			file_url:null,
		}
	}
	setVisible=(bool)=>{
		this.setState({
			videoModalObj:bool
		})
	}

	settingList=()=>{
		let {discussMessage}=this.props

		this.setState({
			discussMessageid:discussMessage.id
		})
		this.props.Settingtypes(discussMessage.id)
	}

	showfiles=(list)=>{
		// console.log("showfiles");
		// console.log(list);

		if(this.props.checkIfLogin()===false){
			this.props.showLoginDialog()
			return
		}
		// if(this.props.checkIfProfileCompleted()===false){
		// 	this.setState({
		// 		AccountProfiletype:true
		// 	})
		// 	return
		// }
		// if(this.props.checkIfProfessionalCertification()===false){
		// 	this.props.showProfileCompleteDialog()
		// 	return
		// }

		if(list.is_history_file===false){
			// this.props.DownloadFileA(list.title,list.url)
			//window.location.href=list.url;
			if(list.content_type){
				if(list.content_type==="video/mp4"){
					this.setState({
						videoModalObj:true,
						file_url:getmyUrl(list.url+'?file_name='+list.title),
					})
					return
				}else{
					window.open(list.url, '_blank');
				}

			}else{
				window.open(list.url, '_blank');
			}
		}else{
			let {discussMessage,coursesId}=this.props
			let file_id=discussMessage.id
			let url="/files/"+file_id+"/histories.json"
			axios.get(url,{
				params:{
					course_id:coursesId
				},
			}).then((result)=>{

				if(result.data.attachment_histories.length===0){
					// if(result.data.is_pdf===true){
					// 	this.props.ShowOnlinePdf(result.data.url)
					// 	//预览pdf
					// }else{
					//
					// }
					// this.props.DownloadFileA(result.data.title,result.data.url)
					if(list.content_type){
						if(list.content_type==="video/mp4"){
							this.setState({
								videoModalObj:true,
								file_url:getmyUrl(list.url+'?file_name='+list.title),
							})
							return
						}else{
							window.open(list.url, '_blank');
						}

					}else{
						window.open(list.url, '_blank');
					}


				}else{
					this.setState({
						Showoldfiles:true,
						allfiles:result.data
					})
				}


			}).catch((error)=>{
				console.log(error)
			})
		}

	}

	closaoldfilesprops=()=>{
		this.setState({
			Showoldfiles:false,
		})
	}

	Clicktobroadcastthevideo=(bool,url)=>{
			this.setState({
									videoModalObj:bool,
									file_url:getmyUrl(url),
		})
	}




	onDelete = (id) => {

		this.setState({
			Modalstype:true,
			Modalstopval:"是否确认删除?",
			ModalCancel:this.cancelmodel,
			ModalSave:()=>this.savedelete(id),
		})

	}

	cancelmodel=()=>{

		this.setState({
			Modalstype:false,
			Loadtype:false,
			Modalstopval:"",
			ModalCancel:"",
			ModalSave:"",
			checkBoxValues:[],
		})

	}

	copyurls =()=>{
		//复制网络链接
		setTimeout(() => {
			if (!_clipboard) {
				_clipboard = new ClipboardJS('.copybtn');
				_clipboard.on('success', (e) => {
					this.props.showNotification("复制成功");
				});
			}
		}, 200)
	}
	savedelete=(id)=>{

		this.setState({
			Modalstype:false,
		})


		const cid = this.props.match.params.coursesId
		const url = `/files/bulk_delete.json`;
		axios.delete(url, { data: {
					course_id:cid,
					ids: [id],
				}})
			.then((response) => {
				if (response.data.status == 0) {
					//Modalstopval:response.data.message,

					this.props.updatafiledfun()
					this.setState({
						// Modalstype:true,
						// Modalstopval:"删除成功",
						ModalsBottomval:"",
						// ModalSave:this.cancelmodel,
						// Loadtype:true,
						checkBoxValues:[],
						checkAllValue:false
					})

					this.props.showNotification("删除成功");
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}

	eventStop = (event) =>{
		event.stopPropagation()
	}

	render(){
		const {videoModalObj,file_url}=this.state
		const { checkBox,
			discussMessage,index
		} = this.props;
		console.log("Fileslistitem");
		console.log(file_url);
		return(
			<div className="graduateTopicList boardsList">
				{
					videoModalObj&&videoModalObj===true?
						<HeadlessModal
							visible={videoModalObj}
							setVisible={(bool)=>this.setVisible(bool)}
							className="showVideoModal"
							width={800 - 1}
						>
							<video
								autoplay="true"
								src={file_url} controls="true" controlslist="nodownload">
								您的浏览器不支持 video 标签。
							</video>
							{/*<div className="df copyLine">*/}
							{/*	<Input value={file_url}*/}
							{/*				 className="dark"*/}
							{/*	></Input>*/}
							{/*	<ActionBtn className="copybtn" data-clipboard-text={file_url} onClick={() =>this.copyurls()}>复制视频地址</ActionBtn>*/}
							{/*</div>*/}
						</HeadlessModal>

						:""
				}

				{/*提示*/}
				{this.state.Modalstype&&this.state.Modalstype===true?<Modals
					modalsType={this.state.Modalstype}
					modalsTopval={this.state.Modalstopval}
					modalCancel={this.state.ModalCancel}
					modalSave={this.state.ModalSave}
					modalsBottomval={this.state.ModalsBottomval}
					loadtype={this.state.Loadtype}
				/>:""}
				<Showoldfiles
					{...this.props}
					visible={this.state.Showoldfiles}
					allfiles={this.state.allfiles}
					Clicktobroadcastthevideo={(bool,urls)=>this.Clicktobroadcastthevideo(bool,urls)}
					closaoldfilesprops={this.closaoldfilesprops}
				/>
				<style>{`
            .graduateTopicList .ant-checkbox-input {
              margin-right: 15px;
            }
            .graduateTopicList .ant-checkbox-wrapper {
              margin-top: 0px;
            }
          `}</style>


				<style>{`
            .boardsList .panel-list-img {
              width: 50px;
              height: 50px;
            }
          `}</style>
				{/*<a href={"/users/"+this.props.user.login} alt="用户"*/}
				{/*style={{"width": "50px", "height": "50px", "display": "block", margin: "0 10px"}}>*/}
				{/*<img*/}
				{/*alt="1?1529221779" className="panel-list-img mr15" height="50"*/}
				{/*src={getImageUrl("images/"+discussMessage.author.image_url)} width="50"*/}
				{/*></img>*/}
				{/*</a>*/}

				<style>{`
            .boardsList .contentSection{
              margin-left:0px;
            }
            .maxwidth580{
                max-width: 580px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
            }
            .mt2{
             margin-top:2px;
            }
          `}</style>
				<div className="clearfix ds pr contentSection" style={{cursor : this.props.isAdmin ? "pointer" : "default"}} onClick={() => window.$(`.sourceitem${index} input`).click() }>
					<h6 onClick={(event)=>this.eventStop(event)}>
		        	<span className={`sourceitem${index} fl mr12 mt3`}>
								{checkBox}
							</span>
						{
							this.props.isAdmin ? <a
								// href={"/courses/" + coursesId + "/graduation/graduation_tasks/" + categoryid + "/" + taskid + "/list"}
								onClick={()=>this.showfiles(discussMessage)}
								title={discussMessage.title}
								className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> : ""
						}
						{
							this.props.isStudent?  <a
								onClick={()=>this.showfiles(discussMessage)}
								title={discussMessage.title}
								className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> :""
						}

						{
							this.props.isNotMember===true?
								discussMessage.is_lock === true ?
									<span className="fl mt3 font-16 font-bd color-dark maxwidth580 pointer"  title={"私有属性，非课堂成员不能访问"}>{discussMessage.title}</span>
									:<a
										onClick={()=>this.showfiles(discussMessage)}
										title={discussMessage.title}
										className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a>:""
						}


						{
							discussMessage.is_lock === true ?
								<Tooltip  title={"私有属性，非课堂成员不能访问"}  placement="bottom">
									<i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
								</Tooltip>
								:""
						}
						{discussMessage.is_publish===false?<CoursesListType typelist={["未发布"]} typesylename={""}/>:""}

						{this.props.isAdmin?
							<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>
                      <WordsBtn style="blue" className="colorblue font-16 ml20 fr">
                          <a className="btn colorblue fontweight400"
														 onClick={()=>this.settingList()}>设置</a>
                        </WordsBtn>
                      </span>:""}

						{this.props.isStudent===true&&this.props.current_user.login===discussMessage.author.login?
							<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>

                      <WordsBtn style="blue" className="colorblue font-16 ml20  fr">
                        <a className="btn colorblue fontweight400"
													 onClick={()=>this.settingList()}>设置</a>
                      </WordsBtn>

										  <WordsBtn style="blue" className="colorblue font-16 ml20 fr">
                        <a className="btn colorblue fontweight400"
													 onClick={()=>this.onDelete(discussMessage.id)}>删除</a>
                      </WordsBtn>

                      </span>:""}
					</h6>
					<style>
						{
							`
                    .sttingbox{
                        position: absolute;
                        right: 0px;
                        top: 20px;
                    }
                    `
						}
					</style>



					<style>
						{
							`
                       .lightgreybox{
                          min-width: 260px;
                       }
                       .mrf2{
                       margin-top: -2px;
                       }
                      `
						}
					</style>
					{/*资源分班*/}
					{/*{discussMessage.course_groups.length===0?"":*/}
					{/*<p className="color-grey panel-lightgrey mt8 fl lightgreybox ml30" style={{width:'100%'}}>*/}
					{/*{discussMessage.course_groups.map((item,key)=>{*/}
					{/*return(*/}
					{/*<div className="mr50">*/}
					{/*<span className="mr15 color-dark">{item.course_group_name}</span>*/}
					{/*<span className="mr15 color-grey9 ">将发布于 { moment(item.course_group_publish_time).format('YYYY-MM-DD HH:mm')}</span>*/}
					{/*</div>*/}
					{/*)*/}
					{/*})}*/}

					{/*</p>}*/}

					<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'100%'}}>
                      <span className="mr50">
                        <span className="mr15 color-dark">{discussMessage.author.name}</span>
                        <span className="mr15 color-grey9">大小 {discussMessage.filesize}</span>
                        <span className="mr15 color-grey9">下载 {discussMessage.downloads_count}</span>
												{/*<span className="mr15 color-grey9">引用 {discussMessage.quotes}</span>*/}
												<span className="mr15 color-grey-c">
                            {/*{moment(discussMessage.publish_time).format('YYYY-MM-DD HH:mm:ss')}*/}
													{/*{moment(discussMessage.publish_time).fromNow()}*/}
													{ discussMessage.publish_time===null?"":
														discussMessage.is_publish===true?"":"发布于"}
													{ discussMessage.publish_time===null?"":discussMessage.is_publish===true?moment(discussMessage.publish_time).fromNow():moment(discussMessage.publish_time).format('YYYY-MM-DD HH:mm')}
                        </span>
                      </span>
						{discussMessage&&discussMessage.category_name===null?"":this.props.child===false?<div className="color-grey9 task-hide fr mr30" title={discussMessage&&discussMessage.category_name}
																																																	style={{"max-width":"268px"}}>所属目录：{discussMessage&&discussMessage.category_name}
						</div>:""}
					</p>



					<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'94%'}}>
						<style>
							{
								`
													 .isspans{
													     text-align: left;
																white-space: pre-wrap;
																word-break: break-all;
																overflow-wrap: break-word;
													 }
													`
							}
						</style>
						<span className="color-dark isspans">资源描述 :{discussMessage.description===null?"暂无描述":discussMessage.description}</span>
						{/*<span className="mr50">*/}
						{/*/!*<span className="mr15 color-dark"></span>*!/*/}
						{/*<span  className="mr15 color-dark">*/}

						{/*</span>*/}
						{/*/!*{this.props.isAdmin ?<span><i className="iconfont icon-bianjidaibeijing font-22 color-green"  onClick={()=>this.settingList()}></i></span>:""}*!/*/}
						{/*</span>*/}
					</p>


				</div>
			</div>
		)
	}
}
export default Fileslistitem;