<template>
  <transition name="hive-alert--fade">
    <div :class="_class" v-if="show">
      <Icon :icon=" icon ? icon : iconType" v-if="showIcon"></Icon>
      <div :class="_messageClass">{{ message }}</div>

      <Icon icon="clear" v-if="closeable && !closeText && !closeIcon" :class="_closeableIcon" @click="onClick"></Icon>
      <div :class="_closeableText" v-if="closeText && !closeIcon" @click="onClick">{{ closeText }}</div>
      <Icon :icon="closeIcon" v-if="closeIcon" :class="_closeableIcon" @click="onClick"></Icon>

      <div :class="_descriptionClass" v-if="description">{{ description }}</div>
    </div>
  </transition>
</template>

<script>
  import Icon from '../icon';

  const name = 'hive-alert';
  export default {
    name,
    components: {
      Icon,
    },
    props: {
      /**
       * 警告提示样式类型
       * @member info | success | error | warn | disabled
       */
      type: {
        validator: function(type) {
          return ['info', 'success', 'error', 'warn', 'disabled'].indexOf(type) !== -1;
        },
        default: 'info',
      },
      /**
       * 是否展示辅助图标
       */
      showIcon: {
        type: Boolean,
        default: true,
      },
      /**
       * 是否可关闭
       */
      closeable: {
        type: Boolean,
        default: false,
      },
      /**
       * 自定义关闭文字 第二优先
       */
      closeText: String,
      /**
       * 自定义关闭按钮 最优先
       */
      closeIcon: String,
      /**
       * 警告提示内容
       */
      message: String,
      /**
       * 自定义辅助图标
       */
      icon: String,
      /**
       * 警告提示的辅助文字
       */
      description: String,
      /**
       * 回调函数
       */
      onClose: Function,
    },
    data() {
      return {
        show: true,
      };
    },
    computed: {
      _class() {
        return [
          name,
          {
            [`${name}--${this.type}`]: this.type,
            [`${name}--hasclose`]: this.closeable,
          },
        ];
      },
      _messageClass() {
        return [
          `${name}__message`,
        ];
      },
      _descriptionClass() {
        return [
          `${name}__description`,
          {
            [`${name}__description--noicon`]: !this.showIcon,
          },
        ];
      },
      _closeableIcon() {
        return [
          `${name}__closeable__icon`,
        ];
      },
      _closeableText() {
        return [
          `${name}__closeable__content`,
        ];
      },

      iconType() {
        let icon;
        if (this.type === 'info') {
          icon = 'circle_error';
        } else if (this.type === 'success') {
          icon = 'circle_tick';
        } else if (this.type === 'error') {
          icon = 'circle_clear';
        } else if (this.type === 'warn') {
          icon = 'circle_error';
        } else {
          icon = 'circle_info';
        }
        return icon;
      },
    },
    methods: {
      onClick(event) {
        this.show = false;
        this.$emit('onClose', event);
      },
    },
  };
</script>
