<!--
  Description: 视频播放-img-ws
  Author: 李亚光
  Date: 2024-11-11
 -->
<script lang="ts" setup name="VideoPlayer">
import axios from 'axios'
const $props = defineProps({
  id: {
    type: String,
    required: true,
  },
  status: {
    type: String,
    default: '',
  },
})
const publicPath = window.location.href.split('#')[0]
const src = ref(`${publicPath}/image/normal.png`)
const webSocket = ref()
watch(() => $props.id, (newVal) => {
  console.log($props.status, '$props.status')
  if ($props.status !== '在线') {
    src.value = `${publicPath}/image/normal.png`
    return
  }
  if (Number(newVal)) {
    src.value = `${publicPath}/image/loaidng2.gif`
    // axios.get(`${window.localStorage.getItem('IntegratedFront')}/api/display/video?device_id=${newVal}`).then((res) => {
    //   console.log(res, 'resresres')
    setTimeout(() => {
      src.value = `${window.localStorage.getItem('IntegratedFront')}/api/display/video?device_id=${newVal}`
    }, 1000)
    // })
    //   .catch(() => {
    //     src.value = `${publicPath}/image/error.png`
    //   })
  }
  else {
    src.value = `${publicPath}/image/normal.png`
  }
}, {
  deep: true,
  immediate: true,
})
onUnmounted(() => {
  if (webSocket.value) {
    webSocket.value.close()
    webSocket.value = ''
    src.value = `${publicPath}/image/normal.png`
  }
})

const errorImage = () => {
  console.log('加载失败')
  src.value = `${publicPath}/image/error.png`
}
</script>

<template>
  <img
    :src="src" style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" alt="视频流"
    object-fit="cover" @error="errorImage"
  >
  <!-- <el-image style="width: 100%; height: 100%; background-color: rgb(0 0 0 / 70%);" :src="src" fit="fill" /> -->
</template>