<template>
  <!-- <div :id="id" class="banner-img" autoplay="autoplay"> -->
  <div :id="id" class="banner-img">
  </div>
</template>

<script>
// const TcPlayer = window.TcPlayer
import { TcPlayer } from "@/utils/tc-player-2.2.0";
export default {
  props: {
    id: {
      type: String,
      default: "tc-player"
    },
    width: {
      type: [Number, String],
      default: 375
    },
    height: {
      type: [Number, String],
      default: 210
    },
    listener: {
      type: Function,
      default() {
        return function(msg) {};
      }
    },
    live: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object
    },
    pStatus: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      tcPlayer: null
    };
  },
  mounted() {
    this.$nextTick(function(){
      let htmlDom = document.getElementsByTagName('html')[0];
      let htmlWidth = parseFloat(htmlDom.style.fontSize) * 10
      this.init(htmlWidth);
    })
  },
  methods: {
    init(htmlWidth) {
      const options = {
        // width: String(htmlWidth),
        // width: String(this.width),
        // width: String('100%'),
        // height: String(this.height),
        live: this.live,
        listener: this.listener,
        ...this.options
      };
      options.width = htmlWidth
      this.tcPlayer = new TcPlayer(this.id, options);
    },
    reset() {
      if (this.tcPlayer) {
        this.tcPlayer.destroy();
        this.init();
      }
    },
    play() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.play();
    },
    pause() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.pause();
    },
    togglePlay() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.togglePlay();
    },
    mute(muted) {
      if (!this.tcPlayer) return;
      return this.tcPlayer.mute(muted);
    },
    volume(val) {
      if (!this.tcPlayer) return;
      return this.tcPlayer.volume(val);
    },
    playing() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.playing();
    },
    duration() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.duration();
    },
    currentTime(time) {
      if (!this.tcPlayer) return;
      return this.tcPlayer.currentTime(time);
    },
    fullscreen(enter) {
      if (!this.tcPlayer) return;
      return this.tcPlayer.fullscreen(enter);
    },
    buffered() {
      if (!this.tcPlayer) return;
      return this.tcPlayer.buffered();
    },
    switchClarity(clarity) {
      if (!this.tcPlayer) return;
      return this.tcPlayer.switchClarity(clarity);
    }
  },
  destroyed() {
    if (this.tcPlayer) {
      this.tcPlayer.destroy();
    }
  }
};
</script>

<style lang="less" scoped>
.banner-img {
  // display: inherit;
  width: 375px;
  height: 210px;
}
</style>
