<template>
  <transition name="el-alert-fade">
    <div
      class="el-alert"
      :class="[typeClass, 'is-' + effect]"
      v-show="visible"
      role="alert"
    >
      <i class="el-alert__icon" :class="[ iconClass, isExistDesc ? 'is-big' : ''  ]" v-if="showIcon"></i>
      <div class="el-alert__content" :class="{ 'is-center' : center }">
        <span class="el-alert__title" :class="{ 'is-bold' : isExistDesc }" v-if="title">{{ title }}</span>
        <slot>
          <p class="el-alert__description" v-if="description">{{ description }}</p>
        </slot>
        <div class="el-alert__closebtn" v-show="closable">
          <i :class="[closeText === '' ? 'el-icon-close' : 'is-customed']" @click="close()">{{closeText}}</i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  const TYPE_CLASSES_MAP = {
    success: 'el-icon-success',
    warning: 'el-icon-warning',
    error: 'el-icon-error',
    info: 'el-icon-info'
  };
  export default {
    name: 'ElAlert',

    props: {
      title: {
        type: String,
        default: '',
        required: true
      },
      description: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'info'
      },
      closable: {
        type: Boolean,
        default: true
      },
      closeText: {
        type: String,
        default: ''
      },
      showIcon: Boolean,
      center: Boolean,
      effect: {
        type: String,
        default: 'light',
        validator: function(value) {
          return ['light', 'dark'].indexOf(value) !== -1;
        }
      }
    },

    data() {
      return {
        visible: true
      };
    },

    methods: {
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

    computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },
      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },
      isExistDesc() {
        return this.description || this.$slots.default
      }
    }
  };
</script>
