import React, {Component} from 'react';

import MonacoEditor from 'react-monaco-editor';

import {
  Input,
  Select,
  Radio,
  Checkbox,
  Popconfirm,
  message,
  Modal,
  Icon,
  DatePicker,
  Breadcrumb,
  Upload,
  Button,
  notification,
  Tooltip,
  Tabs,
  Form
} from 'antd';

import axios from 'axios';

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


import {getImageUrl, toPath, getUrl, appendFileSizeToUploadFileAll, getUploadActionUrl} from 'educoder';
import {TPMIndexHOC} from "../TPMIndexHOC";

import './css/TPMsettings.css';

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


class Shixuninformation extends Component {
  constructor(props) {
    super(props)
    this.contentMdRef = React.createRef();
    this.state = {
      NAME_COUNT: 60,
      shixunmemoMDvalue: "",
      language: "java",
    }
  }


  getshixunmemoMDvalue = (value, e) => {

    this.setState({
      shixunmemoMDvalue: value
    })
  }


  render() {
    console.log(this.props.data)
    const {getFieldDecorator} = this.props.form;
    const {newshixunlist, languagewrite, systemenvironment, testcoderunmode, fileList, postapplytitle, postapplyvisible, shixunmemoMDvalue} = this.state;
    const {shixun_service_configs}=this.props;
    let operateauthority = this.props.identity === 1 ? true : this.props.identity < 5 && this.state.status == 0 ? true : false;
    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`);
          notification.open(
            {
              message: '提示',
              description:
                '文件大小必须小于50MB',

            }
          )
        }
        if (this.state.file !== undefined) {
          console.log("763")
          this.setState({
            file: file
          })
        } else {
          this.setState({
            file: file
          })
        }

        console.log("handleChange2");
        return isLt150M;
      },
    }
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <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('select', {
              rules: [{required: true, message: '请选择难易度'}],
            })(
              <div className="with15 fl pr">
                <Select placeholder="请选择难易度"
                        style={{width: 180}}
                        onChange={this.Selectthestudent}
                >
                  <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="请选择主类别"
                          style={{width: 180}}
                          onChange={this.selectleft}
                          defaultOpen={false}
                  >
                    {
                      newshixunlist === undefined ? "" : newshixunlist.main_type.map((item, key) => {
                        return (
                          <Option value={item.id} key={key}>
                            <Tooltip placement="right"
                                     title={item.description === "" ? "无描述" : item.description}>
                              {item.type_name}
                            </Tooltip>
                          </Option>
                        )
                      })
                    }
                  </Select>

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


          <Form.Item
            style={{"borderBottom": 'none', 'width': '61%', 'float': 'left', 'marginTop': '40px'}}
            className="chooseDes pr"
          >
            <div className=" fl pr mr20">
              {getFieldDecorator('selectright', {
                rules: [{required: true, message: '请选择小类别'}],
              })(
                <div className=" fl pr mr20">
                  <Select placeholder="请选择小类别"
                          style={{width: 180}}
                          onChange={this.selectright}
                          defaultOpen={false}
                  >
                    {
                      newshixunlist === undefined ? "" : newshixunlist.small_type.map((item, key) => {
                        return (
                          <Option value={item.id} key={key}>
                            <Tooltip placement="right"
                                     title={item.description === "" ? "无描述" : item.description}>
                              {item.type_name}
                            </Tooltip>
                          </Option>
                        )
                      })
                    }
                  </Select>
                </div>
              )}
              <span className="fl ml20 color-grey lineh-20">
                              <div>
                                 <div className={"font-12"}>
                                    已安装软件：hadoop3.1.0、jdk1.8；
                                 </div>
                                  <div className={"font-12"}>
                                      说明：添加了hadoop3.1.0、jdk1.8的源码包，添加了hadoop3.1.0、jdk1.8的源码包
                                  </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>


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

              </div>
            )}
            <span className="fl ml20 color-blue">
              使用自定义脚本
              <span className={"color-grey ml10"}>
                     <Icon type="exclamation-circle"/>
              </span>
            </span>
          </Form.Item>

          <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="1100"
                  language={this.state.language}
                  value={shixunmemoMDvalue}
                  options={{
                    selectOnLineNumbers: true
                  }}
                  onChange={this.getshixunmemoMDvalue}
                  // onChange={this.getshixunmemoMDvalue}
                />
              </div>
            </div>
          </div>


          <Form.Item label="私密版本库：">
            <span className="ant-form-text"><Checkbox>（若需要对学员隐藏部分版本库内容时，请选中；选中即启用私密版本库，请将需要对学员隐藏的文件存储在私密版本库）</Checkbox></span>
          </Form.Item>
        </Form>

        {this.props.identity<3?<div className="edu-back-white padding40-20 mb20">
          <p className="color-grey-6 font-16 mb30">服务配置</p>
          { shixun_service_configs&&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={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.setlanguagewrite}
                value={languagewrite}
                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.setsystemenvironment}
                style={{height: '100px'}}
                value={systemenvironment}
                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.settestcoderunmode}
                value={testcoderunmode}
                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>
          {/*</Form>*/}
        </Modal>


        <Modal
          keyboard={false}
          title="提示"
          visible={postapplytitle}
          closable={false}
          footer={null}
        >
          <div>
            <div className="task-popup-content"><p
              className="task-popup-text-center font-16"><span
              className="font-17 mt10">新建申请已提交，请等待管理员的审核</span></p>
              <li className="font-14 mt15 color-grey-6 edu-txt-center">我们将在1-2个工作日内与您联系
              </li>
            </div>
            <div className="task-popup-OK clearfix">
              <a className="task-btn task-btn-orange"
                 onClick={this.yeshidemodel}>知道啦</a>
            </div>
          </div>
        </Modal>

      </div>
    );
  }
}

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

export default TopShixuninformation;