<template>
  <div class="sk-toast">
    <slot></slot>
    <div class="line"></div>
    <span class="close" v-if="closeButton" @click="onClickClose">
      {{closeButton.text}}
    </span>
  </div>
</template>

<script>
export default {
  name: "SKToast",
  props: {
    autoClose: {
      type: Boolean,
      default: true
    },
    autoCloseDelay: {
      type: Number,
      default: 20000
    },
    closeButton: {
      type: Object,
      default: () => ({
        'text': '关闭',
        'callback': undefined
      })
    }
  },
  mounted() {
    if (this.autoClose) {
      setTimeout(() => {
        this.close()
      }, this.autoCloseDelay * 1000)
    }
  },
  beforeDestroy() {
  },
  methods: {
    onClickClose() {
      this.close()
      this.closeButton && (typeof this.closeButton.callback === 'function') && this.closeButton.callback()
    },
    close() {
      this.$el.remove()
      this.$destroy()
    }
  }
}
</script>

<style lang="scss" scoped>
  $font-size: 14px;
  $toast-height: 40px;
  $toast-color: white;
  $toast-bg: #01cf97;
  .sk-toast {
    font-size: $font-size;
    height: $toast-height;
    position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 500px;
    display: flex; align-items: center; justify-content: center;
    background-color: $toast-bg; color: $toast-color; font-family: inherit;

    .line {
      height: 100%;
      border-left: 1px solid white;
      margin-left: 16px;
    }

    .close {
      padding-left: 16px;
    }
  }
</style>