<template>
  <body>
  <div class="container1">
    <van-nav-bar :title="title"  >
      <van-icon slot="left" name="arrow-left" @click="clickBack"/>
    </van-nav-bar>

    <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 class="page2">
        <button class="weui-btn weui-btn_mini weui-btn_default" @click="showPopup2">提交</button>
      </div>
            <div >
              <text>&nbsp;</text>
            </div>
    </div>

    <div>
    <!--      <van-tag type="success">{{typeContent}}</van-tag>-->
          <div class="title">第{{current}}题:&nbsp;&nbsp;{{stemName[current-1]}}</div>

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

        <van-checkbox-group :value=selectedArray[current-1] :model="selectedArray[current-1]" :max="maxChoice" @change="onChange($event)">
              <van-cell-group>
                <van-cell
                  v-for="(option,index) in stemOptionList[current-1]"
                  :key=option.id
                  clickable
                  @click="toggle"
                  :data-name="option.content">

                  <van-checkbox
                    :name=option.content>
                    {{array[index]}}.&nbsp;&nbsp;{{option.content}}
                  </van-checkbox>
                </van-cell>
              </van-cell-group>
              <div>
                 <text>已选选项：{{answer[current-1]}}</text>
              </div>
        </van-checkbox-group>
        </div>

    <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;{{stemAnalysis[current-1]}}</p>
      <div >
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;所以选&nbsp;&nbsp;{{stemAnswer[current-1][0]}}</p>
    </van-popup>

    <van-popup
      :show=show2
      round
      closeable
      position="bottom"
      custom-style="height: 50%"
      @close="onClose2"
    >

      <h3 class="title1">▲练习结果 </h3>
      <div>
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;你的答案是：{{answer}}</p>
      <div >
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;正确答案为：{{stemAnswer}}</p>
      <div >
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;答案比对：{{answerJudge}}</p>
      <div >
        <text>&nbsp;</text>
      </div>
      <p class="p2">&nbsp;&nbsp;正确率：{{right/total*100}}%</p>

   </van-popup>
  </div>



  <div class="weui-footer weui-footer_fixed-bottom">
    <div class="weui-flex">
       <div class="weui-flex__item">
         <a href="javascript:" class="weui-btn weui-btn_primary" @click="last">上一题</a>
       </div>
       <div class="weui-flex__item">
         <a href="javascript:" class="weui-btn weui-btn_primary" @click="next">下一题</a>
       </div>
    </div>
    <div>
      <text>&nbsp;</text>
    </div>

    <div class="weui-flex__item">
      <a href="javascript:" class="weui-btn weui-btn_default" @click="addMistake">加入到错题本</a>
    </div>
    <div>
      <text>&nbsp;</text>
    </div>

    <p class="weui-footer__text">Copyright &copy; 2020-2021 seven-head</p>
  </div>

  </body>
</template>

<script>
  import HttpKit from '@/utils/http-kit'
  const SIGNAL = "SIGNAL_CHOICE";
  const MUL = "MULTIPLE_CHOICE";
  export default {
    data() {
      return {
        stemArray: [],//题干数组
        stemName:[],//题目名字
        stemOptionList:[],//题目选项
        stemAnalysis:[],//题目解析
        stemAnswer:[],//题目正确答案
        answerJudge:[],//判断题目正误，对的打勾，错的打叉
        right: 0,//正确题数
        array:['A','B','C','D'],
        answer:[[]],
        paperID: 0,

        _type: 1,   //
        typeContent: "单选",  //标签
        current: 1,  //当前题目
        total: 5,    //总题数
        title: "练习",

        maxChoice: 1,  //判断单选或多选，单选为1，多选为4
        selected: [],   //存储已选选项的内容option.content
        selectedArray: [[]],

        show1: false,  //解析的show
        show2: false,  //答题卡的show
      }
    },

    components: {},

    methods: {
      detail () {

      },

      toggle(event) {
        let val = event.mp.currentTarget.dataset.name;
        if (this.selected.length < this.maxChoice) {
          this.selectedArray[this.current-1]=[]
          this.selectedArray[this.current-1].push(val)
          console.log(this.selectedArray[this.current-1])

          this.selected.push(val)
        } else{
          this.selectedArray[this.current-1]=[]
          this.selectedArray[this.current-1].push(val)

          this.selected.splice(0,1,val);
        }

        console.log(this.answer)
        console.log(this.selected)

        //将答案存进answer数组里
        let value = event.mp.currentTarget.dataset.eventid.split('_')
        this.answer[this.current-1] = []
        this.answer[this.current-1][0] = this.array[value[1]];
      },

      clickBack() {
        console.log("返回");
        const url = "../frontPractise/main";
        wx.switchTab({
          url
        })
      },

      onChange(event) {
      },

      showPopup1() {
        this.show1 = true;
      },

      next() {
        //下一题
        if (this.current < this.total) {
          this.current = this.current+1
        }
      },
      last() {
        //上一题
        if (this.current > 1) {
          this.current = this.current-1
        }
      },
      addMistake() {
        console.log('1015' + this.stemArray[this.current-1].id)
        console.log('1016 ' + wx.getStorageSync('uid'))
        //添加到错题本
        HttpKit.post('/wx/wrongbook/add', {
          "gradeName": this.grade,
          "groupName": "小学",
          "sid": this.stemArray[this.current-1].id,
          "subject": this.subject,
          "uid": wx.getStorageSync('uid')
        })
        .then(res => {
        })
        .catch(err => {
        })
      },

      onClose1() {
        this.show1 = false;
      },
      showPopup2() {
        this.show2 = true;
        this.right = 0;
        this.rightRatio = 0;
        for(var i=0;i<this.total;i++){
          if(this.answer[i][0] == this.stemAnswer[i][0]){
            this.answerJudge[i]="√";
            this.right=this.right+1;
          }
          else{
            this.answerJudge[i]="×";
          }
        }
      },

      onClose2() {
        this.show2 = false;
      },

    },

    onLoad(option) {
      this.subject = option.subject;
      if(this.subject == '0'){
        this.subject = '语文'
      }else if(this.subject == '1'){
        this.subject = '数学'
      }else if(this.subject == '2'){
         this.subject = '英语'
      }
      this.grade = option.grade;

      //初始化
      this.current=1;
      this.selectedArray=[]
      for(var i=0;i<this.total;i++){
        this.stemArray[i] = []
        this.stemName[i] = []
        this.stemOptionList[i] = []
        this.stemAnalysis[i] = []
        this.stemAnswer[i] = []
        this.answer[i] = []
        this.answer[i][0] = '未选'
      }

      HttpKit.post('/wx/exam/list', {
          gradeName: this.grade,
          groupName: '小学',
          subject: this.subject,
      })
      .then(res => {
        console.log("gradeName:"+this.grade+this.subject)
        this.paperID = res.data[0].id
        console.log(this.paperID)
        for(var i=0;i<this.total;i++){
          this.stemArray[i] = res.data[0].stems[i]
          this.stemName[i] = res.data[0].stems[i].name
          this.stemOptionList[i] = res.data[0].stems[i].optionList
          this.stemAnalysis[i] = res.data[0].stems[i].analysis
          this.stemAnswer[i] = res.data[0].stems[i].answer
        }
      })
      .catch(err => {
      })

    },

    created() {
      this.detail();
    }
  }
</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>
