<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view
    class="container playerBox"
    id="playerBox"
    style="
      background-color: #000;
      width: 100%;
      height: 200px;
      position: relative;
      padding: 0;
    "
  >
    <!-- ios不能播放私有加密提示信息 start-->

    <!-- ios不能播放私有加密提示信息 end-->
    <div ref="videoContent" id="url-player-test"></div>
    <div
      v-show="false"
      :videoData="videoData"
      :isDipose="isDipose"
      :winWidth="winWidth"
      :winHeight="winHeight"
      :firstTime="firstTime"
      :isOnLoad="isOnLoad"
      :platform="platform"
      :isSetFirstTime="isSetFirstTime"
      :isChange="isChange"
      :change:videoData="renderScript.receiveMsg"
      :change:isDipose="renderScript.receiveisDipose"
      :change:winWidth="renderScript.receiveWinWidth"
      :change:winHeight="renderScript.receiveWinHeight"
      :change:firstTime="renderScript.receiveFirstTime"
      :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
      :change:isOnLoad="renderScript.receiveIsfresh"
      :change:platform="renderScript.receiveplatform"
      :change:isChange="renderScript.receiveIsChange"
    ></div>
    <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
      直接调用renderjs中的emitData的方法,传递当前播放时长
    </div>
    <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
      监听结束方法，记录播放时长
    </div>
    <div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false">
      监听切换视频方法
    </div>
    <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
      监听第一次初始播放时长,开始进行接口存储时间
    </div>
    <div @tap="renderScript.emitDispose" ref="videoContent6" v-show="false">
      监听第一次初始播放时长,开始进行接口存储时间
    </div>

    <!-- 全屏按钮 start -->
    <!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
    <div class="fullScreenButton-container" v-if="platform != 'ios'">
      <div
        :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
        @tap="renderScript.changeVideoScreen"
      ></div>
    </div>
    <!-- 全屏按钮 end -->
  </view>
