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

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

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

watch(
  () => [props.visible, props.url],
  () => {
    scale.value = 1;
  }
);

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

useEventListener(document, "wheel", (e) => {
  if (e.deltaY > 0) {
    if (scale.value < 0.2) return;
    scale.value /= 1.1;
  } else {
    if (scale.value > 7) return;
    scale.value *= 1.1;
  }
});
</script>

<style scoped lang="scss">
.close {
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>
