<template>
  <div class="container">
    <div v-if="showVideo">
      <div :id="elId" style="width: 700px; height: 500px"></div>
    </div>

    <!-- <div class="info" v-show="msg">{{ msg }}</div> -->
    <div class="control" v-show="url && !msg && !loading">
      <i :class="pause ? 'el-icon-video-play' : 'el-icon-video-pause'" @click.stop="playPause"></i>
      <i class="el-icon-full-screen" @click.stop="fullScreen"></i>
    </div>
    <div class="loading" v-show="loading">
      <span>视频加载中..</span>
    </div>
    <div class="offlinediv" v-if="offlineShow">当前监控设备暂时无法预览，请稍后重试</div>
  </div>
</template>
<script lang="jsx">
import { getVideoUrl } from "@/api/operation";
let idx = 100;
let errorMsg = {
  "0x12f900003": "仅回放支持该功能",
  "0x12f900004": "普通模式不支持该功能",
  "0x12f900005": "高级模式不支持该功能",
  "0x12f900006": "播放库报错",
  "0x12f900007": "Decoder.js加载失败",
  "0x12f910000": "websocket连接失败，请核对取流URL",
  "0x12f910010": "取流失败",
  "0x12f910011": "流中断",
  "0x12f910014": "没有音频数据",
  "0x12f910015": "未找到对应websocket",
  "0x12f910016": "websocket不在连接状态",
  "0x12f910017": "不支持智能信息展示",
  "0x12f910020": "单帧回放时不能暂停",
  "0x12f910021": "已是最大倍速",
  "0x12f910022": "已是最小倍速",
  "0x12f920000": "储存空间配额失败",
  "0x12f920001": "请求文件系统失败",
  "0x12f920002": "获取文件失败",
  "0x12f920003": "创建writer失败",
  "0x12f920004": "写数据失败",
  "0x12f930000": "内存不足",
  "0x12f950000": "采集音频失败，可能是在非https/localhost域下使用对讲导致",
  "0x12f950001": "对讲不支持这种音频编码格式",
  "0x02200404": "取流失败",
};
export default {
  props: {
    autoPlay: {
      type: Boolean,
      default: true,
    },
      // 重试次数
    retry: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      loading: false,
      player: null,
      elId: "",
      msg: "",
      pause: true,
      showVideo: true,
      videoUrl: '',
      code: '',
      retryAccu: 0,
      offlineShow: false
    };
  },

  created() {
    this.elId = `playWnd_${idx++}`;
  },
  mounted() {
    // this.createPlayer();
  },
  beforeUnmount() {
    this.stopVideo();
  },
  methods: {
    // 创建实例
    createPlayer(url, code) {
      this.offlineShow = false
      this.videoUrl = url
      this.code = code
      const { elId, autoPlay } = this;
      const _that = this
      this.player = new window.JSPlugin({
        szId: elId,
        szBasePath: "/",
        // iMaxSplit: 1,
        // iCurrentSplit: 1,
        openDebug: true,
        // iWidth: 500,
        // iHeight: 500,
        oStyle: {
          borderSelect: "none",
        },
      });
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        pluginErrorHandler: (iWndIndex, iErrorCode, oError) => {
          //插件错误回调
          // console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
          console.log('插件错误回调')
          this.msg = errorMsg[iErrorCode]
            ? errorMsg[iErrorCode]
            : `错误码：${iErrorCode}`;
          this.playStop();
          this.showVideo = false
          setTimeout(() => {
            this.reloadUrl()
          }, 500);
        },
        performanceLack: () => {
          console.log('性能不足')
        }
      });
      if (autoPlay) {
        this.play();
      }
    },
    // 重新获取新的地址并重新加载组件
    async reloadUrl() {
      this.retryAccu ++
      if(this.retryAccu > this.retry) {
        this.offlineShow = true
        return
      }
      this.showVideo = true
      const resurl = await getVideoUrl(this.code);
      if (resurl.data) {
        this.videoUrl = resurl.data
        this.player = null
        this.createPlayer(this.videoUrl, this.code)
      }
    },
    // 播放
    play() {
      let { player, videoUrl } = this;
      if (!videoUrl) {
        this.msg = "视频加载失败";
        return;
      }
      this.loading = true;
      this.player.JS_Play(videoUrl, { playURL: videoUrl }, 0).then(
        (res) => {
          this.pause = false;
          this.loading = false;
        },
        (e) => {
          // console.log('播放错误啊啊啊啊')
          // console.error(e);
          // this.pause = true;
          this.loading = false;
        }
      );
    },
    // 播放暂停切换
    playPause() {
      if (this.pause) {
        // 播放
        this.play();
      } else {
        // 暂停
        this.playStop();
      }
    },
    // 暂停视频播放
    playStop() {
      if (this.loading) {
        this.loading = false;
      }
      if (!this.player) {
        return;
      }
      this.player.JS_Stop().then(
        () => {
          this.pause = true;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    stopVideo() {
      this.playStop();
      this.msg = "";
      this.player = null;
    },
    // 全屏
    fullScreen() {
      this.player.JS_FullScreenDisplay(true).then(
        () => {
          console.log(`wholeFullScreen success`);
        },
        (e) => {
          console.error(e);
        }
      );
    },
  },
};
</script>
<style scoped>
#playWnd_0 {
  width: 700px !important;
  height: 500px !important;
}
#player-container-0 {
  width: 700px !important;
  height: 500px !important;
}
#playWnd_0 div {
  width: 100% !important;
  height: 100% !important;
}
.sub-wnd {
  height: 500px !important;
}
/* video.play-window {
  width: 700px !important;
  height: 500px !important;
} */
video.play-window {
  width: 100% !important;
  height: 100% !important;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  min-height: 500px !important;
  position: relative;
  .info {
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
  }
  .control {
    position: absolute;
    right: 0;
    bottom: 15px;
    font-size: 16px;
    padding: 5px;
    cursor: pointer;
    i {
      padding: 0 5px;
    }
  }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .offlinediv {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
}
</style>
<style lang="scss">
video.play-window {
  width: 100% !important;
  height: 100% !important;
}
</style>