<template>
  <div class="course-box">
    <div class="tab-nav" id="top-view">
      <ul>
        <li
          :class="index === tabNav.navIndex ? 'active' : ''"
          :key="index"
          @click="tab(index)"
          v-for="(item, index) in tabNav.navText"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="tab-con" id="bottom-view">
      <div v-show="tabNav.navIndex === 0" class="tab1">
        <div class="txt">
          设计盒子为您提供2.5D风格公交站台等候公交车png图片
素材免费下载服务，这款素材采用的是EPS矢量图格式，
同时我们还会提供一个宽度分辨率为1500像素的透明背景
png图片，可以方便你直接应用到自己的设计作品中，我们
还提供设计盒子为您提供2.5D风格公交站台等候公交车png图片
        </div>
        <div class="btn" @click="abilityExam">确定</div>
      </div>
      <div v-show="tabNav.navIndex === 1" class="tab2">
        <ul>
          <template v-for="(item, index) in CourseChapter">
            <li @click="listFold(item)" :key="index">
              <div class="parent">
                <div class="title">{{ item.course_name }}</div>
                <template v-if="item.isShow">
                  <van-icon v-if="item.isShow === false" name="arrow" class="arrow"/>
                  <van-icon v-else name="arrow-down" class="arrow"/>
                </template>
                <template v-else>
                  <van-icon name="arrow" class="arrow"/>
                </template>
              </div>
              <div :class="item.isShow === undefined ? 'hide' : item.isShow ? 'show' : 'hide'">
                <template v-for="(cItem, cIndex) in item.curriculum.chapters_examination">
                  <ul :key="cIndex">
                    <li>
                      <div class="txt">{{ cItem.children[0].name }}</div>
                      <div class="btn-box">
                        <div v-if="cItem.children[0].status == 100" @click="startExam($event, cItem.children[0].id, item.course_id, 1)" class="tag">测试</div>
                        <div v-if="cItem.children[0].status == 0 || cItem.children[0].status == 3" @click="startExam($event, cItem.children[0].id, item.course_id, 0)" class="tag">继续测试</div>
                        <template v-if="cItem.children[0].status == 1 || cItem.children[0].status == 2">
                          <div @click="startExam($event, cItem.children[0].id, item.course_id, 1)" class="tag">重新测试</div>
                          <div @click="viewReport($event, cItem.children[0].id, item.course_id, 0)" class="tag">报告</div>
                        </template>
                      </div>
                    </li>
                  </ul>
                </template>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div v-show="tabNav.navIndex === 2">3</div>
    </div>
    <div class="exam_submit" v-if="isExamPop">
      <div class="pop">
        <div class="tit">能力自测</div>
        <div class="txt">您上次未做完试题</div>
        <div class="btn_box">
          <div class="btn" @click="goAbilityExam(1)">重新答题</div>
          <div class="btn btn2" @click="goAbilityExam(0)">继续答题</div>
        </div>
      </div>
    </div>
    <div class="exam_submit" v-if="isExamPopTo">
      <div class="pop">
        <div class="tit">能力自测</div>
        <div class="txt">考试还未结束确定退出考试？</div>
        <div class="btn_box">
          <div class="btn" @click="isExamPopTo = false">看看其他</div>
          <div class="btn btn2" @click="goAbilityExam(0)">继续考试</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/courseExam.js'
