import React, {Component} from "React";
import {Form, Select, Input, Button, Checkbox, DatePicker,Spin,Icon,AutoComplete,InputNumber} from "antd";
import ApplyForAddOrgModal from '../../user/modal/ApplyForAddOrgModal';
import axios from 'axios';
import "../css/Courses.css";
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Modals from '../../modals/Modals';



const { Option } = Select;


const dateFormat = 'YYYY-MM-DD';

function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

function disabledDateTime() {
    return {
        disabledMinutes: () => range(1, 30).concat(range(31, 60)),
    };
}

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

class CoursesNew extends Component {

    constructor(props) {
        super(props)
        this.state = {
            coursedata: undefined,
            searchlist: [],
            searchlistscholl:[],
            listvalue: undefined,
            fetching:false,
            boolxinjian:false,
        }
    }

    componentDidMount() {


        let coursesId = this.props.match.params.coursesId;
        let user_school=this.props.current_user&&this.props.current_user.user_school;
				// this.getschool("")
				// this.Searchvalue("")
        if (coursesId != undefined) {
            let url = "/courses/" + coursesId + "/settings.json"
            axios.get(url).then((result) => {

                    let data = result.data;
                    this.props.form.setFieldsValue({
                        course: data.course_list_name,
                        classroom: data.name,
                        period: data.class_period,
                        credit: data.credit,
                        checkboxgroup: data.course_module_types,
                        Realnamecertification: data.authentication,
                        Professionalcertification:data.professional_certification,
                        endtime: data.end_date === undefined ? "" : moment(data.end_date, dateFormat),
                        school:data.school

                    });

                    this.setState({
                        datatime: data.end_date,
                        is_public: data.is_public === 1 ? true : false,
                        Realnamecertification: data.authentication,
                        Professionalcertification:data.professional_certification,
                    })
                   this.handleSearchschool(data.school);
            }).catch((error) => {
                console.log(error);
            })
            this.setState({
                boolxinjian:false,
            });
        }else{
					let url = "/courses/new.json"
					axios.get(url).then((result) => {
						 console.log(result)
					}).catch((error) => {
						console.log(error);
					})
            // console.log(user_school);
            this.props.form.setFieldsValue({
                school:user_school,
            });
            this.setState({
                school:user_school,
            });
            this.handleSearchschool(user_school);

            this.setState({
                boolxinjian:true,
            });
        }


    }
    componentDidUpdate(prevProps) {
        if(prevProps.current_user !== this.props.current_user){
            let user_school=this.props.current_user&&this.props.current_user.user_school;
            this.props.form.setFieldsValue({
                school:user_school,
            });
            this.setState({
                school:user_school,
            });
            this.handleSearchschool(user_school);
        }
    }
    onChangeTimepublishs = (date, dateString) => {
        if(dateString===""){
            this.setState({
                datatime: undefined,
            })
        }else{
            this.setState({
                datatime: dateString,
            })
        }
    }

