<script setup>
import { watch, ref, onMounted, onUnmounted } from 'vue';

import videojs from 'video.js';
import 'video.js/dist/video-js.css'
// import 'video.js/dist/lang/zh-CN.js'
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
videojs.addLanguage('zh-CN', video_zhCN);

videojs.hook

const divRef = ref()

const videoPlayerRef = ref()
let player = null

const props = defineProps({
  options: {
    type: Object,
    default: ({})
  },
  // url: {
  //   type: String || undefined,
  //   default: undefined
  // },
  urls: {
    type: Array || undefined,
    default: undefined
  }
})

import phUrl from '~/assets/video/_ph.png'

onMounted(() => {
  const size = divRef.value.getBoundingClientRect()
  player = videojs(
    videoPlayerRef.value,
    Object.assign(
      {
        language: 'zh-CN',
        autoplay: false,
        muted: true,
        controls: true,
        enableSourceset: true,
        width: size.width,
        // height: size.height - 24,
        height: size.height,
        poster: phUrl,
        controlBar: {
          // liveDisplay:false
        }
      },
      // props.url ? {
      //   sources: [{
      //     src: props.url,
      //     type: 'application/x-mpegURL'
      //   }],
      // } : {},
      // props.urls ? {
      //   sources: [{
      //     src: props.urls[1],
      //     type: 'application/x-mpegURL'
      //   }],
      // } : {},
      // props.urls ? {
      //   sources: props.urls.map((url) => ({
      //     src: url,
      //     type: 'application/x-mpegURL'
      //   })),
      // } : {},
      props.options
    )
  )
})

// watch(
//   () => props.url,
//   (url) => {
//     if (player && url) {
//       player.src({
//         src: url,
//         type: 'application/x-mpegURL'
//       })
//     }
//   },
//   {
//     immediate: true
//   }
// )


const currentUrl = ref()
const currentUrlIndex = ref(0)

watch(
  () => props.urls,
  (urls) => {
    // if (player && urls) {
    //   player.src({
    //     src: urls[0],
    //     type: 'application/x-mpegURL'
    //   })
    // }
    // if (player) { player.pause() }
    if (urls) {
      currentUrl.value = urls[currentUrlIndex.value]
    } else {
      currentUrl.value = undefined
    }
  }, {
  immediate: true
}
)

const suffix2type = {
  m3u8: 'application/x-mpegURL',
  mp4: 'video/mp4'
}

watch(
  () => currentUrlIndex.value,
  (index) => {
    if (Array.isArray(props.urls)) {
      currentUrl.value = props.urls[index]
      if(player){
        player.play()
      }
    }
  },
  {
    immediate: true
  }
)
watch(
  () => currentUrl.value,
  (url) => {
    if (player) {
      player.pause()
      if (url) {
        const { pathname } = new URL(url)
        const suffix = pathname.split('.').pop()
        player.src({
          src: url,
          type: suffix2type[suffix]
        })
        player.play()
      }
    }
  },
  {
    immediate: true
  }
)

onUnmounted(() => {
  player.dispose()
  player = null
})
</script>

<template>
  <div class="w-full h-full flex flex-col" ref="divRef">
    <video ref="videoPlayerRef" class="video-js"></video>

    <!-- <div class="w-full px-4 bg_rgba_43516370">
      <el-radio-group v-model="currentUrlIndex" size="small">
        <el-radio v-for="(_, i) in [0, 1, 2]" :label="i">线路{{ i + 1 }}</el-radio>
      </el-radio-group>
    </div> -->
  </div>

</template>

<style lang="scss" scoped>
:deep(.video-js) .vjs-big-play-button {
  top: calc(50% - 0.8em);
  left: calc(50% - 1.5em);
}

.bg_rgba_43516370 {
  background-color: rgba(43, 51, 63, .7);
}
</style>
