<template>
  <div>
    <!-- 题干 -->
    <div>
      <span>题干：</span><input v-model="title" type="text">
    </div>
    <!-- 题干结束 -->
    <div>
      <div v-for="(cont,index) in content" :key="index">
        <span>{{char[index]}}</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="char[index]"></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:[0,1,2,3],
      charList:[],
      labelActive:""
    }
  },
  methods:{
    add(){
      var title=this.title;
      if(!title){
        this.$Message.warning('请输入题干内容');
        return;
      }
      var selectObj={}
      for(var obj in this.content){
        selectObj[this.char[obj]]=this.charList[obj]
      }
      var labelActive=this.labelActive;
      if(!labelActive){
        this.$Message.warning('请选择答案选项');
        return;
      }
      var question={
        title,
        selectObj,
        labelActive
      };
      this.$emit('question',question);
      this.title="";
      this.labelActive="";
      this.charList=[];
      this.content=[0,1,2,3]
    },
    addContent(){
      this.content.push(this.content.length);
    },
    delContent(){
      if(this.content.length>2){
        this.content.pop()
      }else{
        this.$Message.warning('至少保留两个选项');
      }
    }
  }
}
</script>