<script setup lang="ts">
import {ref, watch, defineEmits} from "vue";
import {CloseBold} from '@element-plus/icons-vue'

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

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

console.log(_width, _height, _isShow);

watch(() => isShow, (newVal) => {
  _isShow.value = newVal == null ? false : newVal;
});
const emit = defineEmits(['close']);
const closeBtn = () => {
  emit('close', false);
};
</script>

<template>
  <teleport to="body">
    <transition name="el-fade-in">
      <div class="mask" v-if="_isShow">
        <div class="mask-wrapper" :style="{ width: _width + 'px', height: _height + 'px' }" v-if="_isShow">
          <el-scrollbar height="100%">
            <div class="header">
              <div class="title">{{ title }}</div>
              <div class="close" @click="closeBtn" v-if="_close">
                <el-icon>
                  <CloseBold/>
                </el-icon>
              </div>
            </div>
            <slot></slot>
          </el-scrollbar>
        </div>
      </div>
    </transition>
  </teleport>
</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-wrapper {
    position: relative;
    background-color: #FFF;
    border-radius: 6px;
    padding: 0 20px 20px 20px;
    overflow: hidden;
    max-height: 90vh;
    z-index: 1999;

    .header {
      position: relative;
      height: 72px;
      padding: 0 4px;
      border-bottom: 1px solid #EAEAEC;

      .title {
        position: absolute;
        top: 50%;
        left: 0;
        font-weight: 800;
        font-size: 20px;
        color: #333333;
        font-style: normal;
        transform: translateY(-50%);
      }

      .close {
        position: absolute;
        top: 50%;
        right: 0;
        color: #6e6e6e;
        font-size: 32px;
        transform: translateY(-50%);

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
