<!--
 * @Author: your name
 * @Date: 2023-02-09 14:04:11
 * @LastEditTime: 2023-03-06 10:46:07
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \lz_web_new\src\components\videoDialog\index.vue
-->
<template>
  <div class="videoBox1" v-if="isShowVideo">
    <div class="BoxCnt">
      <div class="header" @click="closeVideo">
        <el-icon :size="22"><CircleClose /></el-icon>
      </div>
      <div class="movie">
        <iframe
          :src="txtUrl.src"
          frameborder="0"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import emitter from "@/utils/eventBus.js";
import { http } from "@/api/service";
const player = ref(null);
const splitNum = ref(1);
const isShowVideo = ref(false);
const data = ref(null);
const videoUrl = ref(null);
const txtUrl = ref({
  src: ""
});
onMounted(() => {
  emitter.on("openGzyVideo", (res) => {
    isShowVideo.value = true;
    data.value = res;
    getUrl(res);
  });
});
onUnmounted(() => {
  emitter.off("openGzyVideo");
});
function getUrl(item) {
  let params = {
    cameraIndexCode: item.sbbh
  };

  http.getSpWs(params).then((res) => {
    txtUrl.value.src = "http://80.75.112.18:56233?ws=" + res.url;
  });
}
function closeVideo() {
    emitter.off("openGzyVideo");
  isShowVideo.value = false;
}
</script>

<style lang="scss" scoped>
.videoBox1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.BoxCnt {
  position: absolute;
  width: 990px;
  height: 80vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  .header {
    width: 100%;
    height: 30px;
    text-align: right;
    font-size: 20px;
    cursor: pointer;
  }
  .movie {
    width: 990px;
    height: 628px;
  }
}
</style>
