<template>
  <div v-if="isFailed && useEmpty">
    <slot name="empty" />
  </div>
  <div v-else :id="getPlayerId" />
</template>

<script>

import { defineComponent, reactive, ref, computed, toRefs, nextTick } from 'vue'
export default defineComponent({
  name: 'VideoPlayer',
  props: {
    /* 播放器id */
    id: {
      type: String,
      default: () => 'palyer'
    },
    /* 是有填充空白 */
    useEmpty: {
      type: Boolean,
      default: false
    }
  },
  emits: ['timeUpdate', 'video-status'],
  setup(props, { emit }) {
    const videoPlayer = Symbol.for(props.id)
    const data = reactive({
      [videoPlayer]: null,
      seekTime: null,
      canSeek: true,
      isSeek: false,
      isFailed: true
    })
    /* 获取播放器的id */
    const getPlayerId = computed(() => {
      return props.id
    })

    /* 播放器组件 */
    const toolComponent = Aliplayer.Component({
      /* 时间更新事件 */
      timeupdate(player, e) {
        data.seekTime = player.getCurrentTime()
        emit('video-status', data.isSeek ? 'skip' : 'playing')
      },
      ready(player, e) {
        emit('video-status', 'ready')
      },
      pause(player, e) {
        emit('video-status', 'pause')
      },
      play(player, e) {
        emit('video-status', 'play')
      },
      ended(player, e) {
        emit('video-status', 'ended')
      },
      error(player, e) {
        data.isFailed = true
        emit('video-status', 'error')
      }
    })

    /* 初始化播放器 */
    function init(options) {
      if (!options.source) {
        data.isFailed = true
      } else {
        data.isFailed = false
        nextTick(() => {
        /* 实例化ali播放器 */
          const player = new Aliplayer(
            {
              id: props.id,
              width: '500px',
              height: '260px',
              autoplay: true,
              ...options,
              components: [toolComponent]
            },
            function(player) { player.mute() }
          )
          /* 监听开始拖拽事件 */
          player.on('startSeek', ({ paramData }) => {
          /* 仅变更标识 */
            data.isSeek = true
          })
          /* 监听完成拖拽事件 */
          player.on('completeSeek', ({ paramData }) => {
          /* 仅变更标识 */
            data.isSeek = false
            data.seekTime = paramData
            /* 是否通知跳转 */
            if (data.canSeek) {
              emit('video-status', 'skip')
            }
          })
          data[videoPlayer] = player
        })
      }
    }

    /* 获取当前播放器的时间 */
    function getTime() {
      let currentTime = 0
      let duration = 0
      const seekTime = data.seekTime
      if (data[videoPlayer] && !data.isFailed) {
        currentTime = data[videoPlayer]?.getCurrentTime()
        duration = data[videoPlayer]?.getDuration()
      }
      return {
        currentTime,
        duration,
        seekTime
      }
    }
    /* 设定播放器播放时间 */
    function seekTime(time) {
      if (data[videoPlayer] && !data.isFailed) {
        data.canSeek = false
        data[videoPlayer]?.seek(time)
        setTimeout(() => {
          data.canSeek = true
        }, 100)
      }
    }
    /* 设定播放器开始 */
    function playVideo() {
      if (data[videoPlayer] && !data.isFailed) {
        data[videoPlayer]?.play()
      }
    }
    /* 设定播放器暂停 */
    function pauseVideo() {
      if (data[videoPlayer] && !data.isFailed) {
        data[videoPlayer]?.pause()
      }
    }
    /* 销毁播放器 */
    function disposeVideo() {
      if (data[videoPlayer] && !data.isFailed) {
        data[videoPlayer]?.dispose()
      }
      data.isFailed = true
    }

    return {
      ...toRefs(data),
      getPlayerId,
      init,
      getTime,
      seekTime,
      playVideo,
      pauseVideo,
      disposeVideo
    }
  }
})

</script>
<style>
.prism-player .prism-ErrorMessage .prism-error-operation{
  border-bottom: none;
}
.prism-player .prism-ErrorMessage .prism-error-operation a.prism-button.prism-button-refresh{
  display: none;
}
.prism-player .prism-ErrorMessage .prism-error-operation a.prism-button.prism-button-orange{
  display: none;
}
/* .prism-player .prism-ErrorMessage .prism-detect-info.prism-center{
  display: none;
} */
</style>
