<template>
  <transition name="msgbox-fade" @after-leave="handleAfterLeave">
      <div
          :class="[
              'message_wrapper',
              { success: type === 'success' },
              { warning: type === 'warning' },
              { error: type === 'error' },
              { info: type === 'info' },
          ]"
          v-show="visible"
          :style="{ top: styleTop + 'px' }"
      >
          <i :class="[
              'iconMessageNew',
              { success: type === 'success' },
              { warning: type === 'warning' },
              { error: type === 'error' },
              { info: type === 'info' },
          ]"></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;
  min-width: 185px;
  left: 50%;
  z-index: 99999;
  color: #fff;
  padding: 10px 15px;
  height:20px;line-height:20px;
  font-size: 14px;
  top: 20px;
  transform: translateX(-50%);
  background: #fff;
  color: #1f2022;
}
.message_wrapper.success{
    background: #F0F9EB;
    border-radius: 4px;
    border: 1px solid #D1EDC4;
    font-size: 14px;
    color: #67C23A;
    line-height: 22px;
    text-align: left;
  }
.message_wrapper.warning{
    background: #FCF6EC;
    border-radius: 4px;
    border: 1px solid #F8E3C5;
    font-size: 14px;
    color: #E6A23C;
    line-height: 22px;
    text-align: left;
  }
.message_wrapper.error{
    background: #FEF0F0;
    border-radius: 4px;
    border: 1px solid #FCD3D3;
    font-size: 14px;
    color: #F56C6C;
    line-height: 22px;
    text-align: left;
  }
.message_wrapper.info{
    background: #EDF4FF;
    border-radius: 4px;
    border: 1px solid #C7DBFF;
    font-size: 14px;
    color: #5291FF;
    line-height: 22px;
    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.warning{
  background:url('../assets/icon9.png') no-repeat 0 0/100%;
}
.iconMessageNew.error{
  background:url('../assets/icon8.png') no-repeat 0 0/100%;
}
.iconMessageNew.info{
  background:url('../assets/icon10.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>
