import React, {Component} from 'react';

import MonacoEditor from 'react-monaco-editor';

import {
  Input,
  Select,
  Checkbox,
  Modal,
  Icon,
  Upload,
  Button,
  Tooltip,
  Form
} from 'antd';

import axios from 'axios';

import TPMMDEditor from "../challengesnew/TPMMDEditor";

import Bottomsubmit from "../../modals/Bottomsubmit";

import {getUploadActionUrl} from 'educoder';

import './css/TPMsettings.css';

import '../newshixuns/css/Newshixuns.css';

const Option = Select.Option;

class Shixuninformation extends Component {
  constructor(props) {
    super(props)
    this.contentMdRef = React.createRef();
    this.state = {
      NAME_COUNT: 60,
      shixunmemoMDvalue: "",
      testscripttiptype: false,
      shixunName: '',
      trainee: undefined,
      choice_small_type: [],
      simichecked: false,
      Executivetyoe: false,
      Executiveordervalue: "",
      Compilecommandvalue: "",
      shixun_service_configs: undefined,
      fileList:[],
      loading:false,
    }
  }

  componentDidMount() {

  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.data != this.props.data) {
      if (this.props.data&&this.props.data.shixun) {
        this.setState({
          shixunName: this.props.data.shixun&&this.props.data.shixun.name,
          trainee:this.props.data.shixun&&this.props.data.shixun.trainee,
          choice_main_type: this.props.data.shixun&&this.props.data.shixun.choice_main_type,
          choice_small_type: this.props.data.shixun&&this.props.data.shixun.choice_small_type,
          choice_standard_scripts:this.props.data.shixun&&this.props.data.shixun.choice_standard_scripts,
          shixunmemoMDvalue: this.props.data.shixun&&this.props.data.shixun.evaluate_script,
          simichecked: this.props.data.shixun&&this.props.data.shixun.is_secret_repository,
          shixun_service_configs: this.props.data.shixun&&this.props.data.shixun.shixun_service_configs,
          standard_scripts:this.props.data.shixun&&this.props.data.shixun.standard_scripts,
          shixun_service_configlist:this.props.data.shixun&&this.props.data.shixun.shixun_service_configs,
        })

        if(this.props.data.shixun&&this.props.data.shixun.choice_standard_scripts===null){
          this.setState({
            choice_standard_scripts:{id: this.props.data.shixun&&this.props.data.shixun.standard_scripts[0].id, value: ""},
            choice_standard_scriptssum:this.props.data.shixun&&this.props.data.shixun.standard_scripts[0].id
          })
          this.props.form.setFieldsValue({
            selectscripts:this.props.data.shixun&&this.props.data.shixun.standard_scripts[0].id
          })
          this.get_mirror_script(this.props.data.shixun&&this.props.data.shixun.standard_scripts[0].id)
        }else{
          this.props.form.setFieldsValue({
            selectscripts:this.props.data.shixun&&this.props.data.shixun.choice_standard_scripts
          })
        }

        let newlist = ""
        this.props.data.shixun&&this.props.data.shixun.choice_small_type.map((item, key) => {
          this.props.data.shixun.small_type.map((i,k)=>{
            if (item===i.id) {
              newlist = newlist + `${i.description}`
            }
          })
        })
        this.setState({
          subvalues: newlist
        })

        this.props.data.shixun&&this.props.data.shixun.main_type.map((item,key)=>{
          if(item.id===this.props.data.shixun&&this.props.data.shixun.choice_main_type){
            this.setState({
              mainvalues:item.description,
            })
          }
        })

        this.props.form.setFieldsValue({
          name:this.props.data.shixun&&this.props.data.shixun.name,
          trainee: this.props.data.shixun&&this.props.data.shixun.trainee,
          selectleft: this.props.data.shixun&&this.props.data.shixun.choice_main_type,
          selectright:this.props.data.shixun&&this.props.data.shixun.choice_small_type,
        })
        this.contentMdRef.current.setValue(this.props.data.shixun&&this.props.data.shixun.description);
      }
    }
  }

  getshixunmemoMDvalue = (value, e) => {

    this.setState({
      shixunmemoMDvalue: value
    })
  }

  testscripttip = (val) => {
    if (val === 0) {
      this.setState({
        testscripttiptype: true
      })
    } else if (val === 1) {
      this.setState({
        testscripttiptype: false
      })
    }
  }

  post_apply = () => {
    this.setState({
      postapplyvisible: true
    })
  }


  sendhideModaly = () => {
    this.setState({
      postapplyvisible: false,
    })
    if (this.state.file !== undefined) {
      // this.deleteAttachment(this.state.file);
      this.setState({
        file: undefined,
        deleteisnot: true,
        language: "",
        runtime: "",
        run_method: "",
        fileList: []
      })
    } else {
      this.setState({
        file: undefined,
        deleteisnot: true,
        language: "",
        runtime: "",
        run_method: "",
        fileList: []
      })
    }
  }


  sendsure_apply = () => {
    let {language, runtime, run_method} = this.state;

    if (!language || language === "") {
      // this.props.showNotification(`请填写该镜像是基于什么语言`);
      this.setState({
        languagewritetype: true
      })
      return
    }
    if (!runtime || runtime === "") {
      // this.props.showNotification(`请填写该镜像是基于什么语言系统环境`);
      this.setState({
        systemenvironmenttype: true
      })
      return;

    }
    if (!run_method || run_method === "") {
      // this.props.showNotification(`请填写该镜像中测试代码运行方式`);
      this.setState({
        testcoderunmodetype: true
      })
      return;
    }

    var attachment_ids = undefined;
    if (this.state.fileList) {
      attachment_ids = this.state.fileList.map(item => {
        return item.response ? item.response.id : item.id
      })
    }

    if (attachment_ids === undefined || attachment_ids.length === 0) {
      this.setState({
        attachmentidstype: true
      })
      return;
    }

    var data = {
      language: language,
      runtime: runtime,
      run_method: run_method,
      attachment_id: attachment_ids[0],
    }
    var url = `/shixuns/apply_shixun_mirror.json`;
    axios.post(url, data
    ).then((response) => {

      try {
        if (response.data) {

          if (this.state.file !== undefined) {
            this.setState({
              file: undefined,
              deleteisnot: true,
              language: "",
              runtime: "",
              run_method: "",
              fileList: []
            })
          } else {
            this.setState({
              file: undefined,
              deleteisnot: true,
              language: "",
              runtime: "",
              run_method: "",
              fileList: []
            })
          }
          this.props.showNotification("提交成功")

          this.sendhideModaly()

        }
      } catch (e) {

      }

    })

  }


  setlanguage = (e) => {
    this.setState({
      language: e.target.value
    })
    if (e.target.value) {
      this.setState({
        languagewritetype: false
      })
    }
  }
  setruntime = (e) => {
    this.setState({
      runtime: e.target.value
    })
    if (e.target.value) {
      this.setState({
        systemenvironmenttype: false
      })
    }

  }

  setrun_method = (e) => {
    this.setState({
      run_method: e.target.value
    })
    if (e.target.value) {
      this.setState({
        testcoderunmodetype: false
      })
    }
  }


  // 附件相关 START
  handleChange = (info) => {
    if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
      let {fileList} = this.state;

      if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
        console.log("handleChange1");
        // if(fileList.length===0){
        let fileLists = info.fileList;
        this.setState({
          // fileList:appendFileSizeToUploadFileAll(fileList),
          fileList: fileLists,
          deleteisnot: false
        });
        // }
      }
    }
  }

  onAttachmentRemove = (file) => {
    if (!file.percent || file.percent == 100) {
      Modal.confirm({
        title: '确定要删除这个附件吗?',
        okText: '确定',
        cancelText: '取消',
        // content: 'Some descriptions',
        onOk: () => {
          console.log("665")
          this.deleteAttachment(file)
        },
        onCancel() {
          console.log('Cancel');
        },
      });
      return false;
    }

  }

  deleteAttachment = (file) => {
    console.log(file);
    let id = file.response == undefined ? file.id : file.response.id
    const url = `/attachments/${id}.json`
    axios.delete(url, {})
      .then((response) => {
        if (response.data) {
          const {status} = response.data;
          if (status == 0) {
            // console.log('--- success')

            this.setState((state) => {

              const index = state.fileList.indexOf(file);
              const newFileList = state.fileList.slice();
              newFileList.splice(index, 1);
              return {
                fileList: newFileList,
                deleteisnot: true
              };
            });
          }
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }



  bigClass = (value,e) => {
    this.setState({
      mainvalues:e.props.name
    })
    let list = []
    list.push(this.state.choice_main_type)
    this.state.choice_small_type.map((item, key) => {
      list.push(item)
    })


    let newshixun_service_configs = this.state.shixun_service_configs;

    let newshixun_service_configsagin = [];
    newshixun_service_configs.map((item, key) => {
      list.map((its, index) => {
        if (item.mirror_repository_id === its) {
          newshixun_service_configsagin.push(item)
        }
      })
    })



    this.props.data.shixun.main_type.some((item, key) => {
        if (item.id === value) {
          newshixun_service_configsagin[0] = {
            mirror_repository_id: value,
            name: item.type_name,
            cpu_limit: 1,
            lower_cpu_limit: 0.1,
            memory_limit: 1024,
            request_limit: 10
          }
          return true
        }
      }
    )




    this.props.form.setFieldsValue({
      selectleft: value,
    })

    let url = `/shixuns/get_mirror_script.json?mirror_id=` + value;
    axios.get(url).then((response) => {
      if (response.status === 200) {
        this.setState({
          choice_standard_scripts:{id: response.data[0].id, value: ""},
          choice_standard_scriptssum:response.data[0].id
        })
        this.props.form.setFieldsValue({
          selectscripts:response.data[0].id
        })
        this.get_mirror_script(response.data[0].id)
        this.setState({
          choice_main_type: value,
          standard_scripts: response.data,
          shixun_service_configs: newshixun_service_configsagin,
          shixun_service_configlist: newshixun_service_configsagin,
        })

      }
    }).catch((error) => {
      console.log(error)
    });
  }
  Deselectlittle = (value,e) => {

    let {shixun_service_configs, choice_small_type} = this.state;
    let newshixun_service_configs = shixun_service_configs;
    let newchoice_small_type = choice_small_type;

    newshixun_service_configs.some((item, key) => {
        if (item.mirror_repository_id === value) {
          newshixun_service_configs.splice(key, 1)
          return true
        }
      }
    )

    newchoice_small_type.some((item, key) => {
        if (item === value) {
          newchoice_small_type.splice(key, 1)
          return true
        }
      }
    )


    this.setState({
      choice_small_type: newchoice_small_type,
      shixun_service_configs: newshixun_service_configs,
      shixun_service_configlist: newshixun_service_configs,
    })
  }

  showlittleClass=(value,e)=>{
    let newlist = ""
    e.map((item, key) => {
      if (item.props.name != "") {
        newlist = newlist + `${item.props.name}`
      }
    })
    this.setState({
      subvalues: newlist
    })

    this.props.form.setFieldsValue({
      selectright: value,
    })
  }
  littleClass = (value,e) => {
    let newshixun_service_configs = this.state.shixun_service_configs;
    let newchoice_small_type = this.state.choice_small_type;
    let list = []
    list.push(this.state.choice_main_type)
    newchoice_small_type.map((item, key) => {
      list.push(item)
    })

    let newshixun_service_configsagin = []

    newshixun_service_configs.map((item, key) => {
      list.map((its, index) => {
        if (item.mirror_repository_id === its) {
          newshixun_service_configsagin.push(item)
        }
      })
    })

    this.props.data.shixun.small_type.some((items, keys) => {
        if (items.id === value) {
          newshixun_service_configsagin.push({
            mirror_repository_id: value,
            name: items.type_name,
            cpu_limit: 1,
            lower_cpu_limit: 0.1,
            memory_limit: 1024,
            request_limit: 10
          })
          return true
        }
      }
    )

    newchoice_small_type.push(value)

    this.setState({
      choice_small_type: newchoice_small_type,
      shixun_service_configs: newshixun_service_configsagin,
      shixun_service_configlist: newshixun_service_configsagin,
    })
  }

  SelectScput = (value, e) => {
    this.setState({
      choice_standard_scriptssum: value,
      language: e.props.name,
      choice_standard_scripts: {id: e.props.value, value: ""},
      standard_scriptsModal: true
    })
  }

  hidestandard_scriptsModal = () => {
    this.setState({
      standard_scriptsModal: false,
      standard_scriptsModals: false
    })
  }

  get_mirror_script = (ids) => {
    let {choice_standard_scriptssum} = this.state;
    let id = this.props.match.params.shixunId;
    let url = `/shixuns/${id}/get_script_contents.json`;
    axios.get((url),{params:{
        script_id:ids?ids:choice_standard_scriptssum
      }}).then((response) => {
      if (response.status === 200) {
        // this.evaluate_scriptMD(response.data.content, "shixunmemoMD");
        if(ids==undefined){
          this.setState({
            standard_scriptsModal: false,
            standard_scriptsModals: true,
          })
        }
        this.setState({
          shixunmemoMDvalue: response.data.content
        })
      }

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

  simionChange = (e) => {
    this.setState({
      simichecked: e.target.checked
    })
  }


  showModal = () => {
    this.setState({
      visibleTemplate: true,
    });
  }

  handleCancelTemplate = (e) => {
    this.setState({
      Executiveordervalue: "",
      Compilecommandvalue: "",
      visibleTemplate: false
    })
  }

  hideModalTemplate = (e) => {
    let id = this.props.match.params.shixunId;
    let {Executiveordervalue, Compilecommandvalue} = this.state;

    if (Executiveordervalue === "" || Executiveordervalue === undefined) {
      this.setState({
        Executivetyoe: true,
      });
      return
    }
    // Executiveordervalue=String(Executiveordervalue);
    // Compilecommandvalue=String(Compilecommandvalue);
    let trl = `/shixuns/${id}/get_custom_script.json?compile=${Executiveordervalue}&excutive=${Compilecommandvalue}`
    axios.get(trl).then((response) => {
      // this.evaluate_scriptMD(response.data.shixun_script, "shixunmemoMD");
      this.setState({
        shixunmemoMDvalue: response.data.shixun_script
      })
    }).catch((error) => {
      console.log(error)
    });
    this.setState({
      visibleTemplate: false
    })
  }

  Executiveorder = (e) => {
    this.setState({
      Executiveordervalue: e.target.value
    })
  }

  Compilecommand = (e) => {
    this.setState({
      Compilecommandvalue: e.target.value
    })
  }

  setConfigsInputs=(e,keys,str)=>{

    let {shixun_service_configs}=this.state;
    let newshixun_service_configs=shixun_service_configs;
    newshixun_service_configs.map((item,key)=>{
      if(key===keys){
        switch (str) {
          case 1:
            item.cpu_limit=e.target.value
            break;
          case 2:
            item.lower_cpu_limit=e.target.value
            break;
          case 3:
            item.memory_limit=e.target.value
            break;
          case 4:
            item.request_limit=e.target.value
            break;
        }
      }
    })

    this.setState({
      shixun_service_configs:newshixun_service_configs,
      shixun_service_configlist:newshixun_service_configs,
    })

  }

  onSubmits=()=>{
    this.setState({
      loading:true
    })
    const mdContnet = this.contentMdRef.current.getValue().trim();
    let{choice_standard_scriptssum,choice_standard_scripts}=this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        let url = `/shixuns/${this.props.match.params.shixunId}.json`;
        let newshixun_service_configlist = this.state.shixun_service_configlist.map(v => {
          let v1 = Object.assign({},v);
          delete v1.name;
          return v1
        });

        let data={
          main_type:this.state.choice_main_type,
          sub_type:this.state.choice_small_type,
          is_secret_repository:this.state.simichecked,
          shixun:{
            name: values.name,
            trainee: this.state.trainee,
            is_jupyter: this.props.shixunsDetails.is_jupyter,
            mirror_script_id: this.props.shixunsDetails.is_jupyter===true?null:this.state.choice_standard_scriptssum===undefined?this.state.choice_standard_scripts:this.state.choice_standard_scriptssum,
          },
          shixun_info: {
            description: mdContnet,
            evaluate_script: this.props.shixunsDetails.is_jupyter===true?"":this.state.shixunmemoMDvalue
         },
         shixun_service_configs:newshixun_service_configlist
      }

        axios.put(url, data).then((result) => {
          if (result) {
            if (result.data) {
                  this.props.getdatas("2")
              if(result.data.shixun_identifier){
                this.props.showNotification("基本信息更新成功!")
                this.setState({
                  loading:false
                })
              }
            }
          }
        }).catch((error) => {
          this.setState({
            loading:false
          })
        });
      }else{
        this.setState({
          loading:false
        })
      }
    });
    this.setState({
      loading: false
    })
  }

  Selectthestudent = (value) => {
    this.setState({
      trainee: value
    })
  }
  render() {

    let operateauthority = this.props.identity === 1 ? true : this.props.identity < 5 && this.props.data.shixun.status == 0 ? true : false;
    // console.log(operateauthority)
    const {getFieldDecorator} = this.props.form;
    const { fileList, choice_standard_scripts, postapplyvisible, shixunmemoMDvalue} = this.state;

    // console.log("1222")
    // console.log(choice_standard_scripts)

    const uploadProps = {
      width: 600,
      fileList,
      multiple: true,
      // https://github.com/ant-design/ant-design/issues/15505
      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
      // showUploadList: false,
      action: `${getUploadActionUrl()}`,
      onChange: this.handleChange,
      onRemove: this.onAttachmentRemove,
      beforeUpload: (file, fileList) => {

        if (this.state.fileList.length >= 1) {
          return false
        }
        // console.log('beforeUpload', file.name);
        const isLt150M = file.size / 1024 / 1024 < 50;
        if (!isLt150M) {
          // this.props.showNotification(`文件大小必须小于50MB`);
          this.props.showNotification("文件大小必须小于50MB")
        }
        if (this.state.file !== undefined) {
          this.setState({
            file: file
          })
        } else {
          this.setState({
            file: file
          })
        }
        return isLt150M;
      },
    }

    return (
      <div>
        <div className="educontent mb50 edu-back-white padding10-20">
          <Form>
            <Form.Item
              label="名称"
              style={{"borderBottom": 'none'}}
              className="mt15"
            >
              {getFieldDecorator('name', {
                rules: [{
                  required: true, message: '请输入选题名称',
                }, {
                  max: 60, message: '请输入名称，最大限制60个字符',
                }, {
                  whitespace: true, message: '请勿输入空格'
                }],
              })(
                <Input placeholder="请输入名称，最大限制60个字符"
                       className={"input-100-45 greyInput"}
                       onInput={this.shixunNameInput} autoComplete="off"
                       addonAfter={`${String(!this.state.shixunName ? 0 : this.state.shixunName.length)}/${this.state.NAME_COUNT}`}
                       className="newViewAfter"/>
              )}
            </Form.Item>

            <Form.Item
              label="简介"
              style={{"borderBottom": 'none', 'marginBottom': '0px'}}
              className="chooseDes pr"
            >
              <TPMMDEditor ref={this.contentMdRef} placeholder="请输入简介" mdID={'courseContentMD'}
                           refreshTimeout={1500}
                           className="courseMessageMD"
                // initValue={this.state.description === null ? "" : this.state.description}
              ></TPMMDEditor>
            </Form.Item>


            <Form.Item
              label={"难易度"}
              style={{"borderBottom": 'none'}}
              className="chooseDes pr"
            >
              {getFieldDecorator('trainee', {
                rules: [{required: true, message: '请选择难易度'}],
              })(
                <div className="with15 fl pr">
                  <Select placeholder="请选择难易度"
                          style={{width: 180}}
                          onChange={this.Selectthestudent}
                          value={this.state.trainee}
                  >
                    <Option value={1}>初级</Option>
                    <Option value={2}>中级</Option>
                    <Option value={3}>中高级</Option>
                    <Option value={4}>高级</Option>
                  </Select>

                </div>
              )}
              <span className="fl ml20 color-grey">（实训的难易程度）</span>
            </Form.Item>

            <Form.Item
              label={"实验环境"}
              style={{"borderBottom": 'none', 'width': '18%', 'float': 'left'}}
              className="chooseDes pr"
            >
              <div>

                {getFieldDecorator('selectleft', {
                  rules: [{required: true, message: '请选择主类别'}],
                })(
                  <div className="width100 fl mr20">
                    <Select placeholder="请选择主类别"
                            value={this.state.choice_main_type === "" ? undefined : this.state.choice_main_type}
                            style={{width: 180}}
                            onChange={operateauthority ? this.bigClass : ""}
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                    >

                      {
                        this.props.data === undefined ? "" : this.props.shixunsDetails&&this.props.shixunsDetails.is_jupyter === true?this.props.data.shixun&&this.props.data.shixun.main_type.map((item, key) => {
                          let itemtype=item.type_name.toLowerCase().indexOf('jupyter'.toLowerCase())
                          if(itemtype>-1) {
                            return (
                              <Option value={item.id} key={key} name={item.description}>
                                <Tooltip placement="right" title={item.description === "" ? "无描述" : item.description}>
                                  {item.type_name}
                                </Tooltip>
                              </Option>
                            )
                          }
                        }):""
                      }

                      {
                        this.props.data === undefined ? "" : this.props.shixunsDetails&&this.props.shixunsDetails.is_jupyter === false?this.props.data.shixun&&this.props.data.shixun.main_type.map((item, key) => {
                          let itemtype=item.type_name.toLowerCase().indexOf('jupyter'.toLowerCase())
                          if(itemtype===-1) {
                            return (
                              <Option value={item.id} key={key} name={item.description}>
                                <Tooltip placement="right" title={item.description === "" ? "无描述" : item.description}>
                                  {item.type_name}
                                </Tooltip>
                              </Option>
                            )
                          }
                        }):""
                      }
                    </Select>

                  </div>
                )}
              </div>
            </Form.Item>


            <Form.Item
              style={{"borderBottom": 'none', 'width': '81%', 'float': 'left', 'marginTop': '40px'}}
              className="chooseDes pr"
            >
              <div className=" fl pr mr20">
                {getFieldDecorator('selectright', {
                  rules: [{required: false, message: '请选择小类别'}],
                })(
                  <div className=" fl pr mr20">
                    <Select placeholder="请选择小类别"
                            mode="multiple"
                            value={!this.state.choice_small_type?undefined:this.state.choice_small_type.length === 0 || this.state.choice_small_type[0] === "" || this.state.choice_small_type === [] ? undefined : this.state.choice_small_type}
                            style={{width: 200}}
                            disabled={operateauthority ? false : true}
                            onDeselect={operateauthority ? this.Deselectlittle : ""}
                            onSelect={operateauthority ? this.littleClass : ""}
                            onChange={this.showlittleClass}
                            defaultOpen={false}
                    >
                      {
                        this.props.data === undefined ? "" : this.props.data.shixun&&this.props.data.shixun.small_type.map((item, key) => {
                          return (
                            <Option value={item.id} key={key} name={item.description}>
                              <Tooltip placement="right" title={item.description === "" ? "无描述" : item.description}>
                                {item.type_name}
                              </Tooltip>
                            </Option>
                          )
                        })
                      }
                    </Select>
                  </div>
                )}
                <span className="fl ml20 color-grey lineh-20">
                      <div>
                           {this.state.mainvalues === undefined && this.state.subvalues === undefined || this.state.mainvalues === "" && this.state.subvalues === "" ? "" :
                             <div className={"font-12"} style={{'max-width': '600px'}}>
                               {`${this.state.mainvalues === undefined || this.state.mainvalues === "" ? "" : `已安装软件：` + this.state.mainvalues}`}
                               {`${this.state.subvalues === undefined || this.state.subvalues === "" ? "" : this.state.mainvalues === undefined || this.state.mainvalues === "" ? `已安装软件：` + this.state.subvalues : this.state.subvalues}`}
                               {`${this.state.mainvalues === undefined || this.state.mainvalues === "" ? "" : `说明：添加了` + this.state.mainvalues}${this.state.subvalues === undefined || this.state.subvalues === "" ? "" :
                                 this.state.mainvalues === undefined || this.state.mainvalues === "" ? `说明：添加了` + this.state.subvalues : this.state.subvalues}`}
                             </div>}
                      </div>
                </span>
              </div>
            </Form.Item>

            <div className={"both"}></div>
            <div className=" color-grey lineh-20 mb20">
              没有实验环境？
              <a className="color-blue" onClick={this.post_apply}> 申请新建</a>
            </div>


            { this.props.shixunsDetails&&this.props.shixunsDetails.is_jupyter===true?"":<Form.Item
              label={"评测脚本"}
              style={{"borderBottom": 'none'}}
              className="chooseDes pr"
            >
              {getFieldDecorator('selectscripts', {
                rules: [{required: true, message: '请选择评测脚本'}],
              })(
                <div className="with15 fl pr">
                  <Select placeholder="请选择选择脚本"
                          style={{width: 180}}
                          className="fl"
                          disabled={operateauthority ? false : true}
                          value={choice_standard_scripts === undefined || choice_standard_scripts === null ? undefined : choice_standard_scripts.id === undefined ? choice_standard_scripts : choice_standard_scripts.id}
                          onChange={operateauthority ? this.SelectScput : ""}>
                    {
                      this.state.standard_scripts=== undefined ? "" : this.state.standard_scripts.map((item, key) => {
                        return (
                          <Option value={parseInt(item.id)} name={item.scptname} key={key}>{item.scptname}</Option>
                        )

                      })
                    }
                  </Select>
                </div>
              )}
              <span className="fl ml20 color-blue" style={{'line-height': '30px'}}>
                <span onClick={() => this.showModal()}>使用自定义脚本</span>
              <span className={"color-grey ml10"} onClick={() => this.testscripttip(0)}>
                     <Icon type="exclamation-circle"/>
              </span>
              	<div className="invite-tip clearfix none " id="test_script_tip"
                     style={{
                       top: '33px',
                       left: '-15px',
                       width: '450px',
                       zIndex: '10',
                       display: this.state.testscripttiptype === true ? 'block' : "none"
                     }}>
                  <style>
                    {
                      `
                      .top-black-trangle{
                         right: auto;
                        left: 0px;
                      }
                      `
                    }
                  </style>
										<span className="top-black-trangle"></span>
										<div className="padding20 invitecontent clearfix">
											<p className="font-12 edu-txt-left">
												使用自定义模板，平台无法自动更新脚本，请在关卡创建完后手动更新脚本中的必填参<br/>
												数和以下2个数组元素：<br/>
												challengeProgramNames<br/>
												sourceClassNames<br/><br/>
												示例：有2个关卡的实训<br/><br/>
												各关卡的待编译文件为：<br/>
												src/step1/HelloWorld.java<br/>
												src/step2/Other.java<br/><br/>
												各关卡的编译后生成的执行文件为：<br/>
												step1.HelloWorld<br/>
												step2.Other<br/><br/>
												则数组元素更新如下：<br/>
												challengeProgramNames=("src/step1/<br/>
												HelloWorld.java" "src/step2/Other.java")<br/>
												sourceClassNames=("step1.HelloWorld<br/>
												" "step2.Other")<br/><br/>
												其它参数可按实际需求定制
											</p>
										</div>
										<p className="inviteTipbtn with100 fl">
											<a onClick={() => this.testscripttip(1)}>知道了</a>
										</p>
									</div>
            </span>
            </Form.Item>}

            { this.props.shixunsDetails&&this.props.shixunsDetails.is_jupyter===true?"": <div className="mt30 clearfix df">
              <div
                className={operateauthority === false ? 'nonemodel' : ""}
              ></div>
              <div className="flex1">
                <div className="fl" style={{border: '1px solid #ccc'}}>
                  <MonacoEditor
                    height="450"
                    width="1150"
                    // language={this.state.language}
                    value={shixunmemoMDvalue}
                    options={{
                      selectOnLineNumbers: true
                    }}
                    onChange={this.getshixunmemoMDvalue}
                    // onChange={this.getshixunmemoMDvalue}
                  />
                </div>
              </div>
            </div>}
          </Form>


          { this.props.shixunsDetails&&this.props.shixunsDetails.is_jupyter===true?"": <span className="ant-form-text mt20">私密版本库：
            <Checkbox onChange={this.simionChange}
                      value={this.state.simichecked}>
              {this.state.simichecked===false?"（若需要对学员隐藏部分版本库内容时，请选中；选中保存后表示启用私密版本库，请将需要对学员隐藏的文件存储在私密版本库）":"已创建的私密版本库及其内容，将在“保存”时被删除"}</Checkbox>
        </span>}

          {this.props.identity < 3 ? <div className="edu-back-white padding40-20 mb20">
            <p className="color-grey-6 font-16 mb30">服务配置</p>
            {this.state.shixun_service_configs && this.state.shixun_service_configs.map((item, key) => {

              return (
                <div key={key}>
                  <div id="5">
                    <div className="color-grey-6 font-16 mt30 mb20" id="shixun_scenario_type_name">
                      <span className={"fl"}>{item.name}</span>
                      {/*<span className={"fr mr40"} onClick={()=>this.Deselectlittle(item.mirror_repository_id)}><i className="fa fa-times-circle color-grey-c font-16 fl"></i></span>*/}
                    </div>
                    <div className="clearfix mb5">
                      <label className="panel-form-label fl">CPU(核)：</label>
                      <div className="pr fl with80 status_con">
                        <input type="text" value={item.cpu_limit} onInput={(e) => this.setConfigsInputs(e, key, 1)}
                               className="panel-box-sizing task-form-100 task-height-40" placeholder="请输入类别名称"/>
                      </div>
                      <div className="cl"></div>
                    </div>
                    <div className="clearfix mb5">
                      <label className="panel-form-label fl">最低CPU(核)：</label>
                      <div className="pr fl with80 status_con">
                        <input type="text" value={item.lower_cpu_limit}
                               onInput={(e) => this.setConfigsInputs(e, key, 2)}
                               className="panel-box-sizing task-form-100 task-height-40" placeholder="请输入类别名称"/>
                      </div>
                      <div className="cl"></div>
                    </div>
                    <div className="clearfix mb5">
                      <label className="panel-form-label fl">内存限制(M)：</label>
                      <div className="pr fl with80 status_con">
                        <input type="text" value={item.memory_limit} onInput={(e) => this.setConfigsInputs(e, key, 3)}
                               className="panel-box-sizing task-form-100 task-height-40" placeholder="请输入类别名称"/>
                      </div>
                      <div className="cl"></div>
                    </div>
                    <div className="clearfix mb5">
                      <label className="panel-form-label fl">内存要求(M)：</label>
                      <div className="pr fl with20 status_con">
                        <input type="text" value={item.request_limit} onInput={(e) => this.setConfigsInputs(e, key, 4)}
                               className="panel-box-sizing task-form-100 task-height-40" placeholder="请输入类别名称"/>
                      </div>
                      <label className="panel-form-label fl"
                             style={{width: '48%'}}>温馨提示：纯编程类型实训建议使用默认值，对于大数据等建议使用最大内存的30%</label>
                      <div className="cl"></div>
                    </div>
                  </div>
                </div>
              )

            })}
          </div> : ""}


          {postapplyvisible === true ? <style>
            {
              `
           body{
            overflow: hidden !important;
            }
            `
            }
          </style> : ""}

          {/*<Modal*/}
          {/*  keyboard={false}*/}
          {/*  title="提示"*/}
          {/*  visible={this.state.simicheckedtype}*/}
          {/*  closable={false}*/}
          {/*  footer={null}*/}
          {/*>*/}
          {/*  <div className="task-popup-content">*/}
          {/*    <p className="task-popup-text-center font-16">已创建的私密版本库及其内容，将在“保存”时被删除</p>*/}
          {/*    <p className="task-popup-text-center font-16">是否确认取消选择？</p>*/}
          {/*  </div>*/}

          {/*  <div className="task-popup-submit clearfix mt10">*/}
          {/*    <a onClick={() => this.hidesimichecked()} className="task-btn fl">取消</a>*/}
          {/*    <a className="task-btn task-btn-orange fr" onClick={() => this.getsimichecked()}>确定</a>*/}
          {/*  </div>*/}
          {/*</Modal>*/}

          <Modal
            keyboard={false}
            title="提示"
            visible={this.state.standard_scriptsModal}
            closable={false}
            footer={null}
          >
            <div className="task-popup-content">
              <p className="task-popup-text-center font-16">原有脚本将被新的脚本覆盖，无法撤销</p>
              <p className="task-popup-text-center font-16">是否确认执行覆盖操作</p>
            </div>

            <div className="task-popup-submit clearfix mt10">
              <a onClick={() => this.hidestandard_scriptsModal()} className="task-btn fl">取消</a>
              <a className="task-btn task-btn-orange fr" onClick={() => this.get_mirror_script()}>确定</a>
            </div>
          </Modal>


          <Modal
            keyboard={false}
            title="提示"
            visible={this.state.standard_scriptsModals}
            closable={false}
            footer={null}
          >
            <div className="task-popup-content"><p className="task-popup-text-center font-16">评测脚本生成成功！</p></div>
            <div className="task-popup-sure clearfix">
              <a className="task-btn task-btn-orange" onClick={() => this.hidestandard_scriptsModal()}>确定</a>
            </div>
          </Modal>

          <Modal
            keyboard={false}
            title="自定义模板"
            visible={this.state.visibleTemplate}
            onCancel={this.handleCancelTemplate}
            onOk={this.hideModalTemplate}
            okText="确认"
            cancelText="取消"
          >
            <div>
              <li className="clearfix mb15">
                <label className="panel-form-label fl"><span
                  className="color-orange mr5">*</span>执行命令：</label>
                <textarea className="task-form-80 task-height-150 panel-box-sizing fl mt10"
                          onInput={this.Executiveorder}
                          value={this.state.Executiveordervalue}
                          style={{width: '100%'}}
                          id="executive_command"
                >
														</textarea>
                <p className="-text-danger fl mt5"
                   id="executive_command_notice"
                   style={{display: this.state.Executivetyoe === false ? "none" : "block"}}
                >执行命令不能为空</p>
              </li>

              <li className="clearfix mb15">
                <label className="panel-form-label fl">编译命令：</label>
                <textarea className="task-form-80 task-height-150 panel-box-sizing fl mt10"
                          value={this.state.Compilecommandvalue}
                          onInput={this.Compilecommand}
                          id="compile_command"
                          style={{width: '100%'}}
                >
														</textarea>
              </li>
            </div>
          </Modal>

          <Modal
            keyboard={false}
            title="申请新建"
            visible={postapplyvisible}
            closable={false}
            footer={null}
            width={850}
            heigth={720}
          >
            <div>
              <li className="clearfix ml82">
                <label className="fl mt10 "><span
                  className="color-red fl mt3">*</span>语言：&nbsp;&nbsp;</label>
                <textarea
                  className={this.state.languagewritetype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
                  style={{width: '89%', height: '100px'}}
                  onInput={this.setlanguage}
                  value={this.state.language}
                  placeholder="请填写该镜像是基于什么语言：示例：Python"
                  id="demand_info"></textarea>
              </li>
              <div
                className={"color-red shixunspanred"}>{this.state.languagewritetype === true ? "请填写该镜像语言" : ""}</div>
              <li className="clearfix ml1">
                <label className="panel-form-label fl ml50"><span
                  className="color-red fl mt3">*</span>系统环境：&nbsp;&nbsp;</label>
                <textarea
                  className={this.state.systemenvironmenttype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
                  onInput={this.setruntime}
                  style={{height: '100px'}}
                  value={this.state.runtime}
                  placeholder="请填写该镜像是基于什么linux系统环境,代码运行环境"
                  id="demand_info"></textarea>
              </li>
              <div
                className={"color-red shixunspanred"}>{this.state.systemenvironmenttype === true ? "请填写该镜像语言系统环境" : ""}</div>
              <li className="clearfix">
                <label className="fl mt10"><span
                  className="color-red fl mt3">*</span>测试代码运行方式：&nbsp;&nbsp;</label>

                <textarea
                  className={this.state.testcoderunmodetype === true ? "fl task-form-80 task-height-150 bor-reds" : "fl task-form-80 task-height-150"}
                  onInput={this.setrun_method}
                  value={this.state.run_method}
                  style={{height: '100px'}}
                  placeholder="请填写该镜像中测试代码运行方式"
                  id="demand_info"></textarea>
              </li>
              <div
                className={"color-red shixunspanred"}>{this.state.testcoderunmodetype === true ? "请填写该镜像测试代码运行方式" : ""}</div>
              <li className="clearfix ml50">
                <label className="panel-form-label fl mt-5"><span
                  className="color-red fl">*</span>测试代码：&nbsp;&nbsp;</label>
                <div className="mt10" style={{
                  display: "inline-block"
                }}>
                  <Upload {...uploadProps}>
                    <Icon type="upload" className="fl mt3"> </Icon>
                    <span className="color-blue fl cdefault">上传附件</span>
                    <span className="color-grey-c fl ml10 ">(单个文件50M以内)</span>

                  </Upload>
                </div>

              </li>
              <div className={"color-red shixunspanred"}>
                {this.state.attachmentidstype === true ? "请上传附件" : ""}
              </div>
              <li className="edu-txt-center clearfix ">
                <a className="pop_close task-btn  mr30"
                   onClick={() => this.sendhideModaly()}
                >取消</a>
                <Button type="primary" onClick={() => this.sendsure_apply()}
                        className="task-btn task-btn-orange">确定</Button>
              </li>
              <div className="cl"></div>
            </div>
          </Modal>
        </div>
        {this.props.identity < 5 ?
          <Bottomsubmit {...this.props} {...this.state} url={`/shixuns/${this.props.match.params.shixunId}/challenges`}
                        onSubmits={this.onSubmits} loadings={this.state.loading} bottomvalue={"下一步"} /> : ""}
      </div>

    );
  }
}

const TopShixuninformation = Form.create({name: 'newshixun'})(Shixuninformation);

export default TopShixuninformation;