<template>
  <div :class="'handle-dialog '+size">
    <transition name="main-dialog">
      <div v-show="show" ref="mainDialog" class="main-dialog">
        <div class="dialog-header">
          <span>{{ title }}</span>
          <div class="icon-close" @click.self="closeDialog">
            <img src="../assets/images/icon-close.svg">
          </div>
        </div>
        <div class="dialog-body">
          <slot />
        </div>
      </div>
    </transition>
    <transition name="dialog-mask">
      <div v-show="show" class="dialog-mask" />
    </transition>
  </div>
</template>

<script>
/**
 * 操作对话框
 * 参数候选项：
 * size：'mid','lg','sm' // 默认大小
 * show.sync : false|true //用于控制对话框显示的布尔值
 * title：//操作框标题
 * @close: // 关闭按钮的事件
 */
export default {
  props: {
    size: {
      type: String,
      default: 'mid'
    },
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    closeDialog() {
      this.$emit('update:show', false)
      this.$emit('close')
    }
  }

}
</script>

<style>
/* 遮罩 */
.handle-dialog>.dialog-mask{position: fixed;left: 0;top:0;height:100vh;width:100vw;background:black;opacity: .3;z-index: 1997;width:100wh;height:100vh}

/* 主对话框 */
.handle-dialog>.main-dialog{
  min-width: 600PX;
  position: fixed;
  /* left: calc(50vw - 300PX); */
  z-index: 1998;
  background:white}
.handle-dialog.mid>.main-dialog{min-height:500PX;top:calc(50vh - 250PX)}
.handle-dialog.sm>.main-dialog{min-height:300PX;top:calc(50vh - 150PX)}
.handle-dialog.lg>.main-dialog{min-height:700PX;top:calc(50vh - 350PX)}

/* 对话框过度：右移+半透 */
.main-dialog-enter-active, .main-dialog-leave-active {transition: all .5s ease;}
.main-dialog-enter, .main-dialog-leave-to{transform:translateX(calc(50vw + 350PX));opacity: 0;}
/* 遮罩过度：半透 */
.dialog-mask-enter-active, .dialog-mask-leave-active {transition: opacity .5s;}
.dialog-mask-enter, .dialog-mask-leave-to{opacity: 0;}

/* 对话框头 */
.main-dialog .dialog-header{background:#e4e4e4;color:#333;height: 50PX;line-height: 50PX;padding-left: 20PX;font-weight: 700;font-weight: 16PX;font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';}
.main-dialog .icon-close{height:50PX;width:50PX;display:inline-block;float: right;text-align: center;cursor: pointer;}
.main-dialog .icon-close:hover{background:#eee}
</style>
