<!-- 安全学习 -->
<template>
  <view class="videoLook">
    <view class="page-body">
      <view class="page-section">
        <video id="myVideo"
               class="video"
               :src="dataModel.video_url"
               @error="videoErrorCallback"
               :title="dataModel.video_title"
               :initial-time="initial_time"
               @timeupdate="videoTimeUpdateEvent"
               enable-danmu
               autoplay
               controls>
        </video>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/common/config";
export default {
  data() {
    return {
      src: "",
      inputValue: "",
      dataModel: null,
      initial_time: 0,
      currentTime: 0, //播放时长 最后观看的时间节点
      duration: 0,
      oldCurrentTime: null,
    };
  },
  onReady: function (res) {
    this.videoContext = uni.createVideoContext("myVideo");
  },
  onLoad(options) {
    this.index = options?.index;
    this.dataModel = JSON.parse(options?.dataModel);
    this.oldCurrentTime = this.dataModel.currentTime;
    uni.setNavigationBarTitle({
      title: this.dataModel.video_title,
    });
  },
  //页面销毁 时 保存
  async beforeDestroy() {
    this.saveCurrentTime();
  },
  methods: {
    async saveCurrentTime() {
      try {
        //观看进度是否大于
        if (this.oldCurrentTime > this.currentTime) {
          return;
        }
        let res = await this.$request.get(
          `${config.APIHOST}learn/videoLook/addUserLookVideo`,
          {
            params: {
              ...this.dataModel,
              id: this.dataModel.id,
              currentTime: this.currentTime,
              duration: this.duration,
            },
          }
        );
        if (res.code == -1) {
          uni.showToast({
            title: `保存进度错误,请联系管理员 ${res.msg}`,
            icon: "none",
          });
          return;
        }
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.emit("back", {
          ...this.dataModel,
          id: this.dataModel.id,
          currentTime: this.currentTime,
          duration: this.duration,
        });
      } catch (error) {
        console.log("发生报错行为");
      }
    },
    bindInputBlur: function (e) {
      this.inputValue = e.target.value;
    },
    bindButtonTap: function () {
      var that = this;
      uni.chooseVideo({
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: ["front", "back"],
        success: function (res) {
          this.src = res.tempFilePath;
        },
      });
    },
    bindSendDanmu: function () {
      this.videoContext.sendDanmu({
        text: this.inputValue,
        color: this.getRandomColor(),
      });
    },
    videoErrorCallback: function (e) {
      console.log(e.target.errMsg);
    },
    getRandomColor: function () {
      const rgb = [];
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16);
        color = color.length == 1 ? "0" + color : color;
        rgb.push(color);
      }
      return "#" + rgb.join("");
    },
    videoTimeUpdateEvent(e) {
      // 播放进度改变
      this.currentTime = e.detail.currentTime;
      this.duration = e.detail.duration;
      if (this.duration == this.currentTime) {
        this.saveCurrentTime();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.videoLook {
  .video {
    width: 100%;
  }
}
</style>