<template>
  <div>
    <Button @click="modal = true">添加试卷</Button>
    <Modal
        width="980"
        v-model="modal"
        title="试题上传"
        @on-ok="ok"
        @on-cancel="cancel">
        <div>
          <Select v-model="select" style="width:200px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <div>
            <question @question="getquestion" v-if="select==1"></question>
            <exercise @exercise="getexercise" v-if="select==2"></exercise>
            <gestalts @gestalts="getGestalts" v-if="select==3"></gestalts>
          </div>
        </div>
        <div slot="footer"></div>
    </Modal>
    <div v-show="getGestaltList.length>0">
      一.单选题
      <div v-for="(gest,i) in getGestaltList" :key="i">
        <div @click="revise(i,gest)">
          {{i+1}}.{{gest.title}}
          <div v-for="(item,id) in gest.questions" :key="id">
            ({{id+1}})
            <div v-for="(obj,ip) in item.obj" :key="ip" class="erji">
              <span>{{ip}}.</span><span>{{obj}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import question from "./components/question/question.vue";
import exercise from "./components/exercise/exercise.vue"
import gestalts from "./components/gestalts/gestalts.vue"
export default {
  data () {
    return {
      modal: false,
      select:'1',
      cityList: [
        {
          value: '1',
          label: '选择题'
        },
        {
          value: '2',
          label: '填空题'
        },
        {
          value: '3',
          label: '完形填空'
        }
      ],
      // selectList:[],
      getquestionList:[],
      getexerciseList:[],
      getGestaltList:[],
      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"]
    }
  },
  components:{
    question,
    exercise,
    gestalts
  },
  watch:{
    modal(){
      var modal=this.modal
      if(this.modal==false){
        localStorage.clear();
      }
    }
  },
  methods: {
    revise(index,list){
      // console.log(index,list)
      var data={index,list};
      var obj=JSON.stringify(data)
      localStorage.setItem('gestList',obj)
      var list = localStorage.getItem('gestList')
      console.log(list)
      var arr=JSON.parse(list)
      console.log(arr)
      this.modal=true;
      this.select="3"
    },
    getquestion(data){
      this.getquestionList.push(data);
      console.log(data)
      this.modal=false;
      this.select="1"
      localStorage.clear();
    },
    getexercise(data){
      this.getexerciseList.push(data);
      this.modal=false;
      this.select="1"
      localStorage.clear();
    },
    getGestalts(data){
      this.getGestaltList.push(data);
      console.log(this.getGestaltList)
      this.modal=false;
      this.select="1"
      localStorage.clear();
    },
    ok () {
      this.$Message.info('Clicked ok');
    },
    cancel () {
      this.$Message.info('Clicked cancel');
    }
  }
}
</script>
<style scoped>
.yiji{
  display: flex;
  justify-content: flex-start;
}
.erji{
  display: inline-block;
}
</style>