import React,{ Component } from "react";
import {Checkbox,Radio} from "antd";


import '../css/members.css'
import '../css/busyWork.css'
import './pollStyle.css'

import axios from 'axios';

const map={1:"单选题",2:"多选题",3:"主观题",4:"主观题"}
class PollDetailTabThird extends Component{
  constructor(props){
    super(props);
    this.state={
      pollDetail:undefined
    }
  }
  getPollInfo=()=>{
    let pollId=this.props.match.params.pollId;
    let url=`/polls/${pollId}.json`;
    axios.get(url).then((result)=>{
      if(result.status==200){
        this.setState({
          pollDetail:result.data
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }
  componentDidMount=()=>{
    this.getPollInfo();
  }
  render(){
    let {pollDetail}=this.state;
    return(
      <div>
        {
          pollDetail && pollDetail.poll.polls_description && 
          <p style={{backgroundColor:"#F2F9FF",whiteSpace:"pre-wrap"}} className="color-blue pt15 pb15 pl30 pr30">{ pollDetail.poll.polls_description }</p>
        }
        <div className="edu-back-white">
          <p className="padding20-30 clearfix bor-bottom-greyE edu-txt-left">
						{ pollDetail && pollDetail.question_types.q_counts===0 ? "" :
              <span className="color-grey-3">
                {
                  pollDetail && pollDetail.question_types.q_counts > 0 &&
                  <span>合计{pollDetail.question_types.q_counts}题：</span>
                }
                {
                  pollDetail && pollDetail.question_types.q_singles > 0 &&
                  <span className="mr15 color-grey-9">单选题{pollDetail.question_types.q_singles}题</span>
                }
                {
                  pollDetail && pollDetail.question_types.q_doubles > 0 &&
                  <span className="mr15 color-grey-9">多选题{pollDetail.question_types.q_doubles}题</span>
                }
                {
                  pollDetail && pollDetail.question_types.q_mains > 0 &&
                  <span className="color-grey-9">主观题{pollDetail.question_types.q_mains}题</span>
                }
              </span>
            }
          </p>

          {
            pollDetail && pollDetail.questions.map((item,key)=>{
              return(
                <div className="previewList">
                  <p className="pl30 pr30 pt30 pb15 font-16 clearfix">
                    <span className="color-blue mr8 fl">{item.question.question_number}、{map[item.question.question_type]}</span>
                    { item.question.is_necessary==1 ? <span className="mustAnswer fl ml10 mr10">必答</span>:<span className="mustAnswer fl ml10 mr10">选答</span> }
                    { item.question.question_type == 2 && item.question.min_choices && item.question.max_choices ? 
                      <span className="color-grey-9 font-14 fl mt2">
                        {
                          item.question.min_choices == item.question.max_choices ? "可选"+item.question.max_choices+"项" :
                          "可选"+item.question.min_choices+"-"+item.question.max_choices+"项"
                        }
                      </span>:""
                    }
                  </p>
                  <li className="pl30 pr30 pb15">{item.question.question_title}</li>
                  {
                    // 单选题
                    item.question.question_type==1 &&
                    <Radio.Group className="answerList" disabled>
                      {
                        item.question.answers.map((index,k)=>{
                          return(
                            <li className="df">
                              <Radio className="fl" value={index.answer_id}></Radio>
                              <span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
                              {
                                index.answer_text=="其他" ? <p className="textLine"></p>:""
                              }
                              
                            </li>
                          )
                        })
                      }
                    </Radio.Group>
                  }
                  {
                    // 多选题
                    item.question.question_type==2 &&
                    <Checkbox.Group className="answerList" disabled>
                      {
                        item.question.answers.map((index,k)=>{
                          return(
                            <li className="df" key={k}>
                              <Checkbox className="fl mr8" value={index.answer_id} key={index.answer_id}></Checkbox>
                              <span className={index.answer_text=="其他"?"break-word":"break-word flex1"}>{index.answer_text}</span>
                              {
                                index.answer_text=="其他" ? <p className="textLine"></p>:""
                              }
                            </li>
                          )
                        })
                      }
                    </Checkbox.Group>
                  }
                  {
                    // 主观题
                    item.question.question_type == 3 &&
                    <div className="mt10 pl30 pr30 pb20">
                      <textarea placeholder="在此填入答案" readOnly className="winput-100-130"></textarea>
                    </div>
                  }
                  
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}
export default PollDetailTabThird