<template>
    <div class="courseDetail">
      <div class="cover" @click="nextLead" v-if="step != 0">
        <img src="../../../static/lead/10.png" class="img10" v-if="step == 10"/>
        <img src="../../../static/lead/11.png" class="img11" v-if="step == 11"/>
        <img src="../../../static/lead/12.png" class="img12" v-if="step == 12"/>
        <img src="../../../static/lead/13.png" class="img13" v-if="step == 13"/>
      </div>
      <back title="课程详情"></back>
      <div class="kind">
        <p @click="toggleTabs(1)" :class="choose==1?'active':''">视频</p>
        <p @click="toggleTabs(2)" :class="choose==2?'active':''">讲义</p>
        <p @click="toggleTabs(3)" :class="choose==3?'active':''">练习</p>
      </div>
      <div v-show="choose == 1" class="sp">
        <div class="shipin">
          <!--<video-player  class="video-player-box"-->
                         <!--ref="videoPlayer"-->
                         <!--:options="playerOptions"-->
                         <!--:playsinline="true"-->
                         <!--customEventName="customstatechangedeventname"-->
                         <!--@play="onPlayerPlay($event)"-->
                         <!--@pause="onPlayerPause($event)"-->
                         <!--@timeupdate="onPlayerTimeupdate($event)"-->
                         <!--@ended="onPlayerEnded($event)"-->
                         <!--@ready="playerReadied">-->
          <!--</video-player>-->
          <!--<video id="video" class="video" :src="playerOptions.src" controls="controls" x5-playsinline="" playsinline="" webkit-playsinline="true" :poster="playerOptions.poster"></video>-->
          <div id="video" class="video"></div>
        </div>
        <div class="mulu">
          <h2>课程目录   （共{{section.length}}讲）</h2>
        </div>
        <div class="mulu" v-for="(item,index) in section" :key="index" @click="changeSection(item.id)">
          <img src="../../../static/img/bofang1.png" alt="" v-if="index == choose_section_index">
          <img src="../../../static/img/play.png" alt="" v-if="index != choose_section_index">
          <div class="muluR">
            <p>第{{index+1}}课 {{item.name}}</p>
            <p>讲师：{{item.teacher_name}} | {{item.play_num}}人已学 | <span v-if="item.is_end == 0">学习中</span><span v-if="item.is_end == 1">已学完</span></p>
          </div>
        </div>
      </div>
      <div v-show="choose == 2" class="sp jy">
        <p class="biaoti">{{courseData.name}}</p>
        <div class="mulu" v-for="(item,index) in courseData.material">
          <img src="../../../static/img/xiazai1.png" alt="">
          <div class="muluR">
            <p>{{item.name}}</p>
            <p @click="download(item.url)">点击下载</p>
          </div>
        </div>
      </div>
      <div v-show="choose == 3" class="lx">
        <div v-if="current_question_data.type == 3">
          <div class="lianxiTiMu">
            <span class="lianxiTiMu1">单选题</span>
            <span>{{current_question_data.name}}</span>
          </div>
          <div class="lianxiTiMu" v-for="(item,index) in current_question_data.content" :key="index" @click="responseQ(item)">
            <span class="lianxiXueZe" v-bind:class="{ active: current_question_data.response == item }">{{xuhao[index]}}</span>
            <span class="lianxiXueZe1">{{item}}</span>
          </div>
          <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
            正确答案：{{current_question_data.answer}}<br/>错题解释：<br/>{{current_question_data.wrong_text}}
          </div>
        </div>
        <div v-if="current_question_data.type == 4">
          <div class="lianxiTiMu">
            <span class="lianxiTiMu1">多选题</span>
            <span>{{current_question_data.name}}</span>
          </div>
          <div class="lianxiTiMu" v-for="(item,index) in current_question_data.content" :key="index" @click="responseS(index)">
            <span class="lianxiXueZe" v-bind:class="{ active: current_question_data.response.indexOf(index) != -1 }">{{xuhao[index]}}</span>
            <span class="lianxiXueZe1">{{item}}</span>
          </div>
          <div class="lianxiTiMu cuoti" v-if="current_question_data.is_wrong == 1">
            正确答案：{{current_question_data.answer}}<br/>错题解释：<br/>{{current_question_data.wrong_text}}
          </div>
        </div>
        <div class="lianxiBottom">
          <div class="lianxiBottomL">
            <div @click="prevQ">上一题</div>
            <div @click="nextQ">下一题</div>
            <div @click="subQ">交卷</div>
          </div>

          <div class="lianxiBottomR" @click="popupVisible = true"><img src="../../../static/img/gengduo.png" alt=""><span>{{current_question + 1}}</span>/{{questions.length}}</div>
        </div>
      </div>
      <mt-popup v-model="popupVisible" position="bottom" >
        <div class="order_number">
          <div v-for="(item,index) in questions" :key="index" @click="goQ(index)" v-bind:class="{error: item.is_wrong == 1 && current_question != index,active: current_question == index}">
            {{index+1}}
          </div>
        </div>
      </mt-popup>
    </div>
