import React, {Component} from "React";
import {Form, Select, Input, Button, Checkbox, DatePicker,Spin,Icon} from "antd";
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)),
    };
}

class CoursesNew extends Component {

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

    componentDidMount() {


        let coursesId = this.props.match.params.coursesId;
        let user_school=this.props.current_user&&this.props.current_user.user_school;

        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,
                    })

            }).catch((error) => {
                console.log(error);
            })
        }else{
            // console.log(user_school);
            this.props.form.setFieldsValue({
                school:user_school,
            });
            this.setState({
                school:user_school,
            })

        }
       this.getschool("")
			 this.Searchvalue("")

    }
		componentDidUpdate(prevProps){
			if(prevProps.current_user!=this.props.current_user){
				if(this.props.current_user.user_identity==="学生"){
					window.location.href ="/403"
				}
			}
		}
    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 coursesId = this.props.match.params.coursesId;
        let {is_public} = 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 {datatime} = this.state;
                    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,
                            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.setState({
                            //     Modalstype: true,
                            //     Modalstopval: response.data.message,
                            //     ModalSave: this.cancelmodel,
                            //     Loadtype: true,
                            //     checkBoxValues: [],
                            //     checkAllValue: false,
                            //     // Realnamecertification : authentication,
                            //     // professional_certification: values.Professionalcertification
                            // })
                            window.location.href = "/courses/" + coursesId+"/students";
                        }
                    }).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 {datatime} = this.state;
                    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,
                            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) {
                            if (response.data.course_id != undefined) {
                                 window.location.href = "/courses/" + response.data.course_id+"/students";
                            }
                        }
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            });
        }

    }

    goback = () => {

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

    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,
							fetching: false
						})
					}
            // this.props.form.setFieldsValue({
            //     course:value
            // })
        }).catch((error)=>{
            console.log(error)
        })
    }
	handleSearch=(value)=>{
        this.props.form.setFieldsValue({
            classroom:value,
				  	course:value
        });
        this.Searchvalue(value)
    };

    handleChange=(value)=>{
        this.props.form.setFieldsValue({
            course:value,
            classroom:value
        })
    };

    handleSearchschool=(value)=>{

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

    handleChangeschool=(value)=>{

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

    getschool=(value)=>{
        let url="/schools/school_list.json";
        axios.get(url,{
            params: {
                search: value
            }
        }).then((result)=>{
					if (result.data.message===undefined) {
						this.setState({
							searchlistscholl: result.data.school_names,
							scholl: value
						})
						this.props.form.setFieldsValue({
							scholl: value
						})
					}
        }).catch((error)=>{
            console.log(error)
        })
    }
    render() {
        let {datatime} = this.state;
        const {getFieldDecorator} = this.props.form;
        const options = this.state.searchlist.map(d => <Option key={d.name} value={d.name}>{d.name}</Option>);
        const optionschool  = this.state.searchlistscholl.map(z => <Option key={z} value={z}>{z}</Option>);
        // console.log(this.props.current_user.user_school)
        return (
            <React.Fragment>

                <div>
                    {/*提示*/}
                    <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{
                                            width: 280px !important;
                                            margin-left: 10px;
                                        }
                                    `}
                                </style>
                                <div className="stud-class-set bor-bottom-greyE padding10200">
                                    <Form.Item label="课堂所属单位">
                                        {getFieldDecorator('school', {
                                            rules: [{required: true, message: "不能为空"}],
                                        })(
                                             <Select
                                               showSearch
                                               className={"fl construction mr10 "}
                                               placeholder="请输入并选择课本堂的所属单位"
                                               // value={this.state.school}
                                               onSearch={this.handleSearchschool}
                                               // notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
                                               onChange={this.handleChangeschool}
                                               onFocus={()=>this.getschool("")}
                                               allowClear={true}
                                             >
                                           {optionschool}
                                          </Select>
                                        )}
                                        <span  className={"newcoursestitle fl"}>
																					{/*（输入内容出现匹配的下拉菜单←同账号管理的单位信息填写）*/}
                                        </span>
                                        <div id='isschool'></div>
                                    </Form.Item>
                                </div>

                                <div className="stud-class-set bor-bottom-greyE padding10200 ">
                                    <div className={"TabsWarpcourse"}>
                                    <Form.Item label="课程名称">
                                        {getFieldDecorator('course', {
                                            rules: [{required: true, message: "不能为空"}],
                                        })(
                                            <Select
                                            showSearch
                                            className={"fl construction "}
                                            placeholder="例如：数据结构"
                                            // value={this.state.course}
                                            onSearch={this.handleSearch}
                                            onChange={this.handleChange}
                                            onFocus={()=>this.Searchvalue("")}
                                            allowClear={true}
                                            >
                                            {options}
                                            </Select>

                                            )}
                                        <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">
                                    <style>
                                        {`
                                          .ant-form-item{
                                              margin-bottom: 10px !important;
                                          }
                                        `}
                                    </style>
                                    <Form.Item
                                        label="总学时"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("period")(
                                            <Input id="period" className="greyInput" placeholder="例如：30"/>
                                        )}
                                    </Form.Item>

                                    <Form.Item
                                        label="学分"
                                        hasFeedback
                                    >
                                        {getFieldDecorator("credit")(
                                            <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}
                                                        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">
                                    <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={"FAFAFA"}>
                                <Form.Item wrapperCol={{span: 12, offset: 5}}>
                                    <div className="clearfix mt80 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;