<template>
  <div class="vux-toast">
    <div
      v-show="show"
      class="weui_mask_transparent"
    />
    <div
      v-show="show"
      class="weui_toast"
      :style="{width: width}"
      :class="toastClass"
      :transition="transition"
    >
      <i
        v-show="type !== 'text'"
        class="weui_icon_toast"
      />
      <p
        v-if="text"
        class="weui_toast_content"
      >
        {{ text }}
      </p>
      <p
        v-else
        class="weui_toast_content"
      >
        <slot />
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: { // 是否展示
      type: Boolean,
      default: false
    },
    time: { // 持续时间
      type: Number,
      default: 2000
    },
    type: { // 是否成功打开
      type: String,
      default: 'success'
    },
    transition: { // 展示动画
      type: String,
      default: 'vux-fade'
    },
    width: { // toast 的宽度
      type: String,
      default: '100/@w'
    },
    text: String
  },
  data () {
    return {
      show: false
    }
  },
  computed: {
    toastClass () {
      return {
        'weui_toast_forbidden': this.type === 'warn',
        'weui_toast_cancel': this.type === 'cancel',
        'weui_toast_success': this.type === 'success',
        'weui_toast_text': this.type === 'text'
      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('on-show')
        this.$emit('input', true)
      }
      if (val) {
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          this.show = false
          this.$emit('input', false)
          this.$emit('on-hide')
        }, this.time)
      }
    },
    value (val) {
      this.show = val
    }
  },
  created () {
    if (this.value) {
      this.show = true
    }
  }
}
</script>
