import mpegtsjs from 'mpegts.js'
import videoPoster from '@/assets/video-poster.png'

export default {
  props: {
    autoplay: {
      type: [Boolean, String],
      default: false
    },
    controls: {
      type: [Boolean, String],
      default: false
    },
    retry: {
      type: [Boolean, String],
      default: false
    }
  },
  data () {
    return {
      poster: videoPoster,
      needPause: this.controls && !this.autoplay,
      paused: true,
      loading: false,
      waiting: false,
      needReset: true
    }
  },
  computed: {
    statusIconClass () {
      switch (true) {
        case this.loading:
          return 'el-icon-loading'
        case this.needReset:
          return 'el-icon-refresh has-active'
        case this.waiting:
          return 'el-icon-loading has-active'
        case this.paused:
          return 'el-icon-video-play has-active'
        default:
          return 'el-icon-video-pause has-active'
      }
    },
    isPlaying () {
      return !(this.loading || this.needReset || this.waiting || this.controls && this.paused)
    }
  },
  created () {
    this.$timer = -1
  },
  beforeDestroy () {
    this.destroyPlayer()
    this.$timer = null
  },
  methods: {
    createPlayer () {
      // todo
    },
    onVideoReset () {
      // todo
    },
    playUrl (url) {
      if (mpegtsjs.isSupported()) {
        this.loading = true
        this.needReset = false
        try {
          const player = mpegtsjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            hasVideo: true,
            url
          })
          player.on(mpegtsjs.Events.ERROR, this.onVideoError)
          // player.on(mpegtsjs.Events.RECOVERED_EARLY_EOF, e => {
          //   console.log('mpegtsjs', mpegtsjs.Events.RECOVERED_EARLY_EOF, e)
          // })
          // player.on(mpegtsjs.Events.MEDIA_INFO, e => {
          //   console.log('mpegtsjs', mpegtsjs.Events.MEDIA_INFO, e)
          // })
          // player.on(mpegtsjs.Events.METADATA_ARRIVED, e => {
          //   console.log('mpegtsjs', mpegtsjs.Events.METADATA_ARRIVED, e)
          // })
          // player.on(mpegtsjs.Events.SCRIPTDATA_ARRIVED, e => {
          //   console.log('mpegtsjs', mpegtsjs.Events.SCRIPTDATA_ARRIVED, e)
          // })
          // player.on(mpegtsjs.Events.STATISTICS_INFO, e => {
          //   console.log('mpegtsjs', mpegtsjs.Events.STATISTICS_INFO, e)
          // })
          this.$player = player
          this.onVideoWaiting()
          player.attachMediaElement(this.$refs.video)
          player.load()
        } catch (error) {
          console.log('连接异常', error)
          this.onVideoDestroyByError('连接异常')
        }
      } else {
        this.destroyPlayer()
        this.$message({
          type: 'warning',
          message: '暂不支持'
        })
      }
    },
    destroyPlayer () {
      clearTimeout(this.$timer)
      this.needReset = true
      this.loading = false
      this.waiting = false
      this.paused = true
      const player = this.$player
      if (player) {
        player.pause()
        player.unload()
        player.detachMediaElement()
        player.destroy()
        this.$player = null
      }
    },
    onFullScreen () {
      if (this.$listeners.fullscreen) {
        this.$emit('fullscreen')
        return
      }
      const video = this.$refs.video
      if (!video) {
        return
      }
      if (this.$isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        this.$isFullScreen = false
      } else {
        const elm = video.parentNode
        if (elm.requestFullscreen) {
          elm.requestFullscreen()
        } else if (elm.webkitRequestFullScreen) {
          elm.webkitRequestFullScreen()
        } else if (elm.mozRequestFullScreen) {
          elm.mozRequestFullScreen()
        } else if (elm.msRequestFullscreen) {
          elm.msRequestFullscreen()
        } else {
          this.$message({
            type: 'warning',
            message: '暂不支持全屏观看'
          })
          return
        }
        this.$isFullScreen = true
      }
    },
    onPlayOrPause () {
      switch (true) {
        case this.loading:
          break
        case this.needReset:
          this.createPlayer()
          break
        case this.paused:
          this.needPause = false
          this.$player.play()
          break
        default:
          this.needPause = true
          this.$player.pause()
          break
      }
    },
    onVideoPlay () {
      console.log('onVideoPlay')
      this.paused = false
      if (this.loading) {
        this.loading = false
        if (this.needPause) {
          this.$player.pause()
        }
      }
    },
    onVideoPause () {
      console.log('onVideoPause')
      this.paused = true
      if (this.waiting) {
        this.waiting = false
        clearTimeout(this.$timer)
      }
    },
    onVideoWaiting () {
      console.log('onVideoWaiting')
      this.waiting = true
      clearTimeout(this.$timer)
      this.$timer = setTimeout(() => {
        if (this.loading || this.waiting) {
          this.onVideoDestroyByError('暂未获取到视频流')
        }
      }, 10000)
    },
    onVideoPlaying () {
      console.log('onVideoPlaying')
      if (this.waiting) {
        this.waiting = false
        clearTimeout(this.$timer)
      }
    },
    onVideoError (e) {
      console.log('onVideoError', e)
      this.onVideoReset()
      this.onVideoDestroyByError('播放异常')
    },
    onVideoEnded () {
      console.log('onVideoEnd')
      this.onVideoReset()
      this.onVideoDestroyByError('播放结束')
    },
    onVideoRefresh () {
      this.destroyPlayer()
      this.onVideoReset()
      this.createPlayer()
    },
    onVideoDestroyByError (message) {
      this.destroyPlayer()
      if (this.retry) {
        this.createPlayer()
      } else if (message) {
        this.$message({
          type: 'warning',
          message
        })
      }
    }
  }
}