    cancelmodel = () => {

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

    }

    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);
        }
    }


    handleSubmit = (e) => {

        e.preventDefault();
			  let first_category_url=this.props.current_user.first_category_url;
        let coursesId = this.props.match.params.coursesId;
        let {is_public,datatime} = this.state
        // console.log(is_public)
        if (coursesId != undefined) {
            // 编辑

            this.props.form.validateFields((err, values) => {

                if(values.course===""||values.course===undefined){
                    this.scrollToAnchor("iscourse")
                    return

                }
                if(values.classroom===""||values.classroom===undefined){
                    this.scrollToAnchor("isclassroom")
                    return
                }

                if(values.school===""||values.school===undefined){
                    // this.scrollToAnchor("isschool")
                    return

                }

								if(values.checkboxgroup.length===0){
									this.setState({
										Modalstype:true,
										Modalstopval:"请您至少添加一个课堂模块，",
										ModalsBottomval:"否则您将无法新建课堂。",
										Loadtype:true,
									   ModalSave:()=>this.cancelmodel(),
									})
									return
								}


                if (!err) {



                    // console.log('Received values of form: ', values);

                    let url = "/courses/" + coursesId + ".json";
                    axios.put(url, {
                            course_list_name: values.course,
                            name: values.classroom,
                            class_period: values.period,
                            credit: parseFloat(values.credit),
                            end_date: datatime===undefined?"":datatime,
                            is_public: is_public === true || is_public === 1 ? 1 : 0,
                            course_module_types: values.checkboxgroup,
                            authentication: this.state.Realnamecertification,
                            professional_certification: this.state.Professionalcertification,
                            school:values.school
                        }
                    ).then((response) => {
                            // debugger
                        if (response.data.status === 0) {
													// this.goback()

													window.location.href=first_category_url;
                            if(this.state.boolxinjian===true) {
                                var yslGuideone = window.localStorage.getItem('yslGuideone');
                                try {
                                    if (yslGuideone === null) {
                                        window.localStorage.setItem('yslGuideone', "true");
                                        return
                                    }
                                    if (yslGuideone === undefined) {
                                        window.localStorage.setItem('yslGuideone', "true");
                                        return
                                    }
                                } catch (e) {

                                }
                            }

                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            });
        } else {
            this.props.form.validateFields((err, values) => {

                if(values.course===""||values.course===undefined){
                    this.scrollToAnchor("iscourse")
                    return
                }
                if(values.classroom===""||values.classroom===undefined){
                    this.scrollToAnchor("isclassroom")
                    return
                }
                if(values.school===""||values.school===undefined){
                    // this.scrollToAnchor("isschool")
                    return

                }
                if (!err) {
                    // debugger
                    //新建
                    // console.log('Received values of form: ', values);

                    let url = "/courses.json";
                    axios.post(url, {
                            course_list_name: values.course,
                            name: values.classroom,
                            class_period: values.period,
                            credit: parseFloat(values.credit),
                            end_date: datatime===undefined?"":datatime,
                            is_public: is_public === true || is_public === 1 ? 1 : 0,
                            course_module_types: values.checkboxgroup,
                            authentication: this.state.Realnamecertification,
                            professional_certification: this.state.Professionalcertification,
                            school:values.school
                        }
                    ).then((response) => {
                        if (response.status === 200) {
													// this.goback
													window.location.href=response.data.first_category_url;
													if(this.state.boolxinjian===true){
                              var yslGuideone = window.localStorage.getItem('yslGuideone');
                              try {
                                  if(yslGuideone=== null){
                                      window.localStorage.setItem('yslGuideone', "true");
                                      return
                                  }
                                  if(yslGuideone=== undefined){
                                      window.localStorage.setItem('yslGuideone', "true");
                                      return
                                  }
                              }catch (e) {

                              }

                          }

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

    }

    goback = () => {

       // if(this.props.match.params.coursesId===undefined){
				//  this.props.history.push("/courses");
			 // }else{
				//  this.props.history.push(this.props.current_user.first_category_url);
			 // }
        // window.history.go(-1)
			this.props.history.goBack()
    }

    onCheckAllChange = (e) => {
        // console.log(e.target.checked)
        this.setState({
            is_public: e.target.checked == true ? 1 : 0,
        });
    }
    onchanges =(e)=>{
        this.setState({
            Realnamecertification:e.target.checked,
        })
        // console.log(e.target.checked);
    }
    onchangess=(e)=>{
        this.setState({
            Professionalcertification:e.target.checked,
        })
        // console.log(e.target.checked);
    }
    Searchvalue=(value)=>{

        let url="/courses/search_course_list.json";
        axios.post(url,{
            search:value
        }).then((result)=>{
            // console.log(result.data)
					if (result.data.message===undefined) {

						this.setState({
							searchlist: result.data.course_lists,
							 // course:value,

						})
					}
            // this.props.form.setFieldsValue({
            //     course:value
            // })
        }).catch((error)=>{
            console.log(error)
        })
    }
	handleSearch=(value)=>{


		if(value!=""){
			this.props.form.setFieldsValue({
				classroom:value,
			  // course:value
			});
			this.Searchvalue(value)
		}

    };

    handleChange=(value)=>{

        this.props.form.setFieldsValue({
					  // course:value,
            classroom:value
        })
    };

    handleSearchschool=(value)=>{

			if(value!="") {
				// this.props.form.setFieldsValue({
				// 	// school: value,
				// 	fetching: true,
				// });
				this.setState({
					fetching: true,
					school: value
				})
				this.getschool(value)
			}
    };

		handleChangeschools=(value)=>{

			// this.props.form.setFieldsValue({
			// 	// school: value,
			// 	fetching: true,
			// });
			// this.setState({
			// 	fetching: true
			// })
		}

    handleChangeschool=(value)=>{

        this.setState({
            school:value
        });
        this.props.form.setFieldsValue({
            school:value,
        })
    };

    getschool=(value)=>{
				// this.props.form.setFieldsValue({
				// 	school: value
				// })
        let url="/schools/school_list.json";
        axios.get(url,{
            params: {
                search: value
            }
        }).then((result)=>{
					if (result.data.status===0) {
						this.setState({
							searchlistscholl: result.data.school_names,

						})
						if(result.data.school_names.length!=0){
							this.setState({
								fetching: false
							})
						}
					}
        }).catch((error)=>{
            console.log(error)
        })
    }
		showApplyForAddOrgModal = () => {
			this.applyForAddOrgForm.setVisible(true)
		}
    render() {
        let {datatime,school,searchlistscholl} = this.state;
        const {getFieldDecorator} = this.props.form;
				const propsWithoutForm = Object.assign({}, this.props)
				delete propsWithoutForm.form
        const options = this.state.searchlist && this.state.searchlist.map(d => <Option key={d.name} value={d.name}>{d.name}</Option>);
        const optionschool  = this.state.searchlistscholl===undefined?"":this.state.searchlistscholl===null?"":this.state.searchlistscholl==="[]"?"":this.state.searchlistscholl.map(z => <Option key={z} value={z}>{z}</Option>);
        // console.log(this.props.current_user.user_school)
				// form合并了
        console.log("获取到的数据");
        console.log(this.state);
        console.log(this.props);
        console.log(this.props.current_user);
        return (
            <React.Fragment>

                <div>
									<style>
										{
											`

											.color-green-light {
													color: #45E660!important;
											}

											`
										}
									</style>
									<ApplyForAddOrgModal ref="applyForAddOrgModal" wrappedComponentRef={(form) => this.applyForAddOrgForm = form}  schoolName={school}
																			 {...propsWithoutForm}></ApplyForAddOrgModal>
                    {/*提示*/}
                    <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}
                    />
                    <div className="newMain clearfix">
                        <div className={"educontent mb20"}>
                            <div style={{width: '100%', height: '70px'}}>
                                <p className="ml15 fl color-black mt30 summaryname">{this.props.match.params.coursesId === undefined ? "新建课堂" : "编辑课堂"}</p>
                                <a onClick={this.goback} className="color-grey-6 fr font-16 ml30 mt18 mr20">返回</a>
                            </div>
                            <style>
                                {`
                                .ant-col-12{
                                  width:800px;
                                }
                               `}
                            </style>

                            <Form onSubmit={this.handleSubmit} className={"edu-back-white newcourses"}>
                                {/*内容*/}
                                <style>
                                    {`
                                        .ant-select-dropdown{
                                          // top: 221px !important;
                                          // left: 115px !important;
                                          width: 280px !important;
                                          height: 160px;
                                        }
                                      .ant-select-dropdown-menu{
                                            width: 280px !important;
                                            height: 160px;
                                        }
                                        .construction .ant-input{
                                            width: 280px !important;
                                            margin-left: 0px !important;
                                        }
                                       .construction {
                                            width: 280px;
   																				  margin-left: 10px;
                                        }

                                       .construction .ant-select-selection__placeholder, .ant-select-search__field__placeholder {
                                           line-height: 28px;
																					 z-index: 2000;
                                        }
                                    `}
                                </style>

                                <div className="stud-class-set bor-bottom-greyE padding10200 ">
                                    <div className={"TabsWarpcourse"}>
                                    <Form.Item label="课程名称">
                                        {getFieldDecorator('course', {
                                            rules: [{required: true, message: "不能为空"}],
                                        })(

																					<AutoComplete style={{ width: 280 }}
																					onSearch={this.handleSearch}
																					onChange={this.handleChange}
																					className={"fl construction "}
																					placeholder="例如：数据结构"
																					>
																				   {options}
																					</AutoComplete>
                                            )}
                                        <span  className={"newcoursestitle fl"}>
                                            {/*（错误示例：数据结构2017本部；数据结构2017秋季；数据结构2017电子商务1班）*/}
                                                <p className="ant-progress-text">
																									<Icon  style={{ color: '#52c41a' }} type="check-circle" theme="filled"/>
																									<span className={"color-grey-9 font-12 ml5"}>正确示例：数据结构</span>
                                                </p>
                                                <p className="ant-progress-text">
																									 <Icon style={{ color: 'red' }} theme="filled" type="close-circle"/>
                                                   <span className={"color-grey-9 font-12 ml5"}>错误示例：数据结构2019春</span>
                                                </p>
                                        </span>
                                        <div id='iscourse'></div>
                                    </Form.Item>
                                    </div>

                                </div>

                                <style>
                                    {
                                        `
                                        .ml19{
                                          margin-left:19px;
                                          }                                        }
                                        `
                                    }
                                </style>
                                <div className="stud-class-set bor-bottom-greyE  padding1020 ">

                                    <Form.Item label="课堂名称">
                                        {getFieldDecorator('classroom', {
                                            rules: [{required: true, message: "不能为空"}],
                                        })(<Input className={"greyInput fl"} placeholder="例如：数据结构2016秋季班级"/>)}
                                        <span className={"newcoursestitle fl"}>
                                            {/*（如果本学期包含多个班级，只需创建一个课堂然后在课堂内部建立不同的分班）*/}
                                                <p className="ant-progress-text">
                                                  	<Icon  style={{ color: '#52c41a' }} type="check-circle" theme="filled"/>
                                                    <span className={"color-grey-9 font-12 ml5"}>正确示例：数据结构2019春季班级</span>
                                                </p>
                                                <p className="ant-progress-text">
                                              	   <Icon style={{ color: 'red' }} theme="filled" type="close-circle"/>
                                                   <span className={"color-grey-9 font-12 ml5"}>错误示例：2019春季班级数据结构</span>
                                                </p>
                                        </span>
                                        <div id='isclassroom'></div>
                                    </Form.Item>


                                </div>

                                <div className="stud-class-set bor-bottom-greyE padding1020 coursenavbox coursenavboxtow yslinputcourput">
                                    <style>
                                        {`
                                          .ant-form-item{
                                              margin-bottom: 10px !important;
                                          }
                                        `}
                                    </style>
                                    <Form.Item
                                        label="总学时"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("period",
                                          {
                                              rules:[{
                                                  required:false,
                                                  pattern: new RegExp(/^[0-9]\d*$/, "g"),
                                                  message: ''
                                              }],
                                              getValueFromEvent: (event) => {
                                                  return event.target.value.replace(/\D/g,'')
                                              }}
                                        )(
                                            <Input id="period" className="greyInput " placeholder="例如：30"/>
                                        )}
                                    </Form.Item>

                                    <Form.Item
                                        label="学分"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("credit",
                                          {
                                              rules:[{
                                                  required:false,
                                                  pattern: new RegExp(/^[0-9]\d*$/, "g"),
                                                  message: ''
                                              }],
                                              getValueFromEvent: (event) => {
                                                  return event.target.value.replace(/\D/g,'')
                                              }}
                                        )(
                                            <Input id="credit"  className={"greyInput "} placeholder="例如：3"/>
                                        )}
                                    </Form.Item>
                                    <Form.Item
                                        label="结束时间"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("endtime")(
                                            <span className="fl mt5">
                                                    <DatePicker
                                                        showToday={false}
                                                        placeholder="请选择结束时间"
                                                        // showTime={{format: 'HH:mm'}}
                                                        locale={locale}
                                                        format={dateFormat}
                                                        width={"210px"}
                                                        value={datatime === undefined ? "" :datatime === null ? "" : moment(datatime, dateFormat)}
                                                        disabledTime={disabledDateTime}
																												disabledDate={disabledDate}
                                                        dropdownClassName="hideDisable"
                                                        onChange={this.onChangeTimepublishs}
                                                    />
                                            </span>
                                        )}
                                    </Form.Item>
                                </div>

                                <div className="stud-class-set bor-bottom-greyE padding10200 coursenavbox">
                                    <Form.Item
                                        label="课堂模块"
                                        hasFeedback
                                    >

                                        {getFieldDecorator("checkboxgroup", {
                                            initialValue: [
                                                "shixun_homework", "common_homework", "group_homework", "exercise", "attachment", "course_group",
                                            ],
                                        })(
                                            <Checkbox.Group style={{width: "800px", marginTop: "10px"}}>
                                                <Checkbox value={"shixun_homework"} className="fl">实训作业</Checkbox>
                                                <Checkbox value={"common_homework"} className="fl">普通作业</Checkbox>
                                                <Checkbox value={"group_homework"} className="fl">分组作业</Checkbox>
                                                <Checkbox value={"exercise"} className="fl">试卷</Checkbox>
                                                <Checkbox value={"attachment"} className="fl">资源</Checkbox>
                                                <Checkbox value={"course_group"} className="fl">分班</Checkbox>
                                                <Checkbox value={"graduation"} className="fl">毕业设计</Checkbox>
                                                <Checkbox value={"poll"} className="fl">问卷</Checkbox>
                                                <Checkbox value={"board"} className="fl">讨论</Checkbox>
                                            </Checkbox.Group>
                                        )}
                                    </Form.Item>
                                </div>
                                <div className="stud-class-set bor-bottom-greyE padding10200 coursenavbox  height100px" >
                                    <span  className={"fl"}>
                                    <Form.Item
                                        label="加入课堂条件"
                                        style={{margin: 0}}
                                    >
                                        {getFieldDecorator("Realnamecertification")(
                                            <Checkbox checked={this.state.Realnamecertification} onChange={this.onchanges}>已实名认证</Checkbox>
                                            // <Checkbox.Group style={{ width: "800px",marginTop: "10px"}}>
                                            //   <Checkbox value={"authentication"} className="fl">已实名认证</Checkbox>
                                            //   <Checkbox value={"professional_certification"} className="fl">已职业认证 <span className="ml30" > (勾选，则通过邀请码加入课堂的用户,需要完成相关认证才能加入课堂)</span></Checkbox>
                                            // </Checkbox.Group>
                                        )}
                                    </Form.Item>
                                    </span>
                                    <span className={"fl mt40"}>
                                    <Form.Item
                                        label=""
                                    >
                                        {getFieldDecorator("Professionalcertification")(
                                            <Checkbox checked={this.state.Professionalcertification}   onChange={this.onchangess}>已职业认证<span
                                                className="coursesselects"> (勾选，则通过邀请码加入课堂的用户,需要完成相关认证才能加入课堂)</span></Checkbox>
                                        )}
                                    </Form.Item>
                                   </span>
                                </div>
                                <div className="stud-class-set padding10200 coursenavbox bor-bottom-greyE">
                                    <Form.Item
                                        label="公开设置"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("publicclass")(
                                            <Checkbox id="publicclass"
                                                      onChange={this.onCheckAllChange}
                                                      checked={this.state.is_public}
                                                      className="fl">公开课堂</Checkbox>
                                        )}
                                        <span className={"coursesselect"}>（选中后本课堂对所有用户可见，否则仅本课堂成员可见）</span>
                                    </Form.Item>
                                </div>

															<div className="stud-class-set padding10200 mb20">
																<Form.Item label="课堂所属单位">
																	{getFieldDecorator('school', {
																		rules: [{required: true, message: "不能为空"}],
																	})(
																		<AutoComplete style={{ width: 280 }}
																		onSearch={this.handleSearchschool}
																		// onChange={this.handleChangeschools}
																		className={"fl construction mr10 "}
																		placeholder="请输入并选择课本堂的所属单位"
																		>
																	  {optionschool}
																		</AutoComplete>
																	)}
																	<span  className={"newcoursestitle fl"}>
																					{/*（输入内容出现匹配的下拉菜单←同账号管理的单位信息填写）*/}
                                        </span>
																	<div id='isschool'></div>
																</Form.Item>

																{searchlistscholl.length===0&&this.state.fetching===true?<div style={{height:"20px",lineHeight:"20px"}} className="ml20">
																			<span>
																				<span style={{color: '#CDCDCD'}}>未找到包含“{school}”的高校，</span>
																				<span style={{color: '#4CACFF', cursor: 'pointer'}} onClick={this.showApplyForAddOrgModal}>申请新增</span>
																			</span>
																</div>:""}

															</div>



                                <div className={"FAFAFA"}>
                                <Form.Item >
                                    <div className="clearfix mt40 mb30">
                                        <Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20">
                                            提交
                                        </Button>
                                        {/*<a className="defalutSubmitbtn fl mr20">提交</a>*/}
                                        <a className="defalutCancelbtn fl" onClick={this.goback}>取消</a>
                                    </div>
                                </Form.Item>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>

            </React.Fragment>

        )
    }
}

const WrappedCoursesNewApp = Form.create({name: 'coursesNew'})(CoursesNew);
export default WrappedCoursesNewApp;