<template>
  <div class="dialogBox" v-if="show">
    <div class="title">
      <span>感知源</span><span @click="close" class="close">
        <el-icon><Close/></el-icon>
      </span>
    </div>
    <div v-for="(item,index) in info" :key="index+'gzy'">
      <div class="infoBox">
        <div class="content">{{ item.sbmc }}</div>
        <div class="other">
          <p>设备编号：{{ item.sbbh }}</p>
          <p>所属部门：{{ item.ssbm }}</p>
          <p>厂商名称：{{ item.csmc }}</p>
        </div>
        <div class="addressBox">
          <div>
            <img src="@/assets/images/situationPresentation/dingwei.png" />
            <span>{{ item.dzmc }}</span>
          </div>
        </div> 
      </div>
      <div class="btn_bom">
        <button class="dp-default small" @click="chooceItem(item)" style="margin-right: 10px;">选择</button>
        <button class="dp-default small" @click="openVideo(item)">视频播放</button>
      </div> 
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted ,defineEmits} from "vue";
// 左右折叠状态
import emitter from "@/utils/eventBus.js";
const show = ref(false);
const info = ref([]); //警情数据
const emits = defineEmits(['chooseVideo'])
onMounted(() => {
  emitter.on("showGzyInfo", (res) => {
    info.value = res;
    show.value = true;
  });
});
onUnmounted(() => {
  emitter.off("showGzyInfo");
});

function chooceItem(item){
  emits('chooseVideo',item)
}

// 打开视频
function openVideo(item){
  let params = {
    ...item,
    splitNum:1
  }
  emitter.emit("openGzyVideo",params)
}
//关闭弹窗
function close() {
  show.value = false;
  emitter.emit("showGzy", false);
  emitter.emit("deletePointArea", "lang");
}
</script>

<style lang="scss" scoped>
.dialogBox {
  width: 360px;
  max-height: 78vh;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 12px;
  position: absolute;
  top: 50px;
  left: 700px;
  background: #052342;
  z-index: 9;
  border-radius: 4px;
  .title {
    height: 38px;
    line-height: 38px;
    display: flex;
    justify-content: space-between;
    padding: 0;
    .close {
      font-size: 20px;
      font-weight: 200;
      cursor: pointer;
    }
  }
  .addressBox {
    border-top: 1px solid #162f55;
    margin: 0 10px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
  }
  .infoBox {
    border: 1px solid #275288;
    position: relative;
    margin-bottom: 15px;
    .content {
      padding: 10px 10px 0 10px;
      font-size: 14px;
    }
    .other {
      margin: 0 10px;
      padding: 0px;
      color: #779dcd;
      list-style: none;
    }
  }
}
.btn_bom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
  span {
    background: #2c7ee3;
    border-radius: 4px;
    padding: 2px 12px;
    cursor: pointer;
  }
  span:hover {
    background: #497dbd;
    border-radius: 4px;
    padding: 2px 12px;
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";

.infoBox {
  position: relative;
  margin-bottom: 15px;
}

.content {
  padding: 10px 10px 0 10px;
  font-size: 14px;
}

.other {
  margin: 0 10px;
  padding: 0px;
  color: #779dcd;
  list-style: none;

  p {
    margin: 5px 0;
  }
}
.itemBox{
  display: flex;
  justify-content: space-between;
  span{
    display: inline-block;
    width: 80%;
  }
}
</style>
