<template>
  <Transition>
    <div
      v-if="visible"
      class="fixed h-screen w-screen top-0 left-0 flex items-center flex-col z-30"
    >
      <div class="opacity-70 bg-black absolute w-full h-full"></div>
      <div class="close cursor-pointer" @click="$emit('update:visible', false)">
        <img src="@/assets/img/close.svg" class="w-9" alt="" srcset="" />
      </div>
      <div
        style="height: 100%"
        class="flex flex-col justify-center items-center"
      >
        <ElImage
          id="imageDisplay"
          :src="url"
          :style="{
            height: '70%',
            zIndex: 1,
            position: 'relative',
            overflow: 'hidden',
          }"
        >
          <template #placeholder>
            <div class="">Loading...</div>
          </template>
        </ElImage>
        <div class="relative z-10">
          <slot></slot>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ElImage } from "element-plus";
import { ref, useSlots, watch } from "vue";
import { useEventListener } from "@vueuse/core";

const props = defineProps<{
  visible: boolean;
  url: string;
}>();
const emit = defineEmits(["update:visible"]);

useEventListener(window, "keydown", (e) => {
  if (e.key === "Escape") {
    emit("update:visible", false);
  }
});
</script>

<style scoped lang="scss">
:deep(#imageDisplay) {
  width: fit-content;
  margin: 0 auto;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>