import { Icon } from 'vant'
export default {
  components: {
    [Icon.name]: Icon
  },
  data() {
    return {
      isExamPop: false,
      isExamPopTo: false,
      tabNav: {
        navText: ['能力自测', '随堂小测', '知识点小测'],
        navIndex: 0
      },
      CourseChapter: []
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  metaInfo () {
    return {
      title: '课程测验',
      meta: [
        // { vmid: 'description', name: 'description', content: this.description }
      ]
    }
  },
  mounted() {
    // this.getCourseChapterList()
    this.scrollDom()
    this.init()
  },
  methods: {
    async init() {
      const param = {
        type: 1
      }
      const isLogin = await this.$store.dispatch('checkLogin')
      if (isLogin) {
        api.getExamStatus(param).then(res => {
          if (res.status === '0' || res.status === '3') {
            this.isExamPopTo = true
          }
        })
      }
    },
    async abilityExam() {
      const isLogin = await this.$store.dispatch('checkLogin')
      if (!isLogin) {
        this.goAbilityExam(1)
        return false
      }
      const param = {
        type: 1
      }
      api.getExamStatus(param).then(res => {
        if (res.status === '0' || res.status === '3') {
          this.isExamPop = true
        } else {
          this.goAbilityExam(1)
        }
      })
    },
    goAbilityExam(n) {
      this.$router.push({
        path: '/exam/answer',
        query: {
          type: 1,
          is_create: n,
          papersUrl: 'zy/v2/examination/examination-papers'
        }
      })
    },
    startExam(event, id, cId, isCreate) {
      this.$router.push({
        path: '/exam/answer',
        query: {
          course_id: cId,
          chapter_id: id,
          type: 1,
          is_create: isCreate,
          papersUrl: 'zy/v2/examination/course-papers'
        }
      })
      event.stopPropagation()
    },
    viewReport(event, id, cId, isCreate) {
      this.$router.push({
        path: '/exam/result',
        query: {
          course_id: cId,
          chapter_id: id,
          type: 1,
          is_create: isCreate,
          papersUrl: 'zy/v2/examination/course-papers'
        }
      })
      event.stopPropagation()
    },
    go() {
      this.$router.push('/exam/answer')
    },
    async tab(e) {
      const isLogin = await this.$store.dispatch('checkLogin')
      console.log(isLogin)
      if (e === 1 || e === 2) {
        this.getCourseChapterList()
        if (!isLogin) {
          if (this.isWeapp) {
            // 小程序
            wx.miniProgram.navigateTo({
              url: `/pages/login/index?redirect_uri=${encodeURIComponent(
                `/pages/web/index?src=${window.location.origin}/course/learn`
              )}`
            })
          } else {
            this.$router.push({ name: 'login' })
          }
          return
        }
      }
      this.tabNav.navIndex = e
      this.scrollDom()
    },
    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'
    },
    listFold(e) {
      if (e.isShow !== undefined) {
        e.isShow ? e.isShow = false : e.isShow = true
      } else {
        e.isShow = true
      }
      this.$forceUpdate()
    },
    getCourseChapterList() {
      api.getCourseChapterList().then(res => {
        this.CourseChapter = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.course-box{
  padding: 0 .4rem;
  .tab-nav{
    border-bottom: .01rem solid #EEEEEE;
    height: 1.1rem;
    padding: 0 .4rem;
    ul{
      display: flex;
      justify-content: space-between;
      li{
        line-height: 1.1rem;
        font-size: .3rem;
        color:#999999;
      }
      li.active{
        font-weight: bold;
        border-bottom: .02rem solid #2B7CE9;
      }
    }
  }
  .tab-con{
    overflow-y: scroll;
    padding-bottom: 1rem;
    .tab1{
      padding-top: .2rem;
      .txt{
        font-size: .26rem;
        color: #222;
        line-height: .26ren;
      }
      .btn{
        position: fixed;
        bottom: .15rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
        width:6.7rem;
        height:.7rem;
        background:rgba(255,103,103,1);
        border-radius:.12rem;
        text-align: center;
        line-height: .7rem;
        color: #fff;
        font-size: .3rem;
      }
    }
    .tab2{
      ul{
        li{
          .parent{
            display: flex;
            border-bottom: .01rem solid #EEEEEE;
            padding: 0.4rem 0;
            .title{
              font-size: .3rem;
              color: #222222;
              font-weight: bold;
            }
            .arrow{
              margin-left: auto;
            }
          }
          .hide{
            display: none;
          }
          .show{
            display: block;
          }
          ul{
            li{
              display: flex;
              border-bottom: .01rem solid #EEEEEE;
              padding: 0.4rem 0;
              .txt{
                font-size: .26rem;
                color: #999999;
              }
              .btn-box{
                margin-left: auto;
                display: flex;
                .tag{
                  line-height: .46rem;
                  height: .46rem;
                  font-size: .26rem;
                  color: #fff;
                  padding: 0 .3rem;
                  margin-left: .2rem;
                  background: #67A8FF;
                  border-radius: .25rem;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
    }
  }
}
.exam_submit{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  .pop{
    width: 5.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    background:rgba(255,255,255,1);
    border-radius:.12rem;
    padding: 0.4rem 0;
    .tit{
      font-weight:bold;
      color:rgba(34,34,34,1);
      font-size:.3rem;
      text-align: center;
      line-height: 100%;
    }
    .txt{
      color:rgba(34,34,34,1);
      font-size:.3rem;
      text-align: center;
      line-height: 100%;
      margin-top: .8rem;
    }
    .btn_box{
      padding:0 0.2rem;
      display: flex;
      margin-top: .8rem;
      .btn{
        width:2.6rem;
        height:.7rem;
        background:rgba(43,124,233,1);
        border-radius:.12rem;
        text-align: center;
        line-height: .7rem;
        color: #fff;
        font-size: .3rem;
      }
      .btn2{
        margin-left: auto;
      }
    }
  }
}
</style>