</template>
<script>
import store from "@/store/index.js";
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    videoData: {
      type: Object,
      default: {},
    },
    firstTime: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      show: false, //视频提示显示
      isDipose: false, //视频提示显示
      content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
      platform: null, //设备类型
      isFullScreen: false, //当前是否是全屏模式
      isOnLoad: false, //是否刷新
      isChange: false, //是否切换播放源
      videoList: [], //视频列表
      videoOssList: [], //本地视频列表
      options: {}, //父组件传参
      currentTime: "", //当前播放时间

      isSetFirstTime: false, //是否获取到初始播放时间

      urlList: {
        checkVideo: "sociology/course/checkVideo",
      },
    };
  },
  computed: {
    // ...mapState(["videoOssList"]),
  },

  watch: {
    timer(newValue) {
      this.$emit("child-event", newValue);
    },
    videoOssList: {
      immediate: true,
      handler(newValue) {
        if (this.videoOssList.length > 0) {
          uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
        }
      },
    },
  },
  //
  mounted() {
    this.platform = this.$platform;
    this.show = false;
    if (uni.getStorageSync("videoOssList")) {
      this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
    }
  },
  //子组件销毁前
  beforeDestroy() {
    this.handleEnd();

    clearInterval(this.$store.state.videoTimer);
    plus.screen.lockOrientation("portrait-primary");
  },
  updated() {
    // console.log("触发了更新");
  },
  methods: {
    emitDispose1(status) {
      this.$emit("handleSuccessDispose", status);
    },
    destory() {
      // this.isDipose = true;
    },
    //ios不能播放私有加密提示信息
    openShow() {
      this.show = true;
    },

    changeVideoData() {
      this.show = false;
      this.isChange = false;
    },
    screenChange(data) {
      this.isFullScreen = !data.status;
      this.$emit("changeScreen", this.isFullScreen);
    },

    //当前播放时间 存本地
    recordTime(time) {
      this.currentTime = time;
      var list = [...this.videoOssList];
      var index = list.findIndex((e) => e.id == this.currentVideoId);
      var setData = {
        id: this.currentVideoId,
        vid: this.videoData.vid,
        time: time,
      };
      if (list.length > 0 && index >= 0) {
        list[index] = setData;
      } else {
        list.push(setData);
      }
      this.videoOssList = list;
      if (this.currentTime % 60 == 0) {
        this.setVideoTime();
      }
    },

    //播放结束
    async handleEnd() {
      // uni.showModal({
      //     title: "更新提示",
      //     content: "新版本已经准备好，是否重启应用？",
      //     success(res) {
      //       if (res.confirm) {

      //       }
      //     },
      //   });
      this.setVideoTime();
    },
    //存播放进度
    setVideoTime() {
      if (!this.videoData.id) {
        return false;
      }
      var data = {
        videoId: this.videoData.id,
        position: this.currentTime ? this.currentTime : 0, //秒数
        loadAnimate: "none",
      };

      $http
        .request({
          url: `sociology/course/saveCoursePosition`,
          method: "Post",
          data,
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {});
    },
    //定时器 存播放进度
    async setVideoFirtsetTime() {
      this.setVideoTime();
    },
  },
};
</script>
<script module="renderScript" lang="renderjs">
var player;
import $ from "jquery";
export default {
  data() {
    return {
      player: null, //播放器
      videoTimer: null, //定时器
      curTime: null, //播放器当前播放进度
      curStatus: null, //播放器当前播放状态
      playerConfig: {
        id: "url-player-test",
        extraInfo: { poster: "noposter" }, // 播放器参数 extraInfo 的内容会透传到 <video> 标签上
        width: "100%", //容器的大小
        height: "100%", //容器的大小
        qualitySort: "asc",
        cover: "",
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        controlBarVisibility: "hover",
        useH5Prism: true,
        skinLayout: [],
      },

      skinLayoutIos: [
        {
          name: "bigPlayButton",
          align: "blabs",
          x: 30,
          y: 80,
        },
        {
          name: "H5Loading",
          align: "cc",
        },
        {
          name: "errorDisplay",
          align: "tlabs",
          x: 0,
          y: 0,
        },
        {
          name: "infoDisplay",
        },
        {
          name: "tooltip",
          align: "blabs",
          x: 0,
          y: 56,
        },
        {
          name: "thumbnail",
        },
        {
          name: "controlBar",
          align: "blabs",
          x: 0,
          y: 0,
          children: [
            {
              name: "progress",
              align: "blabs",
              x: 0,
              y: 44,
            },
            {
              name: "playButton",
              align: "tl",
              x: 15,
              y: 12,
            },
            {
              name: "timeDisplay",
              align: "tl",
              x: 10,
              y: 7,
            },
            {
              name: "fullScreenButton",
              align: "tr",
              x: 10,
              y: 12,
            },
            {
              name: "prism-speed-selector",
              align: "tr",
              x: 15,
              y: 12,
            },
            {
              name: "volume",
              align: "tr",
              x: 5,
              y: 10,
            },
          ],
        },
      ],
      skinLayoutAndroid: [
        {
          name: "bigPlayButton",
          align: "blabs",
          x: 30,
          y: 80,
        },
        {
          name: "H5Loading",
          align: "cc",
        },
        {
          name: "errorDisplay",
          align: "tlabs",
          x: 0,
          y: 0,
        },
        {
          name: "infoDisplay",
        },
        {
          name: "tooltip",
          align: "blabs",
          x: 0,
          y: 56,
        },
        {
          name: "thumbnail",
        },
        {
          name: "controlBar",
          align: "blabs",
          x: 0,
          y: 0,
          children: [
            {
              name: "progress",
              align: "blabs",
              x: 0,
              y: 44,
            },
            {
              name: "playButton",
              align: "tl",
              x: 15,
              y: 12,
            },
            {
              name: "timeDisplay",
              align: "tl",
              x: 10,
              y: 7,
            },

            {
              name: "prism-speed-selector",
              align: "tr",
              x: 15,
              y: 12,
            },
            {
              name: "volume",
              align: "tr",
              x: 5,
              y: 10,
            },
          ],
        },
      ],
    };
  },

  watch: {
    //播放器当前播放进度
    curTime(val) {
      if (this.curTime !== null) {
        this.$refs.videoContent1.click();
      }
    },
  },

  created() {},

  mounted() {},
  async beforeDestroy() {
    if (player) {
      player.dispose();
    }
    $("#url-player-test").empty();
    console.log("阿里云子组件销毁赋空");
  },
  methods: {
    //检验视频 获取加密权限
    checkValue() {
      if (!this.videoData.vid) {
        setTimeout(() => {
          this.checkValue();
        }, 500);
      } else {
        setTimeout(() => {
          this.initAliyunPlayer();
        }, 0);
      }
    },

    //初始化播放器
    initAliyunPlayer() {
      console.log("实例创建中 at line 436:", "实例创建中");
      $("#url-player-test").empty();
//       const saveTime = function (memoryVideo,currentTime) {
// 	console.log(memoryVideo, currentTime)
// }

// const getTime = function (memoryVideo) {
// 	/* return返回的是自定义起播时间  */
// 	return 20
// }
      var components = [
        {
          name: "RateComponent", //倍速组件
          type: AliPlayerComponent.RateComponent,
        },
      
      ];
      if (this.platform != "ios") {
        var fullScreenButtonComponent = Aliplayer.Component({
          init: function (status, toAddress) {
            this.fullScreenStatus = status;
            this.$html = $(".fullScreenButton-container");
          },
          createEl: function (el) {
            this.$html.find(".ad").attr("src", this.adAddress);
            var $adWrapper = this.$html.find(".ad-wrapper");
            $adWrapper.attr("href", this.toAddress);
            $adWrapper.click(function () {});
            $(el).find(".prism-time-display").after(this.$html);
          },
        });

        components = [
          ...components,
          {
            name: "adComponent", //自定义全屏组件
            type: fullScreenButtonComponent,
          },


        ];
      }

      //设置播放基本配置
      var playerOptions = {
        ...this.playerConfig,
        components: components,
        skinLayout:
          this.platform == "ios" ? this.skinLayoutIos : this.skinLayoutAndroid,
      };

      if (this.videoData.encryptType == 1) {
        playerOptions = {
          ...playerOptions,
          vid: this.videoData.vid,
          playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
          encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
          playConfig: {
            EncryptType: "AliyunVoDEncryption",
          },
        };
      } else {
        playerOptions = {
          ...playerOptions,
          source: this.videoData.source,
        };
      }
      player = new Aliplayer(playerOptions, (player) => {
        player.on("ready", () => {
          this.player = player;
          var lastTime = this.firstTime;
          if (this.platform == "ios") {
            this.player.one("canplay", () => {
              this.player.seek(this.firstTime);
        //       uni.showToast({
				// 	title: '已为您定位至上次观看位置'
				// })

            });
          } else {
            this.player.seek(this.firstTime);
        //     uni.showToast({
				// 	title: '已为您定位至上次观看位置'
				// })

          }

          this.player.one("timeupdate", () => {
            if (!this.player.tag.seeking) {
              // 更新最近一次的播放位置
              lastTime = parseInt(this.player.getCurrentTime());
              this.curTime = lastTime;
            }
          });
          this.player.on("timeupdate", () => {
            if (!this.player.tag.seeking) {
              // 更新最近一次的播放位置
              lastTime = parseInt(this.player.getCurrentTime());
              this.curTime = lastTime;
            }
          });
          this.player.on("ended", () => {
            lastTime = parseInt(this.player.getCurrentTime());
            this.curTime = lastTime;
            this.$refs.videoContent2.click();
          });
          player.on("dispose", (res) => {
            console.log("播放器销毁:", res);
          });
        });
      });
    },

    //调用 recordTime 方法 存本地播放时长
    emitData(event, ownerInstance) {
      ownerInstance.callMethod("recordTime", this.curTime);
    },

    //调用 setVideoFirtsetTime 设置初始播放
    emitSetData(event, ownerInstance) {
      ownerInstance.callMethod("setVideoFirtsetTime");
    },

    //调用 openShow 设置ios 不能播放私用加密 提示信息
    emitopenShow(event, ownerInstance) {
      ownerInstance.callMethod("openShow");
    },
    emitDispose(event, ownerInstance) {
      ownerInstance.callMethod("emitDispose1", true);
    },
    //调用 handleEnd 存储视频播放信息
    endEmitData(event, ownerInstance) {

      ownerInstance.callMethod("handleEnd");
    },

    //调用 screenChange + 设置全屏
    changeVideoScreen(event, ownerInstance) {
      var status = this.player.fullscreenService.getIsFullScreen();
      ownerInstance.callMethod("screenChange", {
        status: status,
        primary: status ? "portrait" : "landscape",
      });

      if (status) {
        setTimeout(() => {
          plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
          this.player.fullscreenService.cancelFullScreen();
        }, 100);
      } else {
        this.player.fullscreenService.requestFullScreen();
        setTimeout(() => {
          plus.screen.lockOrientation("landscape-primary");
        }, 100);
      }
    },

    //调用 changeVideoData 切换播放源
    changeVideoData(event, ownerInstance) {
      ownerInstance.callMethod("changeVideoData");
    },

    //切换播放源
    async receiveIsChange(newValue) {
      if (this.isChange) {
        this.checkValue();
      }
    },

    handleClick(event, ownerInstance) {}, //点击播放器

    receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间

    async receiveisDipose(newValue, oldValue, ownerVm, vm) {
      if (newValue) {
        await player.dispose();
        await this.$refs.videoContent6.click();
      }
    }, //播放时间
    async receiveisPause(newValue, oldValue, ownerVm, vm) {}, //播放时间

    receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间

    receiveMsg(newValue, oldValue, ownerVm, vm) {
      if (typeof window.Aliplayer === "function") {
        this.$nextTick(() => {
          this.checkValue();
        });
      }
    }, //是否刚开始设置播放时间

    receiveplatform(newValue) {}, //获取设备型号

    receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表

    receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息

    receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度

    receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
  },
};
</script>

