<template>
  <transition name="fade">
    <div v-show="show" 
         tabindex="-1"
         :class="['mc-dialog',{'is-alert': alert}]"
         @keyup.esc="onEsc"
    >
    <div class="mc-dialog_mask" v-if="mask" @click="backdropClose"></div>
    <transition :name="`${animation}`">
      <div :class="['mc-dialog_content', className]" v-show="show" :style="dialogStyle">
        <div class="mc-dialog_header">
          <slot name="title">
            <span class="mc-dialog_title">{{title}}</span>
          </slot>
          <span class="mc-dialog_close mc-icon-close" v-if="closeButton" @click="close"></span>
        </div>
        <div class="mc-dialog_body">
          <i v-if="alert" :class="'mc-icon-'+type"></i>
          <slot></slot>
        </div>
        <div class="mc-dialog_footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </transition>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 240
    },
    measure: {
      type: String,
      default: 'px'
    },
    animation: {
      type: String,
      default: 'zoom'
    },
    mask: {
      type: Boolean,
      default: true  
    },
    closeButton: {
      type: Boolean,
      default: true
    },
    backClose:{
      type: Boolean,
      default: false
    },
    alert:{
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'success'
    },
    className: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  computed: {
    dialogStyle() {
      return {
        width: `${this.width + this.measure}`,
        height: `${this.height + this.measure}`,
      }
    }
  },
  methods: {
    onEsc() {
      if (this.backClose) {
        this.show && this.$emit('hide');
      }
      if (this.alert) {
        return
      }
    },
    close(){
      this.$emit('hide');
    },
    backdropClose() {
      if (this.backClose) {
        this.close();
      }
      if (this.alert) {
        return
      }
    },
  },
  watch: {
    show(show) {
      show && this.$nextTick(() => {
          this.$el.focus();
        })
    }
  }
}
</script>
