import React,{ Component } from "react";
import { Modal,Checkbox,Upload,Button,Icon,message,DatePicker,Select,Tooltip,Radio,Input} from "antd";
import axios from 'axios';
import Modals from '../../modals/Modals';
import {getUploadActionUrl,handleDateString,appendFileSizeToUploadFileAll} from 'educoder';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
function range(start, end) {
	const result = [];
	for (let i = start; i < end; i++) {
		result.push(i);
	}
	return result;
}
function disabledDateTime() {
	return {
		// disabledHours: () => range(0, 24).splice(4, 20),
		disabledMinutes: () => range(1, 30).concat(range(31, 60)),
		// disabledSeconds: () => [0, 60],
	};
}

function disabledDate(current) {
	return current && current < moment().endOf('day').subtract(1, 'days');
}


const dateFormat="YYYY-MM-DD HH:mm";
class sendResources extends Component{
	constructor(props){
		super(props);
		this.state={
			group_ids:[],
			fileList:[],
			Modalstype:false,
			Modalstopval:"",
			ModalCancel:"",
			ModalSave:"",
			fileListtype:false,
			loadtype:false,
			is_public:false,
			datatime:undefined,
			resourcesname:"",
			resourceurl:"",
			addonAfteronelens3:0,
			// moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			course_group_publish_times:[
				{
					course_group_id : undefined,
					publish_time :""
				}],
			course_groups:undefined,
			course_groups_count:undefined,
			Radiovalue:0,
			Radiovaluetype:false,
			resourceurlbool:false,
			resourcesnamebool:false,
		}
	}


	componentDidMount() {
		let {discussMessageid} =this.props;
		try {
			this.setState({
				resourcesname:this.props.title,
				resourceurl:this.props.link,
				addonAfteronelens3:this.props.title.length,
			})
		}catch (e) {

		}
		console.log(discussMessageid);
		try {
			if(discussMessageid){
				this.getalldata();
			}
		}catch (e) {

		}


	}

	getalldata=()=>{
		let {discussMessageid} =this.props;
		let course_id=this.props.course_id;
		let url="/files/"+discussMessageid+".json";
		axios.get(url, {
				params:{
					course_id:course_id,
				}
			})
			.then((response) => {
				if(response.status===200){
					this.setState({
						datalist:response.data,
						description: response.data.description,
						is_public:response.data.is_public,
						datatime:response.data.publish_time,
						Radiovalue:response.data.delay_publish==false?0:1,
						//attachment_histories:response.data.attachment_histories
					})

				}
			})
			.catch(function (error) {
				console.log(error);
			});

	}
	//勾选实训
	shixunhomeworkedit=(list)=>{

		this.setState({
			group_ids:list
		})

	}
	// 附件相关 START
	handleChange = (info) => {
		console.log(info)

		if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
			let fileList = info.fileList;
			if (info.file.status != "removed") {
				this.setState({
					fileList: appendFileSizeToUploadFileAll(fileList),
					fileListtype: true
				});
			} else {
				this.setState({
					fileList: appendFileSizeToUploadFileAll(fileList),
				});
			}
		}
	}

	onAttachmentRemove = (file) => {
		if(!file.percent || file.percent == 100){
			const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
			axios.delete(url, {
				})
				.then((response) => {
					if (response.data) {
						const { status } = response.data;
						if (status == 0) {
							this.setState({
								fileListtype:false,
								fileList:[]
							})
						}

					}
				})
				.catch(function (error) {
					console.log(error);
				});
			this.setState({
				fileListtype:false,
			})
		}else{
			this.setState({
				fileListtype:false,
				fileList:[]
			})
		}
	}

	ModalCancelModalCancel=()=>{
		this.setState({
			Modalstype:false,
			Modalstopval:"",
			ModalSave:this.ModalCancelModalCancel,
			loadtype:false
		})
		this.props.Cancel()
	}
	Saves=()=>{


		let {resourcesname,resourceurl,description,is_public,datatime,Radiovalue} =this.state;
		const reg = /^[\s\S]*.*[^\s][\s\S]*$/;

		if (!reg.test(resourcesname)) {
			this.setState({
				resourcesnamebool:true
			})
			return;
		}
		if (!reg.test(resourceurl)) {
			this.setState({
				resourceurlbool:true
			})
			return;
		}



		if(this.state.Radiovalue===1){
			if(datatime===undefined||datatime===null||datatime=== ""){
				this.setState({
					Radiovaluetype:true
				})
				return
			}else{
				this.setState({
					Radiovaluetype:false
				})
			}
		}


		// console.log("description");
		// console.log(description);
		if(description===undefined||description===null){

		}else {
			if(description.length>100){

				this.setState({
					descriptiontype:true
				})
				return
			}


		}




		if(this.props.Exterchainname==="资源设置"){
			//设置
			let coursesId=this.props.match.params.coursesId;
			let attachmentId=this.props.attachmentId;
			let url="/files/"+this.props.discussMessageid+".json";

			axios.put(url,{
				name:resourcesname,
				link:resourceurl,
				course_id:coursesId,
				course_second_category_id:this.props.coursesidtype===undefined||this.props.coursesidtype==="node"?0:attachmentId,
				is_public:is_public,
				publish_time:Radiovalue===1?datatime===undefined? undefined:datatime:undefined,
				description:description,
				delay_publish:Radiovalue,
			}).then((result)=>{
				if(result){
					if(result.data){
						if(result.data.status===0){
							this.ModalCancelModalCancel();
							this.props.updataleftNavfun();
							this.props.showNotification("设置资源成功");
							this.props.setupdate(1,false)
						}else{
							this.props.showNotification(result.data.message);
						}
					}
				}
			})

		}else{
			let coursesId=this.props.match.params.coursesId;
			let attachmentId=this.props.attachmentId;
			let url="/files/upload.json";


			axios.post(url,{
				name:resourcesname,
				link:resourceurl,
				course_id:coursesId,
				course_second_category_id:this.props.coursesidtype===undefined||this.props.coursesidtype==="node"?0:attachmentId,
				is_public:is_public,
				publish_time:Radiovalue===1?datatime===undefined? undefined:datatime:undefined,
				description:description,
				delay_publish:Radiovalue,
			}).then((result)=>{
				if(result){
					if(result.data){
						if(result.data.status===0){
							this.ModalCancelModalCancel();
							this.props.updataleftNavfun();
							this.props.showNotification("上传资源成功");
							this.props.setupdate(1,false)
						}else{
							this.props.showNotification(result.data.message);
						}
					}
				}
			})
		}
	}

	settextarea=(e)=>{
		this.setState({
			description:e.target.value
		})
	}

	onChangepublic=(e)=>{

		this.setState({
			is_public:e.target.checked
		})

	}

	onChangeTimepublish= (date, dateString,key,type) => {
		if(type===1){
			this.setState({
				datatime:handleDateString(dateString),
			})
		}else if(type===2){
			let {course_group_publish_times}=this.state;
			let newgroup_publish=course_group_publish_times;
			for(var i=0; i<newgroup_publish.length; i++){
				if(i===parseInt(key)){
					newgroup_publish[i].publish_time=handleDateString(dateString);
				}
			}
			this.setState({
				course_group_publish_times:newgroup_publish,
			})
		}

	}

	RadioonChange=(e)=>{
		if(e.target.value===0){
			this.setState({
				datatime:undefined
			})
		}
		this.setState({
			Radiovalue: e.target.value,
		});
	}

	handleChanges=(e)=>{
		let les=e.target.value.length;

		if(e.target.value.length>=61){


		}else{
			this.setState({
				resourcesname:e.target.value,
				addonAfteronelens3:les,
				resourcesnamebool:false,

			})

		}

	}

	handleChangess=(e)=>{
		this.setState({
			resourceurl:e.target.value,
			resourceurlbool:false,
		})
	}



	render(){
		let { newfileListtype,descriptiontype,
			is_public,
			datatime,
			resourcesname,
			resourceurl,
			addonAfteronelens3,
			resourceurlbool,
			resourcesnamebool,
		}=this.state;

		const uploadProps = {
			width: 600,
			// showUploadList:false,
			action: `${getUploadActionUrl()}`,
			onChange: this.handleChange,
			onRemove: this.onAttachmentRemove,
			beforeUpload: (file) => {
				// console.log('beforeUpload', file.name);
				const isLt150M = file.size / 1024 / 1024 < 150;
				if (!isLt150M) {
					this.props.showNotification('文件大小必须小于150MB!');
				}
				return isLt150M;
			},
		};
		const radioStyle = {
			display: 'block',
			height: '30px',
			lineHeight: '30px',
		};



		return(
			<div>
				{/*提示*/}
				<Modals
					modalsType={this.state.Modalstype}
					modalsTopval={this.state.Modalstopval}
					modalCancel={this.state.ModalCancel}
					modalSave={this.state.ModalSave}
					loadtype= {this.state.loadtype}

				/>

				<Modal
					keyboard={false}
					className={"HomeworkModal"}
					title={this.props.modalname}
					visible={this.props.visible}
					closable={false}
					footer={null}
					destroyOnClose={true}
				>
					<div className="task-popup-content">
						<p className="task-popup-text-center font-16">

							<span className={"color-blue underline"}> </span>
						</p>

						<style>{`
                .uploadBtn.ant-btn {
                  border: none;
                  color: #4CACFF;
                  box-shadow: none;
                  background: transparent;
                  border:1px solid #4CACFF;
                  padding-left: 6px;
                  margin-right: 5px;
                }
                .ant-upload-list-item:hover .ant-upload-list-item-info{
                  padding: 0 12px 0 0px;
                  background-color:#fff;
                }
                .upload_1 .ant-upload-list {
                  width: 350px;
                }
                .ant-upload-select{
                  float: left;
                }

          			.winth540{
          			    width: 540px;
										height: 34px;
								}
								
								 .winth540 .ant-input-group-wrapper{
							    width: 86%  !important;

								 }
								 
								 	 .flexoo  .ant-input{
								 	 
								 	  width: 86%  !important;

								    }

              `}</style>

						<p className={"winth540"} style={{
							width: '100%',
							display: "flex",
							flexDirection:"row",
						}}>
							<span className="color-ooo fl mt6">资源名称：</span>
							<Input className="" placeholder="请输入资源名称，最大限制60字符"  value={resourcesname}  onChange={this.handleChanges} addonAfter={String(addonAfteronelens3)+"/60"}  maxLength={60} />


						</p>
						{
							resourcesnamebool?
								<p className=" color-red" style={{
									marginLeft: "13%"
								}}>请输入资源名称</p>
								:
								""
						}
						<p className={resourcesnamebool===true?"winth540 flexoo mt10":"winth540 flexoo mt16"} style={{
							width: '100%',
							display: "flex",
							flexDirection:"row",

						}}>
							<span className="color-ooo fl mt6">链接地址：</span>
							<Input className="" placeholder="请输入外链url"   value={resourceurl}   onChange={this.handleChangess}  />
						</p>
						{
							resourceurlbool?
								<p className=" color-red" style={{
									marginLeft: "13%"
								}}>请输入外链url</p>
								:
								""
						}


						<p className={this.state.fileListtype===true?"mt25":""}>
							<style>{`
                .ant-checkbox-wrapper{
                  margin-left:0px !important;
                  margin-top:10px;
                }
              `}</style>

							{this.props.course_is_public===true?<div>
								<span className={"color-ooo"}>公开：</span><Checkbox  checked={is_public} onChange={this.onChangepublic}>
								<span className={"font-14 color-ooo"}>选中，所有用户可见，否则课堂成员可见</span>
							</Checkbox>
							</div>:""}

							<style>{`
                .Selectleft20{
                   margin-left: 20px !important;
                   width: 176px;
                   height: 40px;
                }
               #startimes .ant-calendar-picker-icon{
                  margin-top:-11px;
                }
                .resourcebox{
                   max-height:150px;
                    overflow: auto;
                }
              `}</style>
						</p>


						<div className={this.props.course_is_public===true?"mt10":""}>
							<span className={"color-ooo fl mt6"}>发布设置：</span>
							<Radio.Group onChange={this.RadioonChange} value={this.state.Radiovalue} style={{'width': '460px'}}>
								<Radio style={radioStyle} value={0}>
									立即发布
								</Radio>
								<Tooltip placement="bottom" title={this.props.isStudent()===true?"不支持学生延迟发布":""}>
									<Radio style={radioStyle} value={1} className={"fl"} disabled={this.props.isStudent()}>
										<span className={"mr5"}>延期发布</span>
										<DatePicker

											dropdownClassName="hideDisable"
											showTime={{ format: 'HH:mm' }}
											locale={locale}
											format={dateFormat}
											placeholder="请选择发布时间"
											id={"startime"}
											showToday={false}
											width={"210px"}
											value={this.state.Radiovalue===1?datatime===undefined||datatime===""?undefined:moment(datatime, dateFormat):undefined}
											onChange={(e,index)=>this.onChangeTimepublish(e,index,undefined,1)}
											disabledTime={disabledDateTime}
											disabledDate={disabledDate}
											disabled={this.state.Radiovalue===1?false:true}
										/>
									</Radio>
								</Tooltip>
								<span className={"fl mt5 color-grey-c"}>(按照设置的时间定时发布)</span>
							</Radio.Group>
						</div>
						<div className="mt10" style={{
							width: '100%',
							display: "flex",
							flexDirection:"row",
						}}>
							<span className="color-ooo fl mt6">资源描述：</span>
							{/*{course_group_publish_timestype===true?<p className={"color-red mt10"}>请填写完整</p>:""}*/}
							<textarea  placeholder="请在此输入资源描述，最大限制100个字符" className={"mt10"} value={this.state.description} onInput={this.settextarea} style={{
								width: '86%',
								height:'120px',
								border:'1px solid rgba(234,234,234,1)',
								padding: '10px'
							}}></textarea>
						</div>

						{descriptiontype===true?<p className={"color-red"}>请输入资源描述，最大限制100个字符</p>:""}
						{this.state.Radiovaluetype===true?<p className={"color-red"}>发布时间不能为空</p>:""}
						<div className="clearfix mt30 edu-txt-center mb10">
							<a  className="task-btn color-white mr70" onClick={this.props.Cancel}>{this.props.Cancelname}</a>
							<a className="task-btn task-btn-orange" onClick={()=>this.Saves()}>{this.props.Savesname}</a>
						</div>

					</div>
				</Modal>
			</div>
		)
	}
}
export default sendResources;
