<template>
  <div>
    <div v-if="showMask" :class="maskClasses"></div>
    <transition name="vc-fade">
      <div v-show="visible" :class="classes">
        <slot></slot>
        <h1>{{visible}}</h1>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    prefixCls: {
      default: 'vc-dialog',
      type: String,
    },
    visible: {
      default: false,
      type: Boolean,
    },
    showMask: {
      default: false,
      type: Boolean,
    },
  },
  data () {
    return {
    }
  },
  computed: {
    maskClasses () {
      const { prefixCls } = this
      return [
        {
          [`${prefixCls}-mask`]: true,
        },
      ]
    },
    classes () {
      const { prefixCls } = this
      return [
        {
          [`${prefixCls}-wrap`]: true,
        },
      ]
    },
  },
  created () {

  },
  mounted () {
    document.body.appendChild(this.$el)
  },
}
</script>