<template>
  <div>
  <div v-if="visible" ref="comp" :is="component" v-bind="compProps"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({})
export default class Div2 extends Vue {
  visible = false
  component: string | object
  compProps: any
  defer: Defer
  close: Function
  overflowHide(hide: boolean) {
    for (let tag of ['html', 'body']) {
      let ele = document.querySelector('html') as HTMLElement
      ele.style.overflow = hide ? 'hidden' : ''
    }
  }
  show(component, compProps) {
    Object.assign(this, {component, compProps})
    this.overflowHide(true)
    this.close = this.compProps.close = result => {
      this.visible = false
      this.defer.resolve(result)
    }
    this.visible = true
    return new Promise((resolve, reject) => {
      this.defer = {resolve, reject}
    })
  }
}
</script>
