<template>
  <div :style="{height: fullscreen ? fullHeight : warpHeight }" class="ed-dialog--wrapper">
    <slot></slot>
  </div>
</template>

<script>
import {getVarType} from "../../../../tools/utils";

export default {
  name: "DialogWrapper",
  props: {
    //
    height: {
      type: [String, Number]
    },

    // 是否为全屏 Dialog
    fullscreen: {
      type: Boolean,
      default: false
    },
    showFooter: {type: Boolean, default: true},
    footerHeight: {type: [String, Number], default: 60,},
  },
  computed: {
    warpHeight() {
      if (!this.height) {
        return this.showFooter ? '55vh' : '65vh'
      }
      return getVarType(this.height) === 'number' ? this.height + 'px' : this.height
    },
    fullHeight() {
      let innerHeight = window.innerHeight;

      if (this.showFooter) {
        let height = getVarType(this.footerHeight) === 'number' ? this.footerHeight : this.footerHeight.slice(0, -2)
        return `${innerHeight - 57 - height - 30}px`
      }

      return `${innerHeight - 57 - 30}px`
    },
  },

}
</script>
<style lang="scss" scoped>
.ed-dialog--wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
}
</style>
