// packageE/video/video.js
Component({
  properties: {
    datas: {
      type: null,
    },
    component_id: {
      type: null,
    },
  },
  // 私有数据，可用于模板渲染
  data: {
    emptyImage: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png",
    clientWidth: "375",

    video: {},
    Height: '200',
    imgurlshow: true,
    isVideo: false,
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() {
      console.log(this.properties.datas);
    },
    moved() {},
    detached() {},
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() {},
  // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() {
    this.isMp4(this.data.datas.video_url.video_url);
    let _Context = `myVideo${this.data.component_id}`;
    this.videoContext = wx.createVideoContext(_Context, this);
    this.setData({
      video: this.data.datas.video_url.video_url,
    });
    if (this.data.datas.video_url.isShowPoster == "0") {
      this.setData({
        imgurl: "",
      });
    } else {
      this.setData({
        imgurl: this.data.datas.video_url.poster,
      });
    }
    this.videoScrollHandle()
    // this.setData({
    // 	clientWidth: wx.getSystemInfoSync().windowWidth,
    // });
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() {},
    hide() {},
    resize() {},
  },
  methods: {
    //判断是否MP4
    isMp4(src) {
      if (src.endsWith(".mp4")) {
        this.setData({
          isVideo: true,
        });
      } else {
        this.setData({
          isVideo: false,
        });
      }
    },
    imgurlshowbtn() {
      this.videoContext.play();
      this.setData({
        imgurlshow: false,
      });
    },
    bindended() {
      this.setData({
        imgurlshow: true,
      });
    },
    bindloadedmetadata(e){
      let winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
      let imgh = e.detail.height; //视频高度
      let imgw = e.detail.width; //视频宽度
      let videoH = winWid * imgh / imgw + "px"; //等比设置高度。 即 屏幕宽度 / video高度 = 视频宽度 / 视频高度  ==》video高度 = 屏幕宽度 * 视频高度 / 视频宽度
      if (parseInt(videoH)) {
        this.setData({
          Height: parseInt(videoH) + "px" //设置高度
        });
      }
    },
    videoScrollHandle(){
      /** 监控视频是否需要播放 */
      // let {screenWidth, screenHeight} = wx.getSystemInfoSync(); //获取屏幕高度
      let _Context = `#myVideo${this.data.component_id}`;
      const videoObserve = this.createIntersectionObserver()
      videoObserve.relativeToViewport()
          .observe(_Context, (res) => {
              let {intersectionRatio} = res
              if(intersectionRatio === 0) {
                this.videoContext.pause()//离开视界，停止播放
              }else{
                //进入视界，开始播放
              }
          })
    }
  },
});