<template>
  <img
    @click="
      () => {
        preImageVisible = true;
      }
    "
    :src="src"
    class="w-full h-full"
  />
  <div
    v-show="preImageVisible"
    class="w100vw top0 left0 h100vh z-20 flex justify-center items-center fixed mask-bg-black"
  >
    <div class="bg-white pt30 pr110 pl110 relative round5 overflow-hidden">
      <img
        @click="
          () => {
            preImageVisible = false;
          }
        "
        class="w53 h53 absolute right30"
        :src="yellow_close"
      />
      <img :src="src" />
      <div class="w-full h222 flex text-center items-center justify-center content-center flex-wrap">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import yellow_close from "@/assets/img/markLine/yellow_close.png";
export default defineComponent({
  setup() {
    return {
      yellow_close,
    };
  },
  data() {
    return {
      preImageVisible: false,
    };
  },
  props: {
    src: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 100,
    },
  },
});
</script>

<style scoped>
.mask-bg-black {
  background: rgba(0, 0, 0, 0.45);
}
.opacity3 {
  opacity: 0.3;
}
.h100vh {
  height: 100vh;
}
.w100vw {
  width: 100vw;
}
</style>