<template>
  <div class="ingBigBox" v-if="isShowBigImg">
    <div class="demo-image__preview">
      <el-image
        style="width: 100px; height: 100px"
        :src="imgUrl"
        :preview-src-list="srcList"
        :initial-index="0"
        fit="cover"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted, onUnmounted } from "vue";
import emitter from "@/utils/eventBus.js";
const isShowBigImg = ref(false);
const imgUrl = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
const srcList = ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"];
onMounted(() => {
  emitter.on("showImg", (res) => {
    isShowBigImg.value = res.show;
    imgUrl.value = res.url;
  });
});
onUnmounted(() => {
  emitter.off("showImg");
});
</script>

<style lang="scss" scoped>
.ingBigBox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  .cnt-box {
    width: 500px;
    height: 500px;
    background: #00143d;
    padding: 10px 20px 20px;
    .close {
      width: 100%;
      height: 20px;
      text-align: right;
      margin-bottom: 10px;
    }
    .imgBox {
      width: 100%;
      height: calc(100% - 30px);
      border: 1px solid #275288;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>