<template>
   <div id="player"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref,watch} from 'vue';
const playJs=ref("//player.polyv.net/script/player.js");
const player=ref(null);
const props=defineProps({
    vid:{
        type: String,
        default:''
    }
})
const user_id=ref('');
	  watch(()=>props.vid,()=>{
		   loadPlayerScript(loadPlayer);
	  })
   const loadPlayerScript=(callback)=> {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', playJs.value);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    };
     const loadPlayer=()=> {
		 let userInfo=uni.getStorageSync('userInfo');
		 if(userInfo.user_id){
		 	  user_id.value=userInfo.user_id;
		 }
		
      const polyvLivePlayer = window.polyvLivePlayer;
        player.value = polyvPlayer({
        wrap: '#player',
        width: '100%',
        height: 250,
		forceH5:true,
		df:3,
		 uid:user_id.vlaue,
        vid: props.vid,
      });
    }
   onUnmounted(()=>{
      player.value.destroy();
   })
</script>

<style>

</style>