<template>
  <div class="s-notice">
    <div
      class="s-notice__content"
      :class="[type, show && 'show', simpleMode && 'simple']"
    >
      <div
        class="s-notice__close"
        @click="close"
        v-if="!simpleMode || !duration"
      >
        <Icon icon="close" :size="12" />
      </div>
      <div class="s-notice__body">
        <div class="s-notice__icon" v-if="type">
          <Icon :icon="typeMap[type]" />
        </div>
        <div class="s-notice__info">
          <h5 class="s-notice__title" v-if="title">{{ title }}</h5>
          <p class="s-notice__text" v-html="text" v-if="text"></p>
          <div class="s-notice__action">
            <span @click="handleClick">{{ btnTxt }}</span>
            <!-- <a href="javascript:;" :key="index" v-for="(item, index) in btns" @click="item.handler">{{item.name}}</a> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '../../icon';
export default {
  name: 's-notice',
  components: { Icon },
  props: {
    type: {
      type: String,
      default: 'info',
    },
    title: {
      type: String,
    },
    text: {
      type: String,
    },
    btnTxt: {
      type: String,
    },
    duration: {
      type: Number,
      default: 6,
    },
  },
  data() {
    return {
      show: false,
      typeMap: {
        info: 'solid-notice',
        success: 'solid-success',
        error: 'solid-close',
        warning: 'solid-notice',
      },
      timer: null,
    };
  },
  computed: {
    simpleMode() {
      return !this.text && !this.btnTxt;
    },
  },
  methods: {
    open() {
      setTimeout(() => {
        this.show = true;
      }, 30);
      this.duration &&
        (this.timer = setTimeout(() => this.close(), this.duration * 1000));
    },
    close() {
      this.show = false;
      this.timer = setTimeout(() => {
        this.$emit('close');
        this.$el.remove();
      }, 300);
    },
    handleClick(e) {
      typeof this.handler === 'function' && this.handler();
      this.$emit('btnClick', e);
      this.close();
    },
  },
};
</script>
