<template>
  <div class="layout">
    <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="title">能力自测 测试说明</div>
          <img src="../../assets/images/tab1bg.png" alt="">
          <p class="ti">自测考试时间20分钟</p>
          <p class="tx">考试题目共33题，分四部分</p>
          <p class="tx">单选题共15题</p>
          <p class="tx">多选题共10题</p>
          <p class="tx">判断题共5题</p>
          <p class="tx">案例题共1题</p>
          <p class="ti2">随时自测了解知识掌握情况</p>
          <p class="ti2">成绩报告准确分析提升成绩</p>
          <div class="btn" @click="abilityExam">开始测试</div>
        </div>
        <div v-show="tabNav.navIndex == 1" class="tab2">
          <ul class="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" class="tab3">
          <ul>
            <template v-for="(item, index) in courseList">
              <li :key="index" @click="courseNodeDetail(item.course_id)">
                <div class="tit">{{ item.course_name }}</div>
                <van-icon name="arrow" class="arr"/>
              </li>
            </template>
          </ul>
        </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>
  </div>
</template>

<script>
import * as api from '@/api/courseExam.js'
import * as courseApi from '@/api/course.js'
import { Icon, Toast } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast
  },
  data() {
    return {
      isExamPop: false,
      isExamPopTo: false,
      tabNav: {
        navText: ['能力自测', '随堂小测', '知识点小测'],
        navIndex: 0
      },
      CourseChapter: [],
      courseList: []
    }
  },
  computed: {
    isWeapp() {
      return this.$store.state.isWeapp
    }
  },
  metaInfo () {
    return {
      title: '课程测验',
      meta: [
        // { vmid: 'description', name: 'description', content: this.description }
      ]
    }
  },
  created() {
    if (this.$route.query.t === 1) {
      this.goAbilityExam2(1)
    }
  },
  mounted() {
    if (window.localStorage.examTab === '1' || window.localStorage.examTab === 1) {
      this.getCourseChapterList()
      this.tabNav.navIndex = 1
    } else {
      if (window.localStorage.isExamEnd === 'true' || window.localStorage.isExamEnd === true) {
        this.init()
      }
      this.tabNav.navIndex = 0
    }
    // this.getCourseChapterList()
    this.scrollDom()
  },
  // beforeMount() {
  // },
  methods: {
    courseNodeDetail(id) {
      const path = `/exam/courseNode?id=${id}`
      if (this.isWeapp) {
        const src = encodeURIComponent(`${window.location.origin}${path}`)
        wx.miniProgram.navigateTo({
          url: `/pages/web/index?src=${src}`
        })
      } else {
        this.$router.push({ path })
      }
      // this.$router.push({
      //   path: '/exam/courseNode',
      //   query: {
      //     id: id
      //   }
      // })
    },
    getCourseList() {
      courseApi.getCourseList().then(response => {
        this.courseList = response
        Toast.clear()
      })
    },
    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)
        }
      })
    },
    goAbilityExam2(n) {
      window.localStorage.examTab = 0
      // const path = `/exam/answer?type=1&is_create=${n}&papersUrl=zy/v2/examination/examination-papers`
      // if (this.isWeapp) {
      //   const src = encodeURIComponent(`${window.location.origin}${path}`)
      //   wx.miniProgram.navigateTo({
      //     url: `/pages/web/index?src=${src}`
      //   })
      // } else {
      //   this.$router.push({ path })
      // }
      this.$router.replace({
        path: '/exam/answer',
        query: {
          type: 1,
          is_create: n,
          papersUrl: 'zy/v2/examination/examination-papers'
        }
      })
    },
    goAbilityExam(n) {
      window.localStorage.isExamEnd = true
      window.localStorage.examTab = 0
      this.$router.push({
        path: '/exam/answer',
        query: {
          type: 1,
          is_create: n,
          papersUrl: 'zy/v2/examination/examination-papers'
        }
      })
    },
    startExam(event, id, cId, isCreate) {
      // const path = `/exam/answer?type=1&is_create=${isCreate}&course_id=${cId}&chapter_id=${id}&papersUrl=zy/v2/examination/course-papers`
      // if (this.isWeapp) {
      //   const src = encodeURIComponent(`${window.location.origin}${path}`)
      //   wx.miniProgram.navigateTo({
      //     url: `/pages/web/index?src=${src}`
      //   })
      // } else {
      //   this.$router.push({ path })
      // }
      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) {
      // const path = `/exam/result?type=1&is_create=${isCreate}&course_id=${cId}&chapter_id=${id}&papersUrl=zy/v2/examination/course-papers`
      // if (this.isWeapp) {
      //   const src = encodeURIComponent(`${window.location.origin}${path}`)
      //   wx.miniProgram.navigateTo({
      //     url: `/pages/web/index?src=${src}`
      //   })
      // } else {
      //   this.$router.push({ path })
      // }
      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()
    },
    async tab(e) {
      const isLogin = await this.$store.dispatch('checkLogin')
      if (e === 1 || e === 2) {
        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
        } else {
          Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration: 1000
          })
          if (e === 1) {
            window.localStorage.examTab = e
            this.getCourseChapterList()
          } else {
            window.localStorage.examTab = 0
            this.getCourseList()
          }
        }
      }
      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
        Toast.clear()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.course-box{
  // padding: 0 .4rem;
  .tab-nav{
    height: 1.1rem;
    padding: 0 .4rem;
    ul{
      border-bottom: .01rem solid #EEEEEE;
      display: flex;
      justify-content: space-between;
      li{
        line-height: 1.1rem;
        font-size: .3rem;
        color:#999999;
      }
      li.active{
        color: #222;
        font-weight: bold;
        border-bottom: .02rem solid #2B7CE9;
      }
    }
  }
  .tab-con{
    overflow-y: scroll;
    padding-bottom: 1rem;
    .tab1{
      // padding-top: .2rem;
      padding: .2rem .4rem 0 .4rem;
      .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;
      }
      .title{
        font-size:.4rem;
        font-weight:bold;
        color:rgba(255,103,103,1);
        line-height: 100%;
        padding-top: .2rem;
        text-align: center;
      }
      img{
        width: 5.01rem;
        height: 3.98rem;
        display: block;
        margin: 0.2rem auto 0 auto;
      }
      p{
        line-height: 100%;
        font-size: .26rem;
        color: #222;
        text-align: center;
      }
      .tx{
        margin-top: .2rem;
      }
      .ti{
        font-size: .3rem;
        margin: .4rem 0 .2rem 0;
        font-weight: bold;
      }
      .ti2{
        font-size: .3rem;
        font-weight: bold;
        margin-top: .4rem;
      }
    }
    .tab2{
      .ul{
        padding: 0 .4rem;
        li{
          .parent{
            display: flex;
            border-bottom: .01rem solid #EEEEEE;
            padding: 0.4rem 0;
            align-items: center;
            .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;
                }
              }
            }
          }
        }
      }
    }
    .tab3{
      ul{
        padding:0 .4rem;
        li{
          display: flex;
          padding: .4rem 0;
          border-bottom: .01rem solid #eee;
          align-items: center;
          .tit{
            width: 6.15rem;
            color: rgba(34,34,34,1);
            font-size: .3rem;
            font-weight: bold;
          }
          .arr{
            margin-left: auto;
          }
        }
      }
    }
  }
}
.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>
