<script setup lang="ts">
import { ref, watch } from "vue";

let _width = ref(0);
let _height = ref(0);
let _isShow = ref(false);
const { width, height, isShow } = defineProps(['width', 'height', 'isShow']);

_isShow.value = isShow == null ? false : isShow;
_width.value = width == null ? 1200 : width;
_height.value = height == null ? 800 : height;

watch(() => isShow, (newVal) => {
  _isShow.value = newVal == null ? false : newVal;
});
</script>

<template>
  <transition name="el-fade-in">
    <div class="mask" v-if="_isShow">
        <div class="mask-content-wrapper" :style="{ width: _width + 'px', height: _height + 'px' }" v-if="_isShow">
          <el-scrollbar height="100%">
            <slot></slot>
          </el-scrollbar>
        </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.mask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask-content-wrapper {
    position: relative;
    background-color: #FFF;
    border-radius: 6px;
    padding: 20px;
    overflow: hidden;
    max-height: 90vh;
    z-index: 1999;
  }
}
</style>
