const { addZero } = require('../../utils/util');  // 格式化时间

let app = getApp();

Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    poster: 'https://xxx/7831600741950_.pic.jpg', // 视频封面
    videoSrc: 'https://xxx/1600742007827574.mp4', // 视频地址
    startPlay: true, // 首次播放显示 播放视频按钮。
    play: false, // 播放true 暂停 false
    sliderValue: 0, // 进度条的value
    process_duration: '00:00', // 进度
    total_duration: '00:00', // 总时长
    full: false, // 全屏
    duration: '', // 视频长度 单位秒
  },
  ready() {
    this.videoContext = wx.createVideoContext('video', this); //  创建videoContext实例
    this.updateState = true; // 防止在播放过程中拖拽失败
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 播放
    playStart(e) {
      const {
        type = null
      } = e.currentTarget.dataset;
      if (type && type == 'init') {
        // 开始播放
        this.setData({
          startPlay: false,
          play: true
        })
        this.videoContext.play();
        return false;
      }
      this.data.play ? this.videoContext.pause() : this.videoContext.play();
      this.setData({
        play: !this.data.play,
        startPlay: false,
      })
    },
    // 全屏/退出全屏
    fullScreen() {
      !this.data.full ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
      this.setData({
        full: !this.data.full
      })
    },
    // 完成一次拖动后触发的事件
    sliderChange(e) {
      if (this.data.duration) {
        // 视频跳转到指定位置
        this.videoContext.seek(e.detail.value / 100 * this.data.duration);
        this.updateState = true;
        this.setData({
          sliderValue: e.detail.value
        })
      }
    },
    // 拖动过程中触发的事件
    sliderChanging(e) {
      this.updateState = false; // 拖动过程中不允许更新进度条
    },
    // 播放进度
    bindtimeupdateFun(e) {
      if (this.updateState) {
        let sliderValue = e.detail.currentTime / e.detail.duration * 100;
        this.setData({
          sliderValue,
          duration: e.detail.duration,
          total_duration: this.formatSeconds(e.detail.duration), // 总时长 格式 00:00
          process_duration: this.formatSeconds(e.detail.currentTime), // 进度 格式 00:00
        })
      }
    },
    // 结束
    bindEndedFun(){
      this.setData({
        play: false
      })
    },
    // 格式化视频时长  格式 00:00
    formatSeconds(value) {
      if (value == undefined) {
        value = 0;
      }
      var second = parseInt(value); // 秒
      var min = 0; // 分
      var hour = 0; // 小时
      if (second > 60) {
        min = parseInt(second / 60);
        second = parseInt(second % 60);
        if (min > 60) {
          hour = parseInt(min / 60);
          min = parseInt(min % 60);
        }
      }
      
      var result = "";
      // if (hour > 0) {
      //   hour = addZero(parseInt(hour));
      //   result = hour + ":";
      // }
      if (min > 0) {
        min = addZero(parseInt(min));
        result = min + ":";
      }else{
        result = "00:";
      }
      if(second > 0){
        second = addZero(parseInt(second));
        result = result + second;
      }else{
        result = result + '00';
      }
      return result;
    },
  }
})

.video_area{
    width: 100%;
    height: 350rpx;
    position: relative;
}

.cover{
    position: absolute;
    top: 0;
    left: -62rpx;
    width: 620rpx;
    height: 350rpx;
    border-radius: 20rpx;
    box-shadow: 0 7rpx 30rpx rgba(136,136,136,.6);
    overflow: hidden;
}

.video_area .video_wrapper{
    width:100%;
    height: 100%;
    position: relative;
    border-radius: 20rpx;
}
.cover_bg{
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.cover_bg.playState{
    opacity: 0.75;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 79%, #040404 98%);
}
.cover_bg.pauseState{
    opacity: 0.5;
    background: #000;
}

.video_area .play_begin{
    width: 234rpx;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
.video_area .play{
    width: 71rpx;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
.process-area{
    width: 100%;
    height: 60rpx;
    padding: 0 4% 0 4%;
    position: absolute;
    bottom: 13rpx;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 20;
}
.process-area .time{
    display: inline-block;
    flex:1;
    color: #fff;
    opacity: 0.95;
    font-family: PingFangSC-Regular;
    font-size: 14rpx;
    color: #F4F3F0;
}
.process-area .time.fullScreen{
    font-size: 18rpx
}
.process-area  .time.process_time{
    text-align: right;
    margin-right: -10rpx;
}
.process-area  .time.total_process{
    text-align: left;
    margin-left: -14rpx;
}
.play_min{
    max-width: 24rpx;
    max-height: 24rpx;
    height: auto;
    flex:  1;
    display: inline-block;
    padding: 20rpx;
    margin:-20rpx;
}
.screen_btn{
    max-width: 24rpx;
    max-height: 24rpx;
    height: auto;
    flex:  1;
    display: inline-block;
    padding: 20rpx;
    margin:-20rpx;
}
.slider_container{
    flex:6;
}