<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view class="container commonPageBox commonDetailPage" style="position: relative;">
     <!-- <cover-view class="image_box">


      <image
     
        src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"
        mode="aspectFit"
        class="headImage"
        style="background-color: #f5f5f5"
       
      >
      </image>



    </cover-view> -->
    <video
      @fullscreenchange="fullscreenchange"
      @timeupdate="videoTimeUpdateEvent($event)"
      ref="videos"
      style="width: 100%; height: 100%"
      autoplay
      id="videoId"
      
      object-fit="contain"
      class="video-box"
      :src="videoUrl"
      :poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
      @play="playVideo"
    >
    <!-- <cover-image class="controls-play img"  src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
      
    -->
  </video>
  
  </view>
</template>

<script>
import courseDescription from "@/pages/component/commonComponents/list";
import price from "../price/index.vue";

import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  components: {
    courseDescription, //课程说明
    price, //课程价格
  },
  data() {
    return {
      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/curriculum/back",
    });
   
    plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
   
    // plus.screen.lockOrientation("portrait-primary");
    // #endif
    await this.setVideoTime();

    // #ifdef APP-PLUS
    // plus.screen.lockOrientation("portrait-primary");
    // #endif
  },
  onLoad(options) {
    // uni.navigateTo({
    //   url: "/pages/curriculum/order/curriculum/back",
    // });
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("landscape-primary");
    // plus.screen.lockOrientation("portrait-primary");
    // #endif

    this.options = JSON.parse(options.data);
    this.getLive();

    this.timer = setInterval(() => {
      var that = this;
      if (this.currentTime) {
        that.setVideoTime();
      }
    }, 60000 * 10);
  },
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    // 播放进度改变
    videoTimeUpdateEvent(e) {
      console.log("e at line 78:", e);
      this.playTime = parseInt(e.detail.currentTime);
      this.allTime = parseInt(e.detail.duration);
      console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);

      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));

      console.log(list, "走接口的方法参数");
    },
    //是否全屏
    fullscreenchange(e) {
      if (!e.target.fullScreen) {
        uni.navigateBack({
          delta: 1,
        });
        // plus.screen.lockOrientation("default");
      }
    },

    getData(data) {
      console.log(
        "data at line 这是接口拿回来的时长11111111111111111111:",
        this.videoData.userCourseVideoPositionEntity.position
      );
      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"));
        }
        console.log("这是获取接口 设置的起始时长", netWork);
        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));
        console.log(
          "list at line 这是设置完第一次初始值9777777777777777777770:",
          list
        );

        console.log(this.firstTime, "1111111111111111111111");

        this.playVideo();
        this.isSetFirstTime = true;
      }
    },
    setVideoTime(time) {
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime, //秒数
      };
      console.log("data at line =存储视频时长接口:", data);
      $http
        .request({
          // url: "book/buyOrder/buySave",
          url: `sociology/course/saveCoursePosition`,
          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 185:", res);
          //   console.log("data at line 5911111:", this.videoData);
          this.$forceUpdate();
        });
    },
    playVideo(e) {
      this.videoContext = uni.createVideoContext("videoId", this);

      this.videoContext.seek(this.firstTime);
      this.videoContext.requestFullScreen();
    },
    async getLive() {
      var data = {
        ...this.options,
      };
      console.log("data at line 57:", data);
      $http
        .request({
          // url: "book/buyOrder/buySave",
          url: `sociology/course/checkVideo`,
          method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data,
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log("res at line 252:", res);
          this.videoData = res.video;
          this.videoUrl =
            // "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
            res.video.videoUrl;

          this.$nextTick(async () => {
            await this.getData();
          });
          // var playAuth = res.video.playAuth.replace(/=/g, "");
          // this.videoData = {
          // 	...res.video,
          // 	videoId: res.video.video,
          // 	playAuth: playAuth,
          // };
          // this.playAuth = playAuth;

          console.log("data at line 5911111:", this.videoData);
          this.$forceUpdate();
        });
    },
    openVideo(data) {
      console.log("data at line 380:", data.type);

      var mynavData = JSON.stringify(data); // 这里转换成 字符串
      if (data.type == 0) {
        //视频云点播
        uni.navigateTo({
          url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
        });
      } else if (data.type == 1) {
        uni.navigateTo({
          url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
        });
      }

      //   uni.navigateTo({
      //     // url: '../bookShop/commodityDetail?id=' + item.id
      //     url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
      //   });
    },
    hancleModalCancel() {
      this.show = false;
    },
    handleClickMore(v, i, status) {
      console.log("i at line 357:", i);
      this.$set(this.correlationiList[i], "isOpen", status);
      // [i].=!this.correlationiList[i].isOpen;
    },
    hancleModalConfirm() {
      var data = {
        values: {
          customerType: "D",
          token: uni.getStorageSync("token"),
          customerOid: uni.getStorageSync("customerOid"),
          ...this.taiHuClassInfo,
        },
      };
      // $mars.progressBegin('申请中...');
      // $mars.post(customerType, 'applyRelearn', data, function (ret) {
      //     api.hideProgress();

      //     fnLoadDataGrid();
      // });
    },

    // 检查是有权限使用搜索功能
    checkDisable() {
      console.log("点击了");
    },
    // 显示无权限弹窗
    // showNoRights() {
    // 	let that = this
    // 	uni.showModal({
    // 		content: "",
    // 		confirmText: '好的',
    // 		showCancel: false,
    // 		success: function(res) {
    // 			if (res.confirm) {
    // 				// console.log('用户点击确定');
    // 				that.clear()
    // 			}
    // 		}
    // 	})
    // },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
  },
  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;
}
</style>
