<template>
  <div>
    <!-- 题干 -->
    <div>
      <span>题干：</span><input v-model="title" type="text">
    </div>
    <!-- 题干结束 -->
    <div>
      <div v-for="(cont,index) in content" :key="index">
        <span>{{cont}}</span>.<input v-model="charList[index]" type="text">
      </div>
      <Button @click="addContent">添加选项</Button>
      <Button @click="delContent">删除选项</Button>
    </div>
    <div>
      <RadioGroup v-model="labelActive">
        <Radio v-for="(cont,index) in content" :key="index" :label="cont"></Radio>
      </RadioGroup>
    </div>
    <div>
      <Button @click="add">提交</Button>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      title:"",
      char:["A","B","C","D","E","F","G","H","I","J","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
      content:["A","B","C","D"],
      charList:[],
      labelActive:"",
      index:""
    }
  },
  props:[
    'modal'
  ],
  watch:{
    modal(){
      var modal=this.modal
      if(modal==false){
        localStorage.clear();
        this.title="";
        this.charList=[];
        this.labelActive="";
        this.index="";
      }else{
        if(this.title==""){
          this.mountedList()
        }
      }
    }
  },
  // mounted(){
  //   this.mountedList()
  // },
  methods:{
    mountedList(){
      var local=localStorage.getItem('questList');
      if(!local){

      }else{
        var question=JSON.parse(local)
        var list=question.list;
        console.log(question.list)
        this.index=question.index;
        this.title=list.title;
        this.labelActive=list.labelActive;
        var obj=list.selectObj;
        this.content=[];
        var num=0;
        for(var arr in obj){
          this.content[num]=this.char[num]
          num=num+1;
          console.log(num)
          this.charList.push(obj[arr])
        }
        // console.log(this.content.length,num)
        // if(this.content.length!=num){
        //   this.content.pop()
        // }
      }
    },
    add(){
      var title=this.title;
      if(!title){
        this.$Message.warning('请输入题干内容');
        return;
      }
      var selectObj={}
      for(var obj in this.content){
        if(!this.charList[obj]){
          selectObj[this.char[obj]]=""
        }else{
          selectObj[this.char[obj]]=this.charList[obj]
        }
      }
      var labelActive=this.labelActive;
      var i=this.content.indexOf(labelActive);
      if(!labelActive||i<0){
        this.$Message.warning('请选择答案选项');
        return;
      }
      var uid=this.index;
      var question={
        uid,
        list:{
          title,
          selectObj,
          labelActive,
          order:1
        }
      };
      this.$emit('question',question);
      this.title="";
      this.labelActive="";
      this.charList=[];
      this.content=["A","B","C","D"]
    },
    addContent(){
      this.content.push(this.char[this.content.length]);
    },
    delContent(){
      if(this.content.length>2){
        this.content.pop()
      }else{
        this.$Message.warning('至少保留两个选项');
      }
    }
  }
}
</script>