import React, {Component} from 'react';
import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal,Tooltip} from 'antd';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default class TpmQuestionNew extends Component {
constructor(props) {
super(props)
this.state = {
}
}
componentDidMount() {
}
render() {
// console.log( this.props.questionlists)
return (
<div>
<div className="edu-back-white mb10 clearfix">
<div className="padding40-20">
<p className="color-grey-6 font-16 mb30">题干</p>
<div className="df">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1 mr20">
<TPMMDEditor ref={this.props.newquestioMDMdRef} placeholder="请输入选择题的题干内容" mdID={'newquestioMDid'} refreshTimeout={1500}
needRecreate={true} watch={true} className="courseMessageMD" initValue={this.props.contentMdRefval}></TPMMDEditor>
</div>
<div style={{width: '57px'}} style={{display:this.props.newquestioMDvaluetype===true?"block":"none"}}>
<span className="color-orange mt8 fl" id="choose_name"
style={{display: 'inline'}}><i className="fa fa-exclamation-circle mr3"></i>必填项</span>
</div>
</div>
<p id="e_tip_newquestioMDsQuestion" className="edu-txt-right color-grey-cd font-12 pdr20"></p>
<p id="e_tips_newquestioMDsQuestion" className="edu-txt-right color-grey-cd font-12 pdr20"></p>
<div id="shixun_form" className="mt10">
{
this.props.questionlists===undefined||this.props.questionlists.length===0?"":this.props.questionlists.map((item,key)=>{
return(
<li className="clearfix pr mb20 df questionli" key={key}>
<label className="fl"><span
className={item.type===true?"option-item fr mr10 color-grey select-choice check-option-bg":"option-item fr mr10 color-grey select-choice"}
onClick={()=>this.props.selquestionlists(key)}
name="option_span"
data-tip-down="点击设置答案"
>{item.str}</span></label>
<textarea className="input-flex-40 fl candiate_answer"
name="question[cnt][]"
placeholder="请输入选项内容"
value={item.val}
autoHeight="true"
id={"question"+key}
onInput={(e)=>this.props.onInputoquestionption(e,key)}
style={{resize: 'none', height: '62px'}}></textarea>
<a className="position-delete option_icon_remove" onClick={()=>this.props.delquestionlists(key)}>
<Tooltip placement="bottom" title={"删除"}>
<i className="fa fa-times-circle color-grey-c font-16 fl"></i>
</Tooltip>
</a>
</li>
)
})
}
<p className="clearfix ml40">
<a onClick={()=>this.props.addquestionlists()}
className="fl edu-default-btn edu-greyline-btn mb20 option_icon_add">新增选项</a>
<span className="color-orange mt8 fr mr20" style={{display:this.props.newcnttype===true?"block":"none"}}id="chooce_error">
<i className="fa fa-exclamation-circle mr3"></i>
{this.props.newcnttypesum===0?"请选择答案":"选项内容不能为空"}
</span>
</p>
<li className="clearfix color-grey-9 ">
<label className="fl ml40">温馨提示：点击选项标题，可以直接设置答案；选择多个答案即为多选题</label>
<label className="fr mr20">标准答案：
<span id="current-option" className="color-orange">{this.props.questionlistss===undefined?"请点击正确选项":this.props.questionlistss.length===0? <span>{this.props.standard_answer}</span>:this.props.questionlistss.map((item,key)=>{
return(
<span key={key}>{item}</span>
)
})}</span>
</label>
</li>
</div>
</div>
</div>
<div className={"edu-back-white mb10 clearfix"}>
<div className={"padding40-20"}>
<p className="color-grey-6 font-16 mb30">参考答案</p>
<div className={"df"}>
<div className={"flex1 mr20"}>
<TPMMDEditor ref={this.props.newquestioMDMdCont} placeholder="请输入各个选项的具体解析或其他相关信息" mdID={'newquestioMDMdConts'} refreshTimeout={1500}
needRecreate={true} watch={true} className="courseMessageMD" initValue={this.props.newquestioMDMdContval}></TPMMDEditor>
</div>
<div className={"choose_names"} style={{display:this.props.newquestioMDvaluetypes===true?"block":"none"}}>
<span className="color-orange mt8 fl" id="choose_name" style={{display: 'inline'}}><i className="fa fa-exclamation-circle mr3"></i>必填项</span>
</div>
</div>
<p id="e_tip_challenge_choose_answerQuestion" className="edu-txt-right color-grey-cd font-12 pdr20"></p>
<p id="e_tips_challenge_choose_answerQuestion" className="edu-txt-right color-grey-cd font-12 pdr20"></p>
</div>
</div>
<div className="edu-back-white padding40-20 mb20">
<p className="color-grey-6 font-16 mb30">难度系数</p>
<div className="clearfix mb40">
<RadioGroup value={this.props.answeshixunsGroup} className="fl mr40"
onChange={(e)=>this.props.onshixunGroupanswe(e)}
>
<Radio value={1}>简单</Radio>
<Radio value={2}>中等</Radio>
<Radio value={3}>困难</Radio>
</RadioGroup>
</div>
<p className="color-grey-6 font-16 mb30">奖励经验值</p>
<div className="clearfix"
// onMouseLeave={this.onshixunsmarkss}
>
<span className="fl mr30 color-orange pt10">*</span>
<Select style={{width: 120}} className="winput-240-40 fl"
id="challenge_score"
onChange={(e)=>this.props.onshixunsansweSelect(e)}
// onMouseEnter={this.onshixunsmarks}
// open={marktype}
value={this.props.answeonshixunsmark}
>
{this.props.options}
</Select>
<p className="fl color-grey-9 font-12 ml20">
如果学员答题错误，则不能得到相应的经验值<br/>
如果学员成功得到经验值，那么将同时获得等值的金币奖励，如：+10经验值、+10金币
</p>
<span className="color-orange mt7 fl ml20 none" id="ex_value_notice"><i
className="fa fa-exclamation-circle mr3"></i>必填项</span>
</div>
</div>
<div className="edu-back-white padding40-20 mb20">
<p className="color-grey-6 font-16 mb30">技能标签</p>
<div className="clearfix df">
<span className="mr30 color-orange pt10">*</span>
<div className="flex1">
<Input type="text"
className="winput-240-40 fl mr20"
id="input_task_tag"
placeholder="添加标签"
onInput={(e)=>this.props.shixunssanswerkill(e)}
value={this.props.shixunssanswerkillvalue}
onPressEnter={(e)=>this.props.clickshixunsanswerskill(e)}
onBlur={(e)=>this.props.clickshixunsanswerskill(e)}
/>
{/*<a className="white-btn orange-btn fl mt1 use_scope-btn ml20 mt5 mr20"*/}
{/*onClick={this.clickshixunsanswerskill}>+ 添加</a>*/}
<div className="ml15 color-grey-9 mt5">学员答题正确将获得技能，否则不能获得技能
<span className=" color-orange ml20" style={{display:this.props.challenge_tagtype===true?"inline-block":"none"}} id="stage_name_notice">
<i className="fa fa-exclamation-circle mr3"></i>必填项
</span>
</div>
<div className="mt20 clearfix" id="task_tag_content">
{
this.props.shixunsskillanswerlist.length === 0 ? "" : this.props.shixunsskillanswerlist.map((itme, key) => {
return (
<li className="task_tag_span" key={key}><span>{itme}</span>
<a onClick={()=>this.props.delshixunssnswerllist(key)}>×</a>
</li>
)
})
}
</div>
</div>
</div>
</div>
<div className="clearfix mt30" style={{display:this.props.identity>4||this.props.identity===undefined||this.props.power===false?"none":"block"}}>
<a className="defalutSubmitbtn fl mr20"
onClick={this.props.answer_subit}>提交</a>
<Link to={this.props.go_back_url}
className="defalutCancelbtn fl">取消</Link>
{/*<a href={this.props.go_back_url}*/}
{/* className="defalutCancelbtn fl">取消</a>*/}
</div>
</div>
)
}
}