<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);
let _showFooter = ref(false);
const width_rem = ref<any>();
const height_rem = ref<any>();
const {
  width,
  height,
  isShow,
  title,
  close,
  showFooter
} = defineProps(['width', 'height', 'isShow', 'title', 'close', 'showFooter']);

_isShow.value = isShow == null ? false : isShow;
_showFooter.value = showFooter == null ? false : showFooter;
_width.value = width == null ? 1200 : Number(width);
_height.value = height == null ? 800 : Number(height);
_close.value = close == null ? true : close;

watch(() => isShow, (newVal) => {
  _isShow.value = newVal == null ? false : newVal;
});
const emit = defineEmits(['close']);
const closeBtn = () => {
  emit('close', false);
};
watch(
    () => height,
    (newVal) => {
      _height.value = newVal == null ? 800 : Number(newVal);
      height_rem.value = (_height.value / 16).toFixed(2);
    }, {deep: true}
);
width_rem.value = (_width.value / 16).toFixed(2);
height_rem.value = (_height.value / 16).toFixed(2);

</script>
<template>
  <teleport to="body">
    <transition name="el-fade-in">
      <div class="mask" v-if="_isShow">
        <div class="mask-wrapper" :style="{ width: width_rem + 'rem', height: height_rem + 'rem' }" v-if="_isShow">
          <div class="header">
            <div class="title">{{ title }}</div>
            <div class="close" @click="closeBtn" v-if="_close">
              <el-icon class="close-icon">
                <CloseBold/>
              </el-icon>
            </div>
          </div>
          <div class="content">
            <slot></slot>
          </div>
          <div class="footer" v-if="_showFooter">
            <slot name="footer"></slot>
          </div>
        </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 {
    background-color: #FFF;
    border-radius: 6px;
    overflow: hidden;
    max-height: 90vh;
    z-index: 1999;
    display: flex;
    flex-direction: column;

    .header {
      height: 72px;
      display: flex;
      justify-content: space-between;
      padding: 0 24px;
      border-bottom: 1px solid #EAEAEC;
      align-items: center;

      .title {
        font-weight: 800;
        font-size: 20px;
        color: #333333;
        font-style: normal;
      }

      .close {
        width: 32px;
        height: 32px;
        background: #EBECED;
        border-radius: 16px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;

        .close-icon {
          color: #6e6e6e;
          font-size: 12px;
        }

        &:hover {
          color: #409eff;
        }
      }
    }

    .content {
      flex: 1;
      min-height: 0;
    }

    .footer {
      height: 86px;
      background: #FFFFFF;
      border-top: 1px solid #EAEAEC;
      border-radius: 0 0 8px 8px;
    }
  }
}
</style>
