<template>
  <div class="card_box">
    <div class="head" id="top-view2">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div id="bottom-view2">
      <div class="card_con">
        <div class="flag">
          <ul>
            <li>
              <div class="circle active1"></div>
              <div class="txt">正确</div>
            </li>
            <li>
              <div class="circle active2"></div>
              <div class="txt">错误</div>
            </li>
            <li>
              <div class="circle active3"></div>
              <div class="txt">未答</div>
            </li>
          </ul>
        </div>
        <div class="question">
          <div class="tips" v-if="$route.query.type == 1">按答题时间排序，最新错题在前面</div>
          <div class="tips" v-if="$route.query.type  == 2">按答题时间排序，最新收藏题在前面</div>
          <ul>
            <template v-for="(item, index) in dataList">
              <li @click="goQuestionDetail(item.question_id)" :class="item.answer == 1 ? 'active1' : item.answer == 2 ? 'active2' : 'active3'" :key="index">
                <div class="circle">{{ index + 1 }}</div>
                <div class="txt">{{ questionType[item.question_type] }}</div>
              </li>
            </template>
          </ul>
          <van-empty description="暂无内容" v-if="dataList.length == 0"/>
        </div>
      </div>
    </div>
    <div class="clear-btn">
      <div class="btn" @click="clearQuestion">清空记录，重新答题</div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import * as api from '@/api/my.js'
export default {
  components: {
    [Toast.name]: Toast
  },
  mounted() {
    this.initData()
  },
  data() {
    return {
      questionType: {
        1: '单选题',
        2: '多选题',
        5: '案例题',
        6: '判断题'
      },
      dataList: []
    }
  },
  methods: {
    clearQuestion() {
      const param = {
        type: this.$route.query.type,
        question_type: this.$route.query.questionType,
        clear: 1
      }
      api.cacheQuestion(param).then(res => {
        Toast('清空成功')
        this.initData()
      })
    },
    goQuestionDetail(id) {
      const index = this.dataList.findIndex(item => { return item.question_id === id })
      window.localStorage.myQuestionDetileId = id
      this.$router.push({
        name: 'questionsDetails',
        query: {
          type: this.$route.query.type,
          questionType: this.$route.query.questionType,
          page: parseInt(index / 30) + 1
        }
      })
    },
    initData() {
      Toast.loading({
        message: '加载中...',
        duration: 5000,
        loadingType: 'spinner'
      })
      api.getAllQuestion({ type: this.$route.query.type, question_type: this.$route.query.questionType })
        .then(res => {
          this.dataList = res
          Toast.clear()
        })
        .catch(() => {
          this.dataList = []
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.card_box{
  width: 100%;
  height: 100%;
  background: #fff;
  .card_con{
    padding: 0 .4rem;
    overflow-y: scroll;
    .flag{
      border-bottom: 0.01rem solid #EEEEEE;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        li{
          margin: 0 .4rem 0.1rem .4rem;
          text-align: center;
          .circle{
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            font-size: .26rem;
            text-align: center;
            line-height: .6rem;
            color: #fff;
          }
          .active1{
            background: #67C23A;
          }
          .active2{
            background:#FA5555;
          }
          .active3{
            background:rgba(204,204,204,1);
          }
          .txt{
            color: #222222;
            font-size: .26rem;
            margin-top: 0.1rem;
          }
        }
      }
    }
    .question{
      .tips{
        margin-top: .4rem;
        font-size: .26rem;
        color:rgba(51,51,51,1);
        margin-left: .6rem;
      }
      .title{
        font-size: .3rem;
        color: #333333;
        margin-top: .1rem;
        margin-bottom: .4rem;
      }
      ul{
        list-style: none;
        margin-top: .5rem;
        padding: 0 0.6rem;
        border-bottom: 0.01rem solid #EEEEEE;
        display: flex;
        flex-wrap: wrap;
        li{
          position: relative;
          width: .6rem;
          height: .6rem;
          text-align: center;
          margin-right: .6rem;
          margin-bottom: .4rem;
          padding-bottom: .38rem;
          .circle{
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            font-size: .26rem;
            line-height: .6rem;
            color: #fff;
          }
          .txt{
            position: absolute;
            bottom: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            font-size: .2rem;
            color: #333;
            margin-top: .1rem;
            line-height: 100%;
            white-space:nowrap
          }
        }
        :nth-child(5n+5){
          margin: 0;
        }
        .active1{
          .circle{
            background: #67C23A;
          }
        }
        .active2{
          .circle{
            background:#FA5555;
          }
        }
        .active3{
          .circle{
            background:rgba(204,204,204,1);
          }
        }
      }
    }
  }
}
.head{
  color: #222;
  display: flex;
  padding: .4rem 0;
  align-items: center;
  i{
    font-size: .35rem;
    margin-left: .28rem;
  }
  .title{
    margin-left: .03rem;
    font-size: .3rem;
  }
}
#bottom-view2{
  overflow: scroll;
}
.card_box{
  padding-bottom: .9rem;
}
.clear-btn{
  position: fixed;
  bottom: 0;
  left: 0;
  width:100%;
  height:1rem;
  background:rgba(255,255,255,1);
  box-shadow:0rem 0rem .06rem 0rem rgba(0,0,0,0.05);
  .btn{
    width:6.7rem;
    height:.7rem;
    background:rgba(198,34,69,1);
    border-radius:.12rem;
    font-size:.3rem;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    margin: .15rem auto;
  }
}
</style>
