
// 兼容缩放自适应
(function (doc, win) {
  window.base = document.documentElement.clientWidth / 1920;
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      window.clientWidth = docEl.clientWidth;
      window.clientHeight = docEl.clientHeight;
      var aspectRatio = window.clientWidth / window.clientHeight;
      if (aspectRatio > 1920 / 1080) {
        docEl.style.fontSize = 100 * (window.clientHeight / 1080) + 'px';
        window.base = 100 * (window.clientHeight / 1080);
      } else {
        docEl.style.fontSize = 100 * (window.clientWidth / 1920) + 'px';
        window.base = 100 * (window.clientWidth / 1920);
        // 判断是否为移动设备，提示旋转屏幕
      }
    };
  recalc();
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//对应模板的名称，这个可以不写，但是最好是能写上，同时开发多个模板的情况下如果不写这个，本地缓存可能会存在混乱
var key = "JMXS03";

var defaultData = '{"title1":"比","title2":"的基本性质","videoArr":["http://staging-teach.cdn.ireadabc.com/9c6b6bc069b10a236bb0c57fb6d30a29.mp4","http://staging-teach.cdn.ireadabc.com/f309f8dd44d59c65e44f375f818871e1.mp4","http://staging-teach.cdn.ireadabc.com/9c6b6bc069b10a236bb0c57fb6d30a29.mp4"]}';


$(function(){

  window.courseware.getData(function(data){
    //数据加载完，才算页面加载完成
    
    const playView = new PlayView(data);

    playView.init();

    //在页面加载、事件、动画等都初始化完成后，一定要记得调用此方法，否则模板将是不可用的
    window.air.hideAirClassLoading(key,data);

  },key); 

})

class PlayView {

  data;

  curIndex = 0;

  unlock = -1;

  constructor(data) {
    this.data = data;
  }

  init() {

    // 若无数据 则为预览模式 需要填充一些默认数据用来显示
    this.initDefaultData();

    this.initData();

    this.initView();

  }

  initDefaultData() {

    if (!this.data) {
      this.data = JSON.parse(defaultData);
    }

    console.log(this.data);

  }


  initData() {
    
  }

  initView() {

    const _this = this;

    if (this.data.title1) {
      $("#title1").empty();
      $("#title1").append(this.data.title1);
    }

    if (this.data.title2) {
      $("#title2").empty();
      $("#title2").append(this.data.title2);
    }

    if(this.data.videoArr){

      _this.curIndex = 0;
      this.showVideo(0);

    }

    $(".last").click(function(){

      if($(this).hasClass('last-disabled')){
        return;
      }
      _this.curIndex--;
      _this.showVideo();
    })

    $(".next").click(function(){

      if($(this).hasClass('next-disabled')){
        return;
      }
      _this.curIndex++;
      _this.showVideo();
    })
  }

  showVideo(){

    const _this = this;

    $("#curPager").empty();
    $("#curPager").append(this.curIndex + 1);

    const videoArr = this.data.videoArr;

    $("#video").attr('src', videoArr[this.curIndex]) ;

    const video = $("#video")[0];
    let i = setInterval(() => {
      if (video.readyState > 0) {
        video.play();
        clearInterval(i);
      }
    }, 100);
    
    _this.refreshBtnStatus();
    
    //添加播放完成事件
    video.addEventListener('ended', function () {

      //如果当前序号大于解锁的索引，则表示解锁了新视频
      if(_this.curIndex > _this.unlock){
        _this.unlock = _this.curIndex;
      }
      // 监听视频播放结束
      _this.refreshBtnStatus();
    });
  }

  refreshBtnStatus(){

    let length = this.data.videoArr.length;

    $(".last").removeClass("last-disabled");
    $(".last").addClass("active-last");
    $(".next").removeClass("next-disabled");
    $(".next").addClass("active-next");

    if(this.curIndex <= 0){
      $(".last").addClass("last-disabled");
      $(".last").removeClass("active-last");
    }
    else if(this.curIndex >= length - 1){
      $(".next").addClass("next-disabled");
      $(".next").removeClass("active-next");
    }

    if(this.curIndex > this.unlock){
      $(".next").addClass("next-disabled");
      $(".next").removeClass("active-next");
    }
  }

}


function changeFontSize(_dom){
  const txtLen = _dom.width();
  console.log("text length:", txtLen);
  if(txtLen < 520){
    _dom.css("font-size", "0.7rem");
  } else if (txtLen < 600) {
    _dom.css("font-size", "0.60rem");
  } else if (txtLen < 700) {
    _dom.css("font-size", "0.55rem");
  } else if (txtLen < 800) {
    _dom.css("font-size", "0.50rem");
  } else {
    _dom.css("font-size", "0.45rem");
  }

}

