<template>
  <transition name="msgbox-fade" @after-leave="handleAfterLeave">
      <div
          :class="[
              'message_wrapper',
              { success: type === 'success' },
              { error: type === 'error' }
          ]"
          v-show="visible"
          :style="{ top: styleTop + 'px' }"
      >
          <i :class="[
              'iconMessageNew',
              { success: type === 'success' },
              { error: type === 'error' }
          ]"></i> {{ message }}
      </div>
  </transition>
</template>

<script>
export default {
  name: 'message_compents',
  data () {
    return {
      // 提示消息文本
      message: '',
      // 类型
      type: '',
      // 显示/隐藏
      visible: false,
      // 定位高度
      styleTop: 20
    }
  },
  methods: {
    /**
       * @description: message显示
       */
    messageShow () {
      this.visible = true
    },
    /**
       * @description: message隐藏
       */
    messageHide () {
      this.visible = false
    },
    /**
       * @description: 销毁组件
       */
    handleAfterLeave () {
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    }
  }
}
</script>
<style scoped>
.message_wrapper {
  position: fixed;
  left: 50%;
  z-index: 99999;
  color: #fff;
  font-size: 14px;
  top: 20px;
  transform: translateX(-50%);
  background: #fff;
  min-width: 140px;
  padding:15px;
  height: 24px;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);
  border-radius: 2px;
}
.message_wrapper.success{
    border-radius: 4px;
    border-bottom: 2px solid #67C23A;
    font-weight:bold;
    font-size: 14px;
    color: #67C23A;
    line-height: 24px;
    text-align: left;
  }
.message_wrapper.error{
    background: #fff;
    border-radius: 4px;
    border-bottom: 2px solid #F56C6C;
    font-size: 14px;
    font-weight:bold;
    color: #F56C6C;
    line-height: 24px;
    text-align: left;
  }
.iconMessageNew{
  width:16px;height:16px;display:block;float:left;margin-right:8px;position:relative;top:3px;
}
.iconMessageNew.success{
    background:url('../assets/icon7.png') no-repeat 0 0/100%;
  }
.iconMessageNew.error{
    background:url('../assets/icon8.png') no-repeat 0 0/100%;
  }
.msgbox-fade-enter-active {
  -webkit-animation: msgbox-fade-in 0.3s;
  animation: msgbox-fade-in 0.3s;
}
.msgbox-fade-leave-active {
  -webkit-animation: msgbox-fade-out 0.3s;
  animation: msgbox-fade-out 0.3s;
}
@keyframes msgbox-fade-in {
  0% {
      transform: translate3d(-50%, -20px, 0);
      opacity: 0;
  }
  100% {
      transform: translate3d(-50%, 0, 0);
      opacity: 1;
  }
}
@keyframes msgbox-fade-out {
  0% {
      transform: translate3d(-50%, 0, 0);
      opacity: 1;
  }
  100% {
      transform: translate3d(-50%, -20px, 0);
      opacity: 0;
  }
}
</style>
