<template>
  <body>
  <div class="container1">


    <div class="weui-flex">
      <label class="choose">单项选择:</label>
      <div class="page1">
        <button class="weui-btn weui-btn_mini weui-btn_default" @click="showPopup1">解析</button>
      </div>
    </div>

    <div>
      <div class="title">第{{current}}题:&nbsp;&nbsp;{{stemList[current].name}}</div>
    </div>

    <div>
      <text>\n</text>
    </div>

    <van-checkbox-group :value=selected :max="maxChoice" @change="onChange($event)">
      <van-cell-group>

        <van-cell
          v-for="(option,index) in stemList[current].optionList"
          :key=option
          clickable
          @click="toggle($event,index)"
          :data-name="option.content"

        >
          <van-checkbox :name=option.content :checked-color="flag[index]?'#fa294a':''">
            {{array[index]}}.&nbsp;&nbsp;{{option.content}}
          </van-checkbox>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>


    <van-popup
      :show=show1
      round
      closeable
      position="bottom"
      custom-style="height: 45%"
      @close="onClose1"
    >

      <h3 class="title1">✳答案解析 </h3>
      <div>
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;{{stemList[current].analysis}}</p>
      <div>
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;所以选&nbsp;&nbsp;{{stemList[current].answer}}</p>

    </van-popup>


  </div>
  <footer>
    <div class="weui-flex">

      <div  class="weui-flex__item"><a href="javascript:" class="weui-btn weui-btn_primary" @click="lastQues" v-if="lastShow">上一题</a></div>
      <div  class="weui-flex__item"><a href="javascript:" class="weui-btn weui-btn_primary" @click="nextQues" v-if="nextShow">下一题</a></div>
    </div>

  </footer>

  </body>
</template>

<script type="text/javascript">
  const SIGNAL = "SIGNAL_CHOICE";
  const MUL = "MULTIPLE_CHOICE";

export default {
  components: {
  },
  data () {
    return {
      stemList:[],

      typeContent: "单选",  //标签
      total: 5,    //总题数
      title: "错题本-练习",

      current: 0,
      array:['A','B','C','D'],
      maxChoice: 4,  //判断单选或多选，单选为1，多选为4
      selected: [ ],

      show1: false,  //解析的show
      lastShow: true,
      nextShow: true,
      flag:[false,false,false,false],
    }
  },

  methods:{
    toggle(event,index) {
        let val = event.mp.currentTarget.dataset.name;
        if(this.maxChoice == 1){  //单选

          if (this.selected.length < this.maxChoice) {
            this.selected.push(val)
          } else{
            this.selected.splice(0,1,val);
          }
        } else{ //多选

          let index = this.selected.indexOf(val);
          if (this.selected.indexOf(val)==-1) {
            this.selected.push(val)
          } else {
            this.selected.splice(index, 1)
          }
        }

        this.flag[index]=(this.stemList[this.current].answer.indexOf(this.array[index])==-1)
        console.log(val);
      },
      clickBack() {
        console.log("返回");
        const url = "../frontPractise/main";
        wx.switchTab({
          url
        })
      },

      onChange(event) {
      },

      showPopup1() {
        this.show1 = true;
        //console.log(this.stem.optionList.indexOf(this.result.rightAnswer));
        //console.log(this.result.rightAnswer[0])
      },

      onClose1() {
        this.show1 = false;
      },
      lastQues(){
        this.current--
        this.nextShow=true
        if(this.stemList[this.current].type=="MULTIPE_CHOICE") this.maxChoice = 4
        else this.maxChoice= 1
        if(this.current<=0) this.lastShow=false
        this.selected=[]
      },
      nextQues(){
        this.current++
        this.lastShow=true
        if(this.stemList[this.current].type=="MULTIPE_CHOICE") this.maxChoice = 4
        else this.maxChoice= 1
        if(this.current>=this.stemList.length-1) this.nextShow = false
        this.selected=[]
      }
  },
  onLoad: function (option) {
      this.lastShow=true
      this.nextShow=true
      this.stemList = JSON.parse(wx.getStorageSync('key'))
      this.total = this.stemList.length
      this.current = option.index

      if(this.stemList[this.current].type=="MULTIPE_CHOICE") this.maxChoice = 4
      else this.maxChoice= 1

      if(this.current<=0) this.lastShow=false
      if(this.current>=this.stemList.length-1) this.nextShow = false

      console.log(this.total+" "+this.current)
      //console.log(this.stemList)
  }
}

</script>

<style scoped>
  .container1{
    min-height: 90%;
    min-width: 100%;
  }
  .footer{
    height: 100px;
  }
  .btn_1{

  }

  .choose{
    font-size: 40rpx;
    margin-left:10rps;
  }

  .title{
    font-size: 40rpx;
  }
  .title1{
    font-size: 40rpx;
    text-align: center;
    font-weight: bold;
  }
  .p2{
    font-size: 36rpx;
  }
  .page1 {
    margin-left:300rpx;
    margin-top:5rpx;
    display: flex;
    flex-direction: row-reverse;
  }

  .page2 {
    margin-left:20rpx;
    margin-top:5rpx;
    display: flex;
    flex-direction: row-reverse;
  }
</style>
