import React,{ Component } from "react";
import { Modal,Checkbox,Upload,Button,Icon,message,Input,Radio} from "antd";
import { WordNumberTextarea } from 'educoder';
import axios from 'axios';

class AppraiseModal extends Component{
	constructor(props){
		super(props);
		this.state={
			group_ids:[],
			fileList:[],
			textareaval:undefined,
			Inputsval:undefined,
			valuetype:0,
			textareavaltype:false
		}
	}

	componentDidMount() {

		this.setState({
			valuetype:this.props.work_type===undefined?0:this.props.work_type,
			textareaval:this.props.work_comment,
		})

	}

	onChanges=(e)=>{
    this.setState({
			valuetype:e.target.value
		})
	}

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

	Saves=()=>{
		let{textareaval,valuetype}=this.state;

		if(textareaval===undefined||textareaval===null||textareaval===""){
			this.setState({
				textareavaltype:true
			})
			return
		}

		let url=`/student_works/${this.props.match.params.homeworkid}/shixun_work_comment.json`
		axios.post(url, {
			comment:textareaval,
			is_hidden:valuetype
		}).then((response) => {
     if(response.data.status===0){
			 this.props.showNotification(response.data.message)
			 this.props.showCancel(textareaval,valuetype)
		 }else{
			 this.props.showNotification(response.data.message)
		 }
		}).catch((error) => {
			console.log(error)
		});
	}

	render(){
		let {textareaval,Inputsval,textareavaltype,Inputsvaltype}=this.state;
		const radioStyle = {
			display: 'block',
			height: '30px',
			lineHeight: '30px',
		};

		return(
			<div>
				<Modal
					keyboard={false}
					className={"HomeworkModal"}
					title={this.props.work_comment===null||this.props.work_comment===undefined?"评阅":"编辑评阅"}
					visible={this.props.visible}
					closable={false}
					footer={null}
					destroyOnClose={true}
				>

					<div className={"pd015"}>
						<style>
							{
								`
								.pd015{
								    padding: 0px 15px 15px 15px;
								}
								.font{
								    width: 48px;
										height: 16px;
										font-size: 16px;
										font-weight: 400;
										color: rgba(5,16,26,1);
										line-height: 16px;
								}
								.newfont{
								    height: 16px;
										font-size: 16px;
										font-weight: 400;
										color: rgba(5,16,26,1);
										line-height: 16px;
										margin-bottom: 5px;
								}
								`
							}
						</style>
						<div className="clearfix">
							<p className={"font mt10 mb10"}>
								权限：
							</p>
							<Radio.Group onChange={this.onChanges} value={this.state.valuetype}>
								<Radio value={0} style={radioStyle} className={"newfont"}>可见  (学生查看老师的评阅内容）</Radio>
								<Radio value={1} style={radioStyle} className={"newfont"}>不可见  (仅对课堂老师可见）</Radio>
							</Radio.Group>

							<p className={"font mt10 mb20"}>
								内容：
							</p>
							<WordNumberTextarea
								placeholder={"请填写评阅内容"}
								onInput={(e)=>this.settextarea(e)}
								value={textareaval}
								maxlength={500}
							/>

							<li style={{height:"20px",lineHeight:"20px"}} className={textareavaltype===true?"color-red mt20 mb10":"none"}><span>评阅内容不能为空</span></li>
						</div>

						<div className={textareavaltype===false?"mt20 clearfix edu-txt-center":"clearfix edu-txt-center"}>
							<a  className="task-btn color-white mr30" 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 AppraiseModal;