<template>
  <div style="width: 100%; height: 100%; overflow: hidden;">
    <iframe
      v-if="urls"
      :src="'http://80.2.22.233:56233?ws='+urls"
      style="border: none; width: 100%; height: 100%; "
      allowfullscreen
      allowtransparency
      scrolling="no"
    ></iframe>
  </div>
</template>

<script setup>
  import { http } from "@/api/service";
  import { ref,onMounted,onUnmounted,watch,getCurrentInstance} from "vue";
  const props = defineProps({
    sbbh:String
  })
  const { proxy } = getCurrentInstance();
  const urls = ref(null)
  watch(()=>props.sbbh,(val)=>{
    if(!val) {
      proxy.$message({
        message: "获取不到视频流，播放失败!!!",
        grouping:true,
        type: "info"
      });
    }else{
      getUrl(val)
    }
  },{immediate:true})

   function getUrl(sbbh){
     http.previewURLs({ sbbh: sbbh,protocol:'ws'}).then((res) => {
        let data = JSON.parse(res);
        if(data.data && data.data.url){
          urls.value = data.data.url
        }else{
          proxy.$message({
            message: "获取不到视频流，播放失败!!!",
            grouping:true,
            type: "info"
          });
        }
      })
  }
</script>

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