<!--
 * @Author: your name
 * @Date: 2022-09-20 10:22:51
 * @LastEditTime: 2024-02-19 11:40:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-web\src\views\situationPresentation\dialog\gzyInfo.vue
-->
<template>
  <div class="dialogBox" >
    <div class="title">
      <span class="mc">感知源</span>
      <span @click="close" class="close"><el-icon><Close /></el-icon> </span>
    </div>
    <div class="videoLIstBox">
      <div v-for="(item, index) in info" :key="index">
        <div class="infoBox">
          <div class="content">{{ item.sbmc }}</div>
          <div class="other">
            <p>设备编号：{{ item.sbbh }}</p>
            <p>所属部门：{{ item.ssbm }}</p>
            <p class="itemBox">
              <span>厂商名称：{{ item.csmc }}</span>
              <button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)"> 关闭 </button>
              <button v-else class="dp-default small" @click="openVideo(item)">播放 </button>
            </p>
            <div class="videoBox" :id="'id_'+item.sbbh" v-if="item.isPlay">
            </div>
          </div>
          <div class="addressBox">
              <div class="ddd">
               <img src="@/assets/images/situationPresentation/dingwei.png" />
               <span>{{ item.dzmc }}</span>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
// import VideoPay from "@/components/videoOne/index"; //ws播放
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data:{
    type:Array,
    default:[]
  }
})
const info = ref([])
watch(()=>props.data,(val)=>{
  info.value = val
},{
  immediate:true
})
// 打开视频
function openVideo(item) {
  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
  SPPUC.rdCard(item.sbbh, 1, ["10%", "40%"]);
}
//关闭视频
function closePlay(id) {
  info.value.forEach((item) => {
    if (item.id == id) item.isPlay = false;
  });
}

//关闭弹窗
function close() {
  emitter.emit("deletePointArea", "lang");
  emitter.emit("showGzy", false);
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";

.dialogBox{
  padding: 0 0 10px 0;
  box-sizing: border-box;
  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    .mc { margin-left: 10px; }
  }
  .videoLIstBox {
    max-height: 680px;
    padding: 4px 10px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .infoBox {
      position: relative;
      padding: 4px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #20557c;
      .content {
        padding: 10px 10px 0 10px;
        font-size: 14px;
      }
      .other {
        margin: 0 10px;
        padding: 0px;
        color: #779dcd;
        list-style: none;
        .itemBox {
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          span {
            display: inline-block;
          }
        }
        .videoBox {
          height: 160px;
          background: #000;
        }
        p { margin: 5px 0;  }
      }
    }
  }
}
.ddd{

}
</style>
