<template>
  <div>
    <div class="top-tab">
      <div :class="activeClass == '0' ? 'left btn active' : 'left btn'" @click="tab('0')">
        <div class="num">{{ question.errorTotal }}</div>
        <div class="txt">错题总数</div>
      </div>
      <div :class="activeClass == '1' ? 'right btn active' : 'right btn'" @click="tab('1')">
        <div class="num">{{ question.total }}</div>
        <div class="txt">做题总数</div>
      </div>
    </div>
    <div class="exam-con">
      <div class="sele" @click="screen.isShow = true">
        <div class="title">选择题型</div>
        <div class="txt">
          <div class="t">{{ screen.checkedText }}</div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="question-box">
      <ul>
        <template v-for="(item, index) in question.list">
          <template v-if="changeGroup">
            <template v-if="screen.screenVal == 0">
              <li :key="index" v-if="item.is_right == '0'">
                <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
                <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
                <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
                <img src="../../assets/images/que-type4.png" alt="" v-if="item.question_type == '1'">
                <div class="text">{{ item.question.question_content }}</div>
                <div class="del" @click="del(item.id)">删除</div>
              </li>
            </template>
            <template v-else>
              <li :key="index" v-if="item.is_right == '0' && item.question_type == screen.screenVal">
                <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
                <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
                <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
                <img src="../../assets/images/que-type4.png" alt="" v-if="item.question_type == '1'">
                <div class="text">{{ item.question.question_content }}</div>
                <div class="del" @click="del(item.id)">删除</div>
              </li>
            </template>
          </template>
          <template v-else>
            <template v-if="screen.screenVal == 0">
              <li :key="index">
                <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
                <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
                <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
                <img src="../../assets/images/que-type4.png" alt="" v-if="item.question_type == '1'">
                <div class="text">{{ item.question.question_content }}</div>
                <div class="del" @click="del(item.id)">删除</div>
              </li>
            </template>
            <template v-else>
              <li :key="index" v-if="item.question_type == screen.screenVal">
                <img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
                <img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
                <img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
                <img src="../../assets/images/que-type4.png" alt="" v-if="item.question_type == '1'">
                <div class="text">{{ item.question.question_content }}</div>
                <div class="del" @click="del(item.id)">删除</div>
              </li>
            </template>
          </template>
        </template>
      </ul>
    </div>
    <div class="sele-pop" v-if="screen.isShow">
      <div class="picker">
        <van-picker
          show-toolbar
          :columns="screen.columns"
          @confirm="onConfirm"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/my.js'
import { Toast } from 'vant'
export default {
  components: {
    [Toast.name]: Toast
  },
  data() {
    return {
      screen: {
        isShow: false,
        checkedText: '全部',
        columns: ['全部', '单选题', '多选题', '判断题', '案例题'],
        screenVal: '0'
      },
      question: {},
      activeClass: '0',
      changeGroup: false
    }
  },
  methods: {
    del(id) {
      api.deleteQuestion({ id: id }).then(res => {
        if (res.code === 0) {
          Toast('删除成功')
          this.initData()
        }
        console.log(res)
      })
    },
    tab(e) {
      this.screen.checkedText = '全部'
      this.screen.screenVal = 0
      this.activeClass = e
      e === '0' ? this.changeGroup = false : this.changeGroup = true
    },
    onConfirm(value, index) {
      const arr = [0, 1, 2, 5, 6]
      this.screen.checkedText = value
      this.screen.screenVal = arr[index]
      this.screen.isShow = false
    },
    initData() {
      api.getMyQuestion().then(res => {
        let count = 0
        this.question = res
        this.question.list.map(item => {
          if (item.is_right === '0') {
            count++
          }
        })
        this.question.errorTotal = count
      })
    }
  },
  mounted() {
    this.initData()
  }
}
</script>

<style lang="scss" scoped>
.top-tab{
  width: 6.7rem;
  height: 1.76rem;
  border-bottom: 0.01rem solid #eee;
  margin: 0 auto;
  display: flex;
  .btn{
    margin-left: 1rem;
    height: 100%;
    .num{
      text-align: center;
      line-height: 100%;
      font-size:.46rem;
      padding-top: .4rem;
      color: #999;
    }
    .txt{
      line-height: 100%;
      font-size: .3rem;
      margin-top: .2rem;
      color: #999;
    }
  }
  .active{
    border-bottom: 0.06rem solid rgba(43,124,233,1);
    .num{
      color:rgba(43,124,233,1);
    }
    .txt{
      color:rgba(43,124,233,1);
    }
  }
  .right{
    margin-left: auto;
    margin-right: 1rem;
  }
}
.exam-con{
  padding: 0 .4rem;
  .sele{
    height: 1.06rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    .title{
      font-size: .26rem;
      color: #222;
    }
    .txt{
      font-size: .26rem;
      margin-left: auto;
      display: flex;
      align-items: center;
    }
  }
}
.sele-pop{
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  .picker{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.question-box{
  padding: 0 .4rem;
  ul{
    li{
      border-bottom: 0.01rem solid #eee;
      display: flex;
      padding-bottom: .4rem;
      margin-bottom: .4rem;
      img{
        width: .48rem;
        height: .6rem;
      }
      .text{
        width: 5.2rem;
        line-height:.34rem;
        font-size: .26rem;
        color:rgba(34,34,34,1);
        margin-left: .2rem;
        text-align: justify;
      }
      .del{
        margin-left: auto;
        font-size:.26rem;
        color: #999;
        line-height: 100%;
      }
    }
  }
}
</style>
