<template>
  <body>
  <div class="container1">
    <div class="weui-flex">

      <i-icon class="clockIcon" type="clock" size="25" color="#9F9FA3" />
      <label class="choose">
        倒计时 :
        <i-count-down
                class="countDown"
                :target="targetTime"
                :format="myFormat"
                :clear-timer="clearTimer"
              ></i-count-down>
        </label>
      <div class="page1">
        <i-button type="success" @click="submit">提交</i-button>
      </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>

  <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>

      <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 {
        subject:"",
        grade:"",

        stem: [],//题干
        stemArray: [],//题干数组
        stemName:[],//题目名字
        stemOptionList:[],//题目选项
        stemId: {}, //题目id
        result: {}, //题目答案
        array:['A','B','C','D'],
        answer:[[]],
        paperID: 0,
        score: 0,

        movieArr: [],
        targetTime: 0,
        myFormat: "mm:ss",
        doTime:1800000,//设置做题时间40*1000ms
        clearTimer: false,

        _type: 1,   //
        typeContent: "单选",  //标签
        current: 1,  //当前题目
        total: 10,    //总题数

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

    onLoad(option) {
      this.targetTime = new Date().getTime() + this.doTime//倒计时初始化
      this.clearTimer = false

      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.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
        this.stem = res.data[0].stems
        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
        }
      })
      .catch(err => {
        console.log('error')
      })

    },

    onUnload() {
      this.clearTimer = true
    },

    components: {},

    methods: {
      detail () {

      },
      clickBack() {
        const url = "../frontExam/main";
        wx.switchTab({
          url
        })
      },
      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]];
      },

      onChange(event) {
      },

      submit() {
        //提交
        HttpKit.post('/wx/exam/score', {
          "answers": this.answer,
          "id": this.paperID
        })
        .then(res => {
          var resData = res.data
          const url = "../score/main?answer="+encodeURIComponent(JSON.stringify(this.answer))
            +"&resData="+encodeURIComponent(JSON.stringify(resData))
            +"&resStem="+encodeURIComponent(JSON.stringify(this.stem))
          wx.navigateTo({
            url
          })
        })
        .catch(err => {
        })
      },

      next() {
        //下一题
        if (this.current < this.total) {
          this.current = this.current+1
        }
      },

      last() {
        //上一题
        if (this.current > 1) {
          this.current = this.current-1
        }
      },

      onClose1() {
        this.show1 = false;
      }

    },

    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:350rpx;
    margin-top:5rpx;
    display: flex;
    flex-direction: row-reverse;
  }

</style>
