<template>
  <div>
    <div id="top-view">
      <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>
    <div class="question-box" id="bottom-view">
      <ul>
        <template v-for="(item, index) in question.list">
          <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>
      </ul>
      <div class="loading" v-if="isLogding">
        <div class="icon">
          <van-loading color="#1989fa" />
        </div>
      </div>
    </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: {
        list: []
      },
      activeClass: '0',
      changeGroup: false,
      isLogding: false,
      params: {
        is_error: 1,
        page: 1,
        page_size: 20
      },
      scrollFlag: false
    }
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.target.scrollTop
      const eScroll = e.target.scrollHeight - (document.getElementsByTagName('body')[0].offsetHeight - document.getElementById('top-view').offsetHeight)
      console.log(this.scrollFlag)
      if (this.scrollFlag) { return false }
      if (scrollTop === eScroll) {
        this.scrollFlag = true
        this.isLogding = true
        this.params.page = this.params.page + 1
        this.initData()
      }
    },
    scrollDom() {
      const topViewH = document.getElementById('top-view').offsetHeight
      const clientHeight = document.documentElement.clientHeight
      const bottomView = document.getElementById('bottom-view')
      bottomView.style.height = (clientHeight - topViewH) + 'px'
    },
    del(id) {
      api.deleteQuestion({ id: id }).then(res => {
        if (res.code === 0) {
          Toast('删除成功')
          this.initData()
        }
        console.log(res)
      })
    },
    tab(e) {
      if (e === '0') {
        this.params = {
          is_error: 1,
          page: 1,
          page_size: 20
        }
      } else {
        this.params = {
          is_error: 0,
          page: 1,
          page_size: 20
        }
      }
      this.screen.checkedText = '全部'
      this.screen.screenVal = 0
      this.activeClass = e
      e === '0' ? this.changeGroup = false : this.changeGroup = true
      document.getElementById('bottom-view').scrollTop = 0
      this.question.list = []
    },
    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(this.params).then(res => {
        res.list.map(item => {
          this.question.list.push(item)
        })
        this.question.total = res.total
        this.question.errorTotal = res.error_total
        this.scrollDom()
        if (res.list.length === 0) {
          Toast('没有更多了')
        } else {
          this.scrollFlag = false
        }
        this.isLogding = false
      })
    }
  },
  mounted() {
    this.initData()
    window.addEventListener('scroll', this.handleScroll, true)
  }
}
</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{
  overflow-y: scroll;
  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%;
      }
    }
  }
}
.loading{
  position: relative;
  width: 100%;
  padding-bottom: .4rem;
  .icon{
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
  }
}
</style>
