<template>
  <view
    class="container commonPageBox commonDetailPage"
    style="position: relative; height: auto"
  >

    <video
      @timeupdate="videoTimeUpdateEvent($event)"
      ref="videos"
      style="width: 100%; height: 60rpx"
      autoplay
      id="videoId"
      controls
      :show-progress="true"
      :show-fullscreen-btn="false"
      object-fit="contain"
      class="video-box"
      :src="videoUrl"
      :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
      @play="playVideo"
    ></video>

     <!-- 倍速 -->
     <view class="play-rate" @click="videoPlayRate" v-if="showRate">{{ playbackRate }}x</view>
        <!-- 倍速菜单 -->
        <ul class="play-rate-menu" :style="{ height: height }" v-if="showRateMenu">
        <li
          v-for="item in playbackRates"
          :key="item"
          :class="[{ activeRate: playbackRate === item }, 'play-rate-item']"
          @click="changePlayRate(item)"
        >
          {{ item }}x
        </li>
      </ul>
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  components: {
    courseDescription, //课程说明
  },
  data() {
    return {
      playbackRate: 1, // 初始播放速率
      showRateMenu: false, //显示播放速率
      speedState: 1,
      timer: null,
      videoUrl: "",
      currentTime: 0,
      firstTime: 0,

      options: {},
      videoData: {},
      isSetFirstTime: false,
      currentVideoTime: "", //初始播放时长（秒）
      urlList: {
        detail: "sociology/course/getCourseCatalogueChapterDetail",
        curriculumInfo: "app/phone.do?getCourseInfo",
      },
    };
  },
  async onUnload() {
    this.timer = null;
    // #ifdef APP-PLUS
    uni.navigateTo({
      url: "/pages/curriculum/order/back",
    });

    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏

    // #endif
    await this.setVideoTime();
  },
  onLoad(options) {
	  
  },
  onHide() {
	  
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
       // 显示倍速
       videoPlayRate() {
      this.showRateMenu = true
    },
    // 点击倍速
    changePlayRate(rate) {
      this.playbackRate = rate
      this.videoPlayer.playbackRate(rate)
      this.showRateMenu = false
      this.hideControls()
    },
    // 创建倍速按钮
    createPlayRateDOM() {
      const playRateDom = document.createElement('div')
      playRateDom.className = 'full-play-rate'
      playRateDom.innerText = `${this.playbackRate}x`
      playRateDom.onclick = () => {
        const playRateMenuDom = document.querySelector('.full-play-rate-menu')
        playRateMenuDom.style.display = 'block'
      }
      return playRateDom
    },
    // 创建倍速菜单
    createPlayRateMenuDom() {
      const playRateMenuDom = document.createElement('ul')
      playRateMenuDom.className = `play-rate-menu full-play-rate-menu`
      playRateMenuDom.style.height = this.windowWidth + 'px'
      playRateMenuDom.style.display = 'none'
      let liStr = ''
      this.playbackRates.forEach((item) => {
        liStr += `
					<li class="${this.playbackRate === item ? 'activeRate' : ''} play-rate-item full-play-rate-item">
						${item}x
					</li> 
					`
      })
      playRateMenuDom.innerHTML = liStr
      return playRateMenuDom
    },
    handleSetSpeedRate(rate) {
      console.log("rate at line 125:", rate);
      let videoContext = uni.createVideoContext("videoId");
      videoContext.playbackRate(rate);
      speedRate.value = rate;
    },
    init(options) {
      this.options = JSON.parse(options.data);
      this.getLive();

      this.timer = setInterval(() => {
        var that = this;
        if (this.currentTime) {
          that.setVideoTime();
        }
      }, 60000 * 10);
    },
    // 播放进度改变
    videoTimeUpdateEvent(e) {
      console.log("e at line 78:", e);
      this.playTime = parseInt(e.detail.currentTime);
      this.allTime = parseInt(e.detail.duration);
      this.recordTime({
        time: this.playTime,
      });
    },

    recordTime(data) {
      this.currentTime = data.time;
      console.log("data at line 54:", data);
      var list = [];
      if (uni.getStorageSync("videoList")) {
        list = JSON.parse(uni.getStorageSync("videoList"));
      }

      console.log("点击后设置播放时长的方法list at line 65:", list);
      var index = list.findIndex((e) => e.id == this.videoData.id);
      if (list.length > 0 && index >= 0) {
        list[index] = {
          ...this.videoData,

          time: data.time,
        };
      } else {
        list.push({
          ...this.videoData,
          time: data.time,
        });
      }
      uni.setStorageSync("videoList", JSON.stringify(list));
    },
    //是否全屏
    fullscreenchange(e) {
      if (!e.target.fullScreen) {
        uni.navigateBack({
          delta: 1,
        });
      }
    },

    getData(data) {
      if (!this.isSetFirstTime) {
        var netWork = this.videoData.userCourseVideoPositionEntity
          ? this.videoData.userCourseVideoPositionEntity.position
          : 0;
        var list = [];
        if (uni.getStorageSync("videoList")) {
          list = JSON.parse(uni.getStorageSync("videoList"));
        }
        var index = list.findIndex((e) => e.id == this.videoData.id);

        if (netWork) {
          if (index >= 0) {
            this.firstTime =
              list[index].time > netWork ? list[index].time : netWork;
          } else {
            this.firstTime = netWork ? netWork : 0;
          }
        } else {
          if (index >= 0) {
            this.firstTime = list[index].time ? list[index].time : 0;
          } else {
            this.firstTime = 0;
          }
        }

        uni.setStorageSync("videoList", JSON.stringify(list));
        this.playVideo();
        this.isSetFirstTime = true;
      }
    },
    setVideoTime(time) {
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime, //秒数
      };
      $http
        .request({
          url: `sociology/course/saveCoursePosition`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          this.$forceUpdate();
        });
    },
    playVideo(e) {
      this.videoContext = uni.createVideoContext("videoId", this);

      this.videoContext.seek(this.firstTime);
    },
    async getLive() {
      var data = {
        ...this.options,
      };
      console.log("data at line 57:", data);
      $http
        .request({
          url: `sociology/course/checkVideo`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 252:", res);
          this.videoData = res.video;
          this.videoUrl =
            res.video.videoUrl;

          this.$nextTick(async () => {
            await this.getData();
          });
          this.$forceUpdate();
        });
    },
    hancleModalCancel() {
      this.show = false;
    },
    handleClickMore(v, i, status) {
      this.$set(this.correlationiList[i], "isOpen", status);
    },
    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.video-box {
  position: relative;
}
.image_box {
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.speed {
  position: absolute;
  right: 20rpx;
  top: 16rpx;

  .doubleSpeed {
    color: #fff;
    font-size: 14rpx;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4rpx 6rpx;
  }
}

// 倍速的蒙版
.speedModal {
  background-color: rgba(0, 0, 0, 0.7);
}

.speedNumBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #2c2c2c;
  width: 120rpx;
  position: absolute;
  right: 0rpx;
  top: 0;

  .number {
    width: 120rpx;
    font-weight: 700;
    font-size: 14rpx;
    padding: 18rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .active {
    color: red;
  }

  .noActive {
    color: #fff;
  }
}
</style>
