<style>
  .hide {
    display: none
  }
</style>
<template>
  <transition name="expand">
    <div v-show="visible" class="message" :class="[msgBoxClass, classPosition]">
      <div class="message__inner">
        <span v-show="icon" class="message__icon icon" :class="[msgIconClass]"></span>
        <div class="text--small message__text">
          <p>{{content}}</p>
        </div>
        <button v-show="close" @click.stop.prevent="closeMsg($event)" class="message__close"><span
          class="icon-remove"></span></button>
      </div>
    </div>
  </transition>
</template>

<script>
  const CSS_INFO = 'message--info';
  const CSS_SUCCESS = 'message--success';
  const CSS_ALERT = 'message--alert';
  const CSS_ERROR = 'message--error';
  const ICON_INFO = 'icon-notification';
  const ICON_SUCCESS = 'icon-check-grey';
  const ICON_ALERT = 'icon-error-no-bg';
  const ICON_ERROR = 'icon-reject';

  export default {
    name: 'taurus-status-message',
    props: {
      type: {
        type: String,
        default: 'info'
      },
      fType: {
        type: String,
        default: 'info'
      },
      icon: {
        type: Boolean,
        default: true
      },
      close: {
        type: Boolean,
        default: true
      },
      content: {
        type: String,
        default: ''
      },
      position: {
        type: String,
        default: 'bottom'
      },
      fPosition: {
        type: String,
        default: 'bottom'
      },
      plugin: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        classObject: {
          boxClass: CSS_INFO,
          iconClass: ICON_INFO
        },
        visible: false
      };
    },
    computed: {
      msgBoxClass () {
        let classForType = CSS_INFO;
        this.classObject.iconClass = ICON_INFO;
        switch (this.fType) {
          case 'success' :
            classForType = CSS_SUCCESS;
            this.classObject.iconClass = ICON_SUCCESS;
            break;
          case 'alert' :
            classForType = CSS_ALERT;
            this.classObject.iconClass = ICON_ALERT;
            break;
          case 'error' :
            classForType = CSS_ERROR;
            this.classObject.iconClass = ICON_ERROR;
            break;
          default : // 所有不合法的输入按照默认值info来处理
            break;
        }
        return classForType;
      },
      msgIconClass () {
        return this.classObject.iconClass;
      },
      fPosition: function () {
        return (['top', 'bottom'].indexOf(this.position) === -1) ? 'bottom' : this.position;
      },
      classPosition () {
        if (this.plugin === false) return '';
        if (this.fPosition === 'top') {
          return 'topPosition';
        } else {
          return 'bottomPosition';
        }
      },
      fType: function () {
        return (['info', 'success', 'alert', 'error'].indexOf(this.type) === -1) ? 'info' : this.type;
      }
    },

    methods: {
      closeMsg () {
        this.visible = false;
      },
      showMsg () {
        this.visible = true;
      }
    }
  };

</script>

<style>
  .expand-enter-active, .expand-leave-active {
    transition: all .3s ease;
    overflow: hidden;
  }

  /* .expand-enter 定义进入的开始状态 */
  /* .expand-leave-active 定义离开的结束状态 */
  .expand-enter, .expand-leave-active {
    height: 0;
    opacity: 0;
  }

  .topPosition {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .bottomPosition {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
