<template>
  <transition name="ipub-fade">
    <div class="ipub-message"
         v-show="isShowMessageBox">
      <div :class="'ipub-message--'+type">
        <template v-if="!icon">
          <ipub-icon class="success-color"
                     v-if="type === 'success'"
                     type="iconAble" />
          <ipub-icon class="key-color"
                     v-else-if="type === 'error'"
                     type="iconDisable" />
          <ipub-icon class="warning-color"
                     v-else-if="type === 'warning'"
                     type="iconDetails" />
        </template>
        <template v-else>
          <ipub-icon class="success-color"
                     v-if="type === 'success'"
                     :type="icon" />
          <ipub-icon class="key-color"
                     v-else-if="type === 'error'"
                     :type="icon" />
          <ipub-icon class="warning-color"
                     v-else-if="type === 'warning'"
                     :type="icon" />
          <ipub-icon v-else
                     class="theme-color"
                     :type="icon" />
        </template>
        <div class="ipub-content">
          <div class="ipub-p1">{{title}}</div>
          <div class="ipub-p2">{{content}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'IpubMessage',
  props: {
    icon: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'theme',
      validator (val) {
        return ['theme', 'success', 'error', 'warning'].indexOf(val) !== -1
      }
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    time: {
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      isShowMessageBox: false,
      resolve: '',
      reject: '',
      promise: '', // 保存promise对象
      timer: ''
    }
  },
  methods: {
    // 弹出messageBox,并创建promise对象
    createMessage () {
      this.isShowMessageBox = true
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
      this.handelAutoClose()
      return this.promise;
    },
    destroy () {
      this.$destroy()
      document.body.removeChild(this.$el)
    },
    remove () {
      setTimeout(() => {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.destroy()
      }, 100);
    },
    handelAutoClose () {
      this.timer = setTimeout(() => {
        this.isShowMessageBox = false
        this.resolve('success')
        this.remove()
      }, this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-message {
  position: fixed;
  top: 120px;
  left: calc(50% - 250px);
  background: $content_color;
  z-index: 9999;
  .ipub-icon {
    font-size: 50px;
    margin-right: 16px;
  }
  &--theme,
  &--success,
  &--error,
  &--warning {
    display: flex;
    align-items: center;
    width: 500px;
    padding: 10px 20px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  &--theme {
    border: 2px solid $theme_color;
    background: $theme_opcity_color;
  }
  &--success {
    border: 2px solid $success_color;
    background: $success_color_bg;
  }
  &--error {
    border: 2px solid $key_color;
    background: $key_color_bg;
  }
  &--warning {
    border: 2px solid $warning_color;
    background: $warning_color_bg;
  }
}
</style>