</template>

<script>
    import Back from "../common/Back";
    import { getStore, setStore } from '@/utils/storage'
    import { Toast } from "mint-ui"
    import { videoPlayer } from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    import { MessageBox } from 'mint-ui'
    export default {
      name: "courseDetail",
      components:{
        Back,
        videoPlayer
      },
      data(){
        return {
          step: 0,
          choose: 1,
          playerOptions: {
            container: '#video', //容器的ID或className
            variable: 'player', //播放函数名称
            video: '',
            poster: '../../../static/img/tupian.png',
            flashplayer:false,
            loop: true
          },
          courseData:{},
          choose_section_index:0,
          choose_section_id:0,
          section:[],
          record:0,             //历史记录
          current_sign:0,         //当前观看的进度
          space_sign:0,         //保存历史记录的跨度
          video_timer:'',     //定时器
          video_obj:document.getElementsByTagName("video")[0],  //视频对象

          xuhao:['A','B','C','D','E','F','G','H','I','J','K','L','M','N'],
          questions:[],
          current_question:0,
          current_question_data:0,
          popupVisible: false,
          is_end: false

        }
      },
      created(){
      },
      mounted(){
        let id = this.$route.query.id
        this.getPageData(id)
        this.getStudyQuestions(id)
        let is_lead = getStore('is_lead2');
        if(!is_lead){
          this.step = 10;
        };
      },
      methods: {
        nextLead(){
          if (this.step == 11){
            this.step = 0
            setStore('is_lead2', true);
            MessageBox('提示', '首次上课进度条不可拖动，暂停后重新进入后从暂停位置继续开始播放')
          }else if (this.step == 13){
            this.step = 0
            setStore('is_lead3', true);
          }else{
            this.step++
          }
        },
        toggleTabs (tabText) {
          this.choose = tabText;
          if (tabText == 3){
            let is_lead = getStore('is_lead3');
            if(!is_lead){
              this.step = 12;
            }
          }
        },
        getPageData(id){
          this.getData('/Home/getCourseDetail',{token:getStore('token'), id: id}).then(
            data=>{
              if(data.code==1){
                this.courseData = data.data;
                this.section = data.data.section;
               // this.nextTick(() =>{})
                this.changeSection(data.data.recent_section);
              }else{
                Toast(data.msg);
              }
            },
            err=>{  })
        },
        getStudyQuestions(id){
          this.getData('/Question/getStudyQuestions',{token:getStore('token'), course_id: id}).then(
            data=>{
              if(data.code==1){
                this.questions = data.data;
                this.current_question_data = data.data[0]
              }else{
                Toast(data.msg);
              }
            },
            err=>{  })
        },
        changeSection(id){
          if(id == this.choose_section_id){
            return;
          }else{
            this.getData('/Home/getSectionDetail',{token:getStore('token'), id: id}).then(
              data=>{
                if(data.code==1){
                  this.space_sign = 0;
                  this.current_sign = 0;
                  this.record = data.data.record;
                  this.choose_section_id = id;
                  for (let i=0;i<this.section.length;i++) {
                    if (this.section[i]['id'] == id){
                    this.playerOptions.video = this.section[i]['video_url'];
                    this.playerOptions.poster = this.section[i]['thumbnail'];
                    this.choose_section_index = i;
                    // 定义一个对象
                    var player = new ckplayer(this.playerOptions);
                    this.resetVideo()
                    break;
                    }
                  }
                  // Toast(data.msg);
                }else{
                  Toast(data.msg);
                }
              },
              err=>{  })
          }
        },
        resetVideo () {
          var _this = this;
          //var resetTime = 0; // 拖动后重置播放时间
          _this.current_sign = 0;  // 当前播放时间
          clearInterval(_this.video_timer)
          if ( _this.record > 0.1) {
            _this.current_sign = _this.record;
            document.getElementsByTagName("video")[0].addEventListener('play', plays, false)
          } else {
            // vd.play();
            _this.video_timer = setInterval(timer,100)
          }
          // 监听视频播放完成
          document.getElementsByTagName("video")[0].addEventListener('ended', onPlayerEnded, false);
          // 定时器
          function timer () {
            let curTime = document.getElementsByTagName("video")[0].currentTime;
            let apartTime = curTime - _this.current_sign;
            if(apartTime > 2 && _this.section[_this.choose_section_index].is_end != 1) {
              document.getElementsByTagName("video")[0].currentTime = _this.current_sign;
              Toast('未学完的课程无法快进');
            } else {
              _this.current_sign = curTime;
              if (curTime - _this.space_sign >= 20) {
                _this.space_sign = curTime;
                _this.onPlayerTimeupdate();
              }
            }
          }
          function plays() {
            setTimeout(function(){
              document.getElementsByTagName("video")[0].removeEventListener('play', plays, false)
              document.getElementsByTagName("video")[0].currentTime = _this.record;
              Toast('从上次记录的地方开始播放');
              _this.video_timer = setInterval(timer,100)
            },1000)
          }
          function onPlayerEnded() {
            document.getElementsByTagName("video")[0].removeEventListener('ended', onPlayerEnded, false)
            _this.onPlayerEnded()
          }
        },
        onPlayerTimeupdate(){
          this.getData('/Home/saveRecord',{token:getStore('token'), id: this.choose_section_id, record: this.space_sign}).then(
            data=>{
              if(data.code==1){

              }else{
                Toast(data.msg);
              }
            },
            err=>{  })
        },
        onPlayerEnded() {
          this.getData('/Home/saveRecord',{token:getStore('token'), id: this.choose_section_id, record: 0, is_end: 1}).then(
            data=>{
              if(data.code==1){
                if(this.choose_section_index >= this.section.length - 1){
                  Toast('已是最后一课');
                  return;
                }else{
                  let id = this.section[this.choose_section_index + 1]['id'];
                  this.changeSection(id);
                  Toast('正在为您跳入下一节课');
                }
              }else{
                Toast(data.msg);
              }
            },
            err=>{  })

        },
        prevQ(){
          if (this.current_question <=0 ){
            Toast('已是第一题');
          }else{
            this.current_question--
            this.current_question_data = this.questions[this.current_question]
          }
        },
        nextQ(){
          if (this.current_question >= this.questions.length - 1 ){
            Toast('已是最后一题');
          }else{
            this.current_question++
            this.current_question_data = this.questions[this.current_question]
          }
        },
        responseQ(item){
          if (this.is_end){
            Toast('您已交卷')
            return
          }
          this.questions[this.current_question].response = item
          this.current_question_data = {}
          this.current_question_data = this.questions[this.current_question]
        },
        responseS(item){
          if (this.is_end){
            Toast('您已交卷')
            return
          }
          let arr = this.questions[this.current_question].response;
          if (!arr){
            this.questions[this.current_question].response = [item];
            return;
          }
          let index;
          index = arr.indexOf(item)
          if (index == -1){
            this.questions[this.current_question].response.push(item);
          }else{
            this.questions[this.current_question].response.splice(index, 1);
          }
          this.current_question_data = {}
          this.current_question_data = this.questions[this.current_question]
        },
        goQ(index){
          this.current_question = index
          this.current_question_data = this.questions[this.current_question]
        },
        subQ(){
          if (this.is_end){
            Toast('您已交卷')
            return
          }
          function compare(a,b){
            return a-b;
          }

          this.is_end = true
          let wrong_num = 0
          for (let i=0;i<this.questions.length;i++){
            if (this.questions[i].type == 3){
              if(this.questions[i].response == this.questions[i].answer){
                this.questions[i].is_wrong = 0
              }else{
                wrong_num++
                this.questions[i].is_wrong = 1
              }
            } else if  (this.questions[i].type == 4){
              let arr = this.questions[i].response;
              let newArr = arr.sort(compare);
              let res = '';
              for (let j=0; j<newArr.length;j++){
                res += this.questions[i].content[newArr[j]];
                if (j < newArr.length -1){
                  res += '|'
                }
              }
              if(res == this.questions[i].answer){
                this.questions[i].is_wrong = 0
              }else{
                wrong_num++
                this.questions[i].is_wrong = 1
              }
            }

          }
          MessageBox('提示', '共' + this.questions.length + '题，您答错' + wrong_num + '题')
          this.current_question_data = {}
          this.current_question_data = this.questions[this.current_question]
        },
        download(url){
          window.open(url)
        }

      }

    }
