<template>
  <DialogDragger :title="props.data.type" top="150px" v-model="props.show" @close="close">
    <ul class="warningList" ref="gjyjList" v-loading="loading">
      <li v-for="item in warningList" :key="item.id">
        <YjItem :data="item"/> 
      </li>
      <MOSTY.Empty :show="!loading && warningList.length <= 0" :imgSize="150"></MOSTY.Empty>
    </ul>
  </DialogDragger>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import DialogDragger from "@/views/home/layout/dialogDragger.vue";
import YjItem from "@/views/home/components/yjItem.vue";
import { ref,  onMounted, getCurrentInstance, defineProps, watch } from "vue";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const warningList = ref([]); //预警列表数据
const pageCurrent = ref(1);
const gjyjList = ref(null); //预警列表数据
const loading = ref(false);
//参数传递
const props = defineProps({
  //某条预警详情
  data: {
    type:Object,
    default:{}
  },
  show: {
    type:Boolean,
    default:false
  },
  //标题数据
  title: String
});
onMounted(() => {
 
});
// 监听视频地址变化
watch(() => props.data,(val) => {
  pageCurrent.value = 1;
},{ immediate: true, deep: true });
//关闭
function close() {
  emitter.emit('deletePointArea','home_yj_map');
  emitter.emit("showHomeYJ",false);
}


</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  ul.warningList{
    height: calc(100vh - 198px);
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 10px;
    box-sizing: border-box;
    .photo {
      width: 60px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}

</style>