<style>
.container {
  width: 100vw;
  height: auto;

  /deep/.pause {
    width: 60rpx !important;
    height: 60rpx !important;
  }
}

.fds {
  background-color: blue;
  height: 600rpx;
  position: fixed;
  top: 60rpx;
}

.returnBack {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 88rpx;
  padding-left: 20rpx;
}

.txt {
  color: #fff;
}

.right_title {
  background: #000;
  height: 96rpx;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.return {
  flex-direction: row;
  align-items: center;
  color: #fff;
}

.right_handle {
  width: 200rpx;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20rpx;
}

cover-view {
  display: block;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
}

cover-view {
  visibility: visible !important;
}

cover-image {
  visibility: visible !important;
}

.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;

  i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    display: block;
    margin-top: 7px;
    cursor: pointer;

    & + i {
      margin-left: 3px;
    }

    @media (min-width: 768px) {
      &:hover + .player-tooltip {
        display: block;
      }
    }
  }

  .player-tooltip {
    &.prev {
      left: -10px;
    }

    &.list {
      left: 5px;
    }

    &.next {
      right: -12px;
    }
  }
}

.playlist-content {
  position: absolute;
  right: 0;
  width: 0px;
  padding-bottom: 48px;
  box-sizing: border-box;
  height: 100%;
  transition: all 0.38s ease-in-out;
  overflow: hidden;

  .list {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    overflow: auto;

    .video-item {
      color: #fff;
      padding: 0px 10px;
      line-height: 35px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &.active {
        background-color: #000;
        color: #00ddff;
      }

      @media (min-width: 768px) {
        &:hover {
          background-color: #000;
          color: #00ddff;
        }
      }
    }
  }
}

.player-tooltip {
  position: absolute;
  display: none;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  background: #3c3c3c;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  height: 28px;
  top: -48px;
  padding: 0 5px;
  white-space: nowrap;
}

.playlist-skip-tip {
  padding: 5px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  transform: translate(-50%, -50%);
}

#rotating-div {
  width: 100vw;
  height: 100vh;
  background-color: #3498db;
  transform: rotate(90deg);
  /* 旋转90度 */
  transform-origin: center center;
  /* 设置旋转中心点在div中心 */
  position: fixed;
  /* 固定定位，全屏显示 */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>
