<template>
  <box
    componentkey="LEDCamera"
    title="LED屏画面监测摄像头"
    :bus="bus"
  >
    <video
      ref="video"
      style="width: 100%; height: 100%"
      :src="src"
      autoplay
      muted
      loop
      @timeupdate="timeupdate"
      @canplay="canplay"
    />
  </box>
</template>

<script>
import { getAssetUrl } from '@/api/asset'
import Box from './Box'
import Bus from './bus'
export default {
  components: {
    Box
  },
  props: {
    full: {
      type: Boolean,
      default: false
    },
    currentTime: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      nodata: false,
      propCurrentTime: 0,
      bus: {},
      src:
        process.env.ENV === 'xuzhou'
          ? getAssetUrl('material-draft/aff61eb0-3531-409b-80a2-b3f1354b56e4')
          : 'https://msr.rondochina.com:6443/oss-api/material-draft/aff61eb0-3531-409b-80a2-b3f1354b56e4'
    }
  },
  created () {
    if (!this.full) {
      Bus.$on('getCurrentTime', currentTime => {
        const video = this.$refs.video
        video.currentTime = currentTime
        video.play()
      })
    }
  },

  beforeDestroy () {
    if (this.full) {
      const video = this.$refs.video
      Bus.$emit('getCurrentTime', video.currentTime)
    }
  },
  methods: {
    pause () {
      const video = this.$refs.video
      video.pause()
    },
    init () {
      if (this.$init) {
        return
      }
      console.log('init', this.currentTime)
      const video = this.$refs.video
      video.currentTime = this.currentTime
      this.$init = true
    },
    timeupdate () {
      const video = this.$refs.video
      if (!video) {
        return
      }
      this.bus = { currentTime: video.currentTime }
    },
    canplay () {
      console.log('canplay', this.full)
      if (this.full) {
        this.init()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
