<template>
  <transition name="el-alert-fade">
    <div
      class="el-alert"
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect,isBigIcon, { 'is-signle': alertContentHeight <= 21 }]"
      v-show="visible"
      role="alert"
    >
      <!-- :style="title || $slots.title ? 'padding: 16px' : ''" -->
      <i class="el-alert__icon" :class="[ iconClass, isBigIcon, title  || $slots.title ? 'has-title' : '' ]" v-if="showIcon"></i>
      <div class="el-alert__content" ref="alert_content">
        <p class="el-alert__title" :class="[ isBoldTitle ]" v-if="title  || $slots.title">
          <slot name="title">{{ title }}</slot>
        </p>
        <p
          v-resize="divResize"
          :style="{'height': showMore && showCollapse && isCollapse ? '44px' : 'initial'}"
          :class="{'has-title__description': !(title  || $slots.title) }"
          class="el-alert__description"
          v-if="$slots.default && !description"
        >
          <!-- 内容默认插槽 -->
          <span class="alert__content">
            <slot></slot>
          </span>
          <!-- 操作插槽 -->
          <span class="el-alert__action" v-if="$slots.action">
            <slot name="action"></slot>
          </span>
        </p>
        <p
          v-resize="divResize"
          :style="{'height': showMore && showCollapse && isCollapse ? '44px' : 'initial'}"
          :class="{'has-title__description': (!(title  || $slots.title) && closable) }"
          class="el-alert__description"
          v-if="description && !$slots.default"
        >
          <span>{{ description }}</span>
          <!-- 操作插槽 -->
          <span class="el-alert__action" v-if="$slots.action">
            <slot name="action"></slot>
          </span>
        </p>
        <!-- 展开、收起操作按钮 -->
        <p class="el-alert__operate-btn" v-if="showMore && showCollapse" @click="isCollapse = !isCollapse">{{ isCollapse ? '展开更多' : '收起'}}</p>
        <!-- 关闭按钮 -->
        <i
          class="el-alert__closebtn"
          :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === ''}"
          v-show="closable"
          @click="close()"
        >{{closeText}}</i>
      </div>
    </div>
  </transition>
</template>

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

    props: {
      title: {
        type: String,
        default: ''
      },
      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;
        }
      },
      showMore: {
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        visible: true,
        isCollapse: true,
        showCollapse: false,
        el: null
      };
    },
    directives: {
      // 获取当前元素的高度
      resize: {
        bind(el, binding) {
          let height = ''
          function isResize() {
            const style = document.defaultView.getComputedStyle(el)
            if (height !== style.height) {
              binding.value({height: style.height})
            }
            height = style.height
          }
          el.__vueSetInterval__ = setInterval(isResize, 100)
        },
        unbind(el) {
          clearInterval(el.__vueSetInterval__)
        }
      }
    },

    mounted() {
      this.$nextTick(() => {
        this.el = this.$refs['alert_content']
      })
    },

    methods: {
      divResize(data) {
        // 如果有相关操作的插槽即不显示展开更多的操作
        if (data.height.replace('px', '') > 44 && this.$slots.action === undefined) {
          this.showCollapse = true
        }
      },
      close() {
        this.visible = false;
        this.$emit('close');
      }
    },

    computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },

      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },

      isBigIcon() {
        return this.description || this.$slots.default ? 'is-big' : '';
      },

      isBoldTitle() {
        return this.description || this.$slots.default ? 'is-bold' : '';
      },

      // 单行文本设计师要高度要显示为40px！！！
      alertContentHeight() {
        return (this.el || {}).clientHeight
      }
    }
  };
</script>