</script>

<style lang="scss" scoped>
  .video{
    width: 100%;
    height: 17.7rem;
  }
  audio::-webkit-media-controls-enclosure, video::-webkit-media-controls.audio-only [pseudo="-webkit-media-controls-enclosure"]{
    border-radius: 0 !important;
  }
  video::-internal-media-controls-overflow-button, audio::-internal-media-controls-overflow-button {
  	display: none;
  }
  .courseDetail{
    padding-top: 5rem;
    .kind{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: 3rem;
      margin: auto;
      border:1px solid #0083FF;
      border-radius: 0.3rem;
      font-size:1.56rem;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color: #0083FF;
      overflow: hidden;
      p{
        width: 33.3%;
        line-height: 3rem;
        border-right:1px solid #0083FF;
      }
      p:last-child{
        border-right:none;
      }
      p.active{
        color: #fff;
        background: #0083FF;
      }
    }
    .sp{
      .shipin{
        width: 90%;
        margin: auto;
        border-bottom: 0.5rem solid #F4F4F4;
        padding: 2rem 0;
        position: relative;
        canvas{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 30rem;
          z-index: 999;
        }
        .show{

        }
      }
      .mulu{
        height: 5rem;
        border-bottom: 0.05rem solid #F4F4F4;
        display: flex;
        align-items: center;
        padding: 0 2rem;
        img{
          width: 3rem;
          height: 3rem;
        }
        .muluR{
          text-align: left;
          margin-left: 1rem;
          p:nth-child(1){
            font-size:1.67rem;
            font-family:Adobe Heiti Std R;
            font-weight:normal;
          }
          p:nth-child(2){
            font-size:1.35rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color: #9A9A9A;
            line-height: 2rem;
          }
        }
      }

    }
    .jy{
      .biaoti{
        font-size:2.5rem;
        font-family:SourceHanSansCN-Medium;
        font-weight:bold;
        color: #000;
        text-align: left;
        margin: 1.5rem;
      }
    }
    .lx{
      padding-bottom: 5rem;
      .lianxiTiMu{
        width: 90%;
        margin:2rem auto;
        font-size:1.56rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        text-align: left;
        line-height: 2.5rem;
        color: #333333;
        .lianxiTiMu1{
          width:4.9rem;
          line-height:1.7rem;
          color: #0375E4;
          border:0.05rem solid #0375E4;
          border-radius:1rem 0rem 1rem 0rem;
          display: inline-block;
          text-align: center;
          font-size:1.04rem;
          font-family:MicrosoftYaHei;
          font-weight:400;
        }
        .lianxiXueZe{
          color: #5E5E5E;
          width:2.5rem;
          line-height:2.5rem;
          border:0.05rem solid #5E5E5E;
          border-radius:50%;
          display: inline-block;
          font-size:1.56rem;
          font-family:ArialMT;
          font-weight:400;
          text-align: center;
          margin-right: 1rem;
          &.active{
            background: #0f93FF;
          }
        }
        .lianxiXueZe1{
          color: #5E5E5E;
        }
        &.cuoti{
          color: red;
        }
      }
      .lianxiBottom{
        width: 100%;
        height: 5rem;
        border-top: 0.05rem solid #9C9C9C;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 2rem;
        font-size:1.56rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        background: white;
        img{
          width: 1.5rem;
          height: 1.5rem;
          margin-right:0.5rem;
        }
        .lianxiBottomL{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width:60%;
          div{
            padding: 0 0.5rem;
            background: #0083FF;
            color: white;
            line-height: 2rem;
            &.disable{
              background: grey;
            }
          }

        }
        .lianxiBottomR{
          color: #A5A5A5;
          span{
            color: #333333;
          }
        }
      }
    }
  }
  .order_number{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    >div{
      width: 10vw;
      font-size: 1.5rem;
      height: 10vw;
      line-height: 10vw;
      border: 1px solid black;
      box-sizing: border-box;
      &.active{
        background: #31a6ff;
      }
      &.error{
        background: red;
      }
    }
  }
</style>
