<template>
  <transition :name="transitionName" @enter="enter" @leave="leave">
    <div :class="classes" v-if="noticeType=='message'">
      <div class="k-message-notice-content">
        <i :class="icon"></i>
        <span v-html="content"></span>
        <a class="k-message-close" v-if="closable" @click="close"></a>
      </div>
    </div>
    <div :class="classes" v-else>
      <div class="k-notice-notice-content">
        <!-- <i :class="icon" v-if="type"></i> -->
        <div class="k-notice-title">{{title}}</div>
        <div class="k-notice-desc" v-html="content"></div>
        <a class="k-notice-close" @click="close"></a>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    type: { type: String, default: "info" },
    title: String,
    content: String,
    name: String,
    closable: { type: Boolean, default: false },
    transitionName: { type: String, default: "fadedown" },
    noticeType: { type: String, default: "message" },
    close: Function
  },
  data() {
    return {
      closeTimer: null
    };
  },
  computed: {
    icon() {
      let icons = {
        info: "icon-info_normal",
        error: "icon-info_danger",
        success: "icon-info_success",
        warning: "icon-info_warn"
      };
      return `${icons[this.type]}`;
    },
    classes() {
      return [
        `k-${this.noticeType}-notice`,
        {
          [`k-${this.noticeType}-${this.type}`]: this.type
        }
      ];
    }
  },
  methods: {
    enter(e) {
      //e.style.height = e.scrollHeight - 15 + "px";
    },
    leave(e) {
      e.style.height = 0;
      e.style.paddingTop = 0;
      e.style.paddingBottom = 0;
    }
  }
};
</script>
