<style scoped>
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
input{background:none;outline:none;border:0px;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.text-blue{color: #3A8AFB;}
.bannerImg{width:100%;height: 15rem; position: relative;}
.bannerImg .defaultbanner{overflow: hidden;position: absolute; top: 0px; left: 0; width: 100%;}
.bannerImg .btnStart{
        color: #fff;
  		  left: 45%;
		    top: 40%;
		    position: absolute;
        cursor: pointer;
        z-index: 666;
        margin-left: -2rem;
        text-align: center;
}
.bannerImg .btnStart .startstudy{
  background: #3A8AFB;text-align: center;line-height: 1.5rem;width: 6rem;margin-top: 0.7rem;border-radius: 0.6rem;
}
.bannerImg img{width:100%;height: 15rem;}
.asContent{padding:0.6rem 2%;border-bottom: 0.4rem solid #f3f6ff;}
.asTitle{font-size: 1rem;}
.asSimpleInfo .asSimpleInfoLeft{float: left;padding: 0.4rem;padding-left: 1.6rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_key/studyCenter/icon-giftGray.png) no-repeat left center;background-size: 1.4rem 1.4rem;}
.asSimpleInfo .asSimpleInfoRight{float: right;padding: 0.2rem 0.6rem;border-radius: 0.6rem;background-color: #f2f6f9; text-align: center;}
.asIntroduction{width: 96%;padding:0 2%;margin-bottom: 3.4rem;background-color: #ffffff;overflow-y: auto;}
.asIntroduction .headInfo{vertical-align: top;display: inline-flex;}
.asIntroduction .headInfo span{margin-left: 1rem;margin-top: 0.5rem;font-weight: bold;}
.asIntroduction .headInfo img{height: 3rem; width: 3rem; border-radius: 100%;
  background-color:rgba(0,0,0,0.5);border: none;
}

/*视频播放css*/
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity: 0;
  pointer-events: none;
  width: 5px;
}
.videobox {
    width:100%;background: #000;
    position:relative;
    /* padding-bottom:56.25%;    //需要用padding来维持16:9比例,也就是9除以16 */
    height: 100%;
}
.filebox {
    width:100%;
    position:relative;
    height: 100%;
}
.filebox iframe{
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}
video{
  width: 100%;
  height: 15rem;
  top:0;
  left: 0;
  position: absolute;
}

.auditPopu{z-index:99999999;position: fixed;text-align: center;top:50%;margin-top:-10rem;min-height: 16.4rem;width: 84%;background: rgba(255, 255, 255, 1);margin-left:8%;border-radius: 0.2rem;}
.auditPopu img{display: block;margin: 0 auto;}
.auditPopu .successImg{width: 5rem;height: 5rem;margin-top: 2rem;}
.auditPopu h4{font-weight: normal;}
.auditPopu p{width:86%;margin: 0 auto;color:#3A8AFB; }
.auditPopu p .btnReturn{border: 0.1rem solid #3A8AFB;
border-radius: 0.3rem;width: 7rem;display: inline-block;
line-height: 1.5rem;height: 1.5rem;margin-top: 1rem;}
.auditPopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
</style>
<template>     
  <div class="jfBaseSize AnswerSend" v-cloak v-bind:style="isShow.vh?'height:100vh':'height: 100%;'"> 
    <div class="bannerImg" :style="!isShow.ShowStudy?'background:#000':''">
      <div class="defaultbanner" v-show="!isShow.ShowStudy">
        <img :src="CourseModel.CourseContentFace" alt="" style="opacity:30%;" >
      </div>
      <div class="btnStart" v-show="!isShow.ShowStudy">
          <div class="state" v-html="TipStateTxt"></div>
          <div class="startstudy" @click="StudyStart()"  v-html="TipBtnTxt"></div>
      </div>
        <div class="videobox" v-show="isShow.ShowStudy&&CourseModel.CourseType==1">
          <!-- <video
            id="video1" 
            :src="CourseModel.LinkUrl" 
            preload="auto"
            webkit-playsinline
            playsinline="true"
            x-webkit-airplay="allow" 
            x5-video-player-type="h5"  
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            style="object-fit:fill"> -->
            <video id="VideoSend" x5-playsinline="" playsinline="" webkit-playsinline="" controls></video>
        </div>
        <div class="filebox" v-show="isShow.ShowStudy&&CourseModel.CourseType==2">
           <iframe id="IframeCourse2" style="border:none;width:100%;height:100%"></iframe> 
        </div>
    </div>
    <div class="asContent">
      <p class="asTitle" v-html="CourseModel.CourseName"></p>
      <p class="asSimpleInfo clearfix">
        <span class="asSimpleInfoLeft" v-html="CourseModel.AwardsName" v-show="isShow.IsShowReward"></span>
        <span class="asSimpleInfoRight"><font v-html="CourseModel.StudyCount"></font>人在学习</span>
      </p>
    </div>
    <div class="asIntroduction">
      <p class="headInfo"><img :src="CourseModel.LecturerFace"/><span v-html="CourseModel.CourseLecturer"></span></p>
      <p><font class="text-blue">课程简介：</font>
        <span v-html="CourseModel.CourseIntro"></span>
      </p>
    </div>

    <div class="mask" v-show="isShow.IsshowMask"></div>
       <div class="auditPopu" v-show="isShow.IsshowWinOk">
          <img class="successImg" src="http://image.supercarrier8.com/h5_key/studyCenter/icon-giftBlue.png" alt="success">
          <h4>
           恭喜您完成本次课程学习!
          </h4>
          <p>
            获的奖励：<span v-html="CourseModel.AwardsName"></span>
          </p>
          <p>
            <span @click="goPage('S_HomeP')" class="btnReturn">返回学习中心</span>
          </p>
          <img class="closeImg" src="http://image.supercarrier8.com/h5_key/icon-close-white.png" alt="close" @click="goPage('S_HomeP')"> 
    </div>
    <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast,Indicator } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import '@/assets/js/libs/js.cookie';
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import utils from "@/assets/js/utils.js";
export default {
  props: [],
    components: {
      ReturnHome
  },
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  data() {
    return {
      TipStateTxt:"未开始学习",
      TipBtnTxt:"开始学习",
      isShow:{
        vh:true,
        ShowStudy:false,
        IsshowMask:false,
        IsshowWinOk:false,
        IsShowReward:true,
        IsTimeReward:false,
        IsVedioFinsh:false
      },
      setTimeoutData:null,
      CourseModel:{},
      CourseRecordModel:{}
    }
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    StudyStart(){
        var that=this;
        var StudyTime=that.CourseModel.StudyLimit;
        var TotalWinSecond=parseInt(StudyTime)*60;
        window.clearTimeout(that.setTimeoutData);
        /* 如果是自定义链接直接跳转获取 */
        that.isShow.ShowStudy=true;
        if(that.CourseModel.CourseType=="3")
        {
           location.href=that.CourseModel.LinkUrl;return false;          
        }
        else if(that.CourseModel.CourseType=="1")
        {
          that.SetCourseRecord(0);
          $("#VideoSend").attr("src",that.CourseModel.LinkUrl);
          var video = document.querySelector('video');
          video.play();
          $("#VideoSend").on("timeupdate",function(event){
              if(this.currentTime==this.duration)
              {
                  that.isShow.IsVedioFinsh=true;
                  if(that.isShow.IsTimeReward)
                  {
                     that.isShow.IsTimeReward=false;
                     that.WinRecord();
                  }
              }
          });
          that.SetTimerStudy(TotalWinSecond);
        }else{
          if(that.CourseModel.LinkUrl.indexOf(".pdf")==-1)
          {
             that.SetCourseRecord(0);
             that.SetTimerStudy(TotalWinSecond);
             $("#IframeCourse2").attr("src","https://view.officeapps.live.com/op/view.aspx?src="+that.CourseModel.LinkUrl+"&access_token=1&access_token_ttl=0&wdMobileHost=2");
             //$("#IframeCourse2").attr("src","https://phk1-powerpoint.officeapps.live.com/p/mPPT.aspx?PowerPointView=ReadingView&ui=zh-CN&rs=zh-CN&WOPISrc="+encodeURI("http://phk1-view-wopi.wopi.live.net:808/oh/wopi/files/@/wFileId?wFileId=")+encodeURI(that.CourseModel.LinkUrl));
             //$("#IframeCourse2").attr("src","https://docview.mingdao.com/op/view.aspx?src="+that.CourseModel.LinkUrl+"&access_token=1&access_token_ttl=0&wdMobileHost=2");
          }
          else
          {
              /* PDF预览 */
              this.$parent.changeSelectedPage('S_PDFV');
          }
        }
    },
    SetTimerStudy(TotalWinSecond){
      var that=this;
      if(TotalWinSecond==0)
      { 
          window.clearTimeout(that.setTimeoutData);
          if((that.CourseModel.CourseType=="1"&&that.isShow.IsVedioFinsh)||that.CourseModel.CourseType=="2")
          {   
              that.$set(that.isShow,'IsTimeReward',true);
              that.WinRecord();
          }
      }else if(TotalWinSecond!=0&&TotalWinSecond%60==0)
      {
        that.SetCourseRecord(TotalWinSecond/60);
      }
      TotalWinSecond--;

      that.setTimeoutData=window.setTimeout(function(){
          that.SetTimerStudy(TotalWinSecond);
      },1000);
    },
    WinRecord(){
        var that=this; 
        var url = "/channel/WinCoursePrizeH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType(),
            StudyId:that.CourseModel.ID,
            StudyRecordId:that.CourseRecordModel.ID,
            StudyTime:that.CourseModel.StudyLimit
        };
        var cbSuccess = function(res){
          //  if(res.flag)
          //   {
              that.$set(that.isShow,'IsshowMask',true);
              that.$set(that.isShow,'IsshowWinOk',true);
              that.$set(that.isShow,'IsVedioFinsh',false);
              that.$set(that.isShow,'IsTimeReward',false);
              that.$set(that.isShow,'ShowStudy',false);
              that.$set(that,'TipStateTxt',"已经完成");
              that.$set(that,'TipBtnTxt',"重新学习");
            // }
        };
        //请求后端
        channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,null,null,null)
    },
    GetCourseRecord(){
        var that=this; 
        var url = "/channel/GetCourseRecordH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType(),
            ID:that.CourseModel.ID
        };
        var cbSuccess = function(res){
            if(res.flag&&res.data)
             {
                if(res.data.ID!=null)
                {
                  that.TipStateTxt ="学习未完成";
                  that.TipBtnTxt="继续学习";
                  if(res.data.StudyTime==that.CourseModel.StudyLimit){
                     that.TipStateTxt ="已经完成";
                     that.TipBtnTxt="重新学习";
                  }
                }
             }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,null,null,null)
    },
    SetCourseRecord(StudyTime){
        var that=this; 
        var url = "/channel/InsertCourseRecordH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType(),
            CourseId:that.CourseModel.ID,
            StudyTime:StudyTime
        };
        var cbSuccess = function(res){
            if(res.flag&&res.data)
             {
                that.CourseRecordModel=res.data;
             }
        };
        //请求后端
        channelHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,null,null,null)
    },
    loadCourseDetail(id)
    {
        var that=this; 
        var url = "/channel/GetCourseDetailH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType(),
            ID:id
        };
        var cbSuccess = function(res){
            if(res.flag&&res.data)
             {
                that.CourseModel=res.data;
                that.CourseModel.CourseIntro=decodeURIComponent(res.data.CourseIntro);
                const regex = new RegExp('<img', 'gi');
                that.CourseModel.CourseIntro = that.CourseModel.CourseIntro.replace(regex, `<img style="max-width: 100%; height: auto"`);
                if(that.CourseModel.IsOpen=="2")
                {
                   that.isShow.IsShowReward=false;
                }
                that.GetCourseRecord();
             }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,null,null,null)
    },
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    judgeLogin:function(){
      var eno = this.sup8.context.enterpriseno;
      if (!channelHelper.CheckLogin(this.$parent,eno,this.sup8.context.entranceid)) {
        this.$parent.changeSelectedPage('Key_Login');
        return false;
      }
    },
  },
  watch: {},
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    //判断是否登录
    that.judgeLogin();
    var ID=localStorage.getItem("studyId");
    //ID="5801cd06e417436097a3f37316c90170";
    that.loadCourseDetail(ID);
  },
  mounted: function() {
    var that =this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that.isShow,'vh',true);
    }else{
        that.$set(that.isShow,'vh',false);
    }
  },
  beforeDestroy:function(){
     window.clearTimeout(this.setTimeoutData);
  }
};
</script>

