<template>
  <div>
    <!-- 题干内容 star -->
    <div>
      <span>题干：</span><input type="text" v-model="title">
    </div>
    <!-- 题干内容 end -->

    <!-- 小题选项区域 star -->
    <div v-for="(questions,index) in s_questions" :key="index" class="div-border" :class="{'show-border':!questions.show}">
      <!-- 小题编号star -->
      <span>({{index+1}})</span>
      <!-- 小题编号end -->

      <!-- 小题选项star -->
      <RadioGroup v-model="questions.labelActive">
        <div class="radio-div">
          <div class="radio-div-text" v-for="(chart,i) in char" :key="i">
            <div v-if="questions.show" class="radio-text">
              <span>{{chart}}.</span>
              <span>{{questions.obj[chart]}}</span>
            </div>
            <div v-else>
              <!-- 单选标记star -->
              <Radio :label="chart">{{chart}}.</Radio>
              <!-- 单选标记end -->
              <!-- <span>{{chart}}.</span> -->
              <!-- 单选输入框star -->
              <input type="text" class="select-input" v-model="questions.obj[chart]">
              <!-- 单选输入框end -->
            </div>
          </div>
        </div>
      </RadioGroup>
      <!-- 小题选项end -->
      <div class="select-fun" :class="{'select-fun-hove':questions.show}">
        <span  v-show="questions.show" @click="zIndexUp(index)">向上</span>
        <span  v-show="questions.show" @click="zIndexDown(index)">向下</span>
        <span  v-show="questions.show" @click="edit(index)">编辑</span>
        <span v-show="!questions.show" @click="preserve(index)">保存</span>
        <span @click="del(index)">删除</span>
      </div>
    </div>
    <!-- 小题选项区域 end -->


    <div>
      <Button @click="addQuestions">添加小题</Button>
    </div>
      <Button @click="add">提交</Button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      title:"",  // 题干
      char:["A","B","C","D"],  // 小题选项
      s_questions:[],  // 小题选项列表
      index:"",
      clear:false
    }
  },
  watch:{
    clear(){
      var modal=this.modal
      console.log(modal)
      if(this.modal==false){
        localStorage.clear();
      }
    }
  },
  // 挂载结束后触发
  mounted(){
    var local=localStorage.getItem('gestList')
    if(!local){
      // 触发一行小题选项
      var arr=[];
      // 创建一个空对象
      var obj={};
      // 创建一个小题选项答案为空
      var data={};
      var show=false;
      var labelActive="";
      // 循环小题选项 this.char
      for(var char in this.char){
        obj[this.char[char]]=""
      }
      data={
        obj,
        labelActive,
        show
      }
      this.s_questions.push(data);
    }else{
      console.log(999)
      var questions=JSON.parse(local);
      this.s_questions=questions.list.questions;
      this.title=questions.list.title
      console.log(this.s_questions)
      this.index=questions.index
    }
  },
  methods:{
    // 首次加载
    swapArray(arr, index1, index2) {
      this.s_questions[index1] = this.s_questions.splice(index2, 1, arr[index1])[0];
        return this.s_questions;
    },
    zIndexDown(index){
      var arr=this.s_questions;
      var length=this.s_questions.length;
      if(index+1 != length){
          arr=this.swapArray(arr, index, index+1);
          this.s_questions=arr
      }else{
        this.$Message.warning('已经处于置底，无法下移');
      }
    },
    zIndexUp(index){
      var arr=this.s_questions;
      var length=this.s_questions.length;
      if(index!= 0){
          arr=this.swapArray(arr, index, index-1);
          this.s_questions=arr
      }else{
        this.$Message.warning('已经处于置顶，无法上移');
      }
    },
    edit(i){
      var questions=this.s_questions;
      for(var list in questions){
        if(questions[list].labelActive==""||questions[list].show==false){
          this.$Message.warning('尚有小题未保存');
          return; 
        }
      }
      this.s_questions[i].show=false
    },
    preserve(i){
      if(this.s_questions[i].labelActive==""){
        this.$Message.warning('未选择正确项');
        return;
      }
      this.s_questions[i].show=true
    },
    del(i){
      this.s_questions.splice(i,1)
    },
    // 提交试题
    add(){
      var uid=this.index;
      var title=this.title;
      if(title==""){
        this.$Message.warning('题干未填写');
        return;
      }
      var questions=this.s_questions;
      if(questions.length==0){
        this.$Message.warning('小题未填写');
        return;
      }
      for(var list in questions){
        if(questions[list].labelActive==""||questions[list].show==false){
          this.$Message.warning('尚有小题未保存');
          return; 
        }
      }
      var gestalts={
        title,
        questions,
        uid
      }
      // console.log(gestalts)
      this.$emit('gestalts',gestalts)
    },
    // 添加一行小题选项
    addQuestions(){
      // 创建一个空数组
      var arr=[];
      // 创建一个空对象
      var obj={};
      var show=false;
      // 创建一个小题选项答案为空
      var data={};
      var labelActive="";
      for(var label in this.s_questions){
        // console.log(this.s_questions)
        if(this.s_questions[label].labelActive==""||this.s_questions[label].show==false){
          // console.log(1)
          
          this.$Message.warning('尚有小题未保存');
          return;
        }
      }
      // 循环小题选项 this.char
      for(var char in this.char){
        obj[this.char[char]]=""
      }
      data={
        obj,
        labelActive,
        show
      }
      // arr.push(data)
      this.s_questions.push(data);
      // console.log(arr)
      // console.log(this.s_questions)
    }
  }
}
</script>
<style lang="less">
  @import './gestalts';
</style>
