<template>
  <div class="vux-alert">
    <x-dialog
      v-model="show"
      class="weui_dialog_alert"
      :mask-transition="maskTransition"
      :dialog-transition="dialogTransition"
      @on-hide="$emit('on-hide')"
      @on-show="$emit('on-show')"
    >
      <div class="weui_dialog_mes">
        <div class="weui_dialog_hd">
          <strong class="weui_dialog_title">{{ title }}</strong>
        </div>
        <div class="weui_dialog_bd">
          <slot>
            <div>{{ content }}</div>
          </slot>
        </div>
      </div>
      <div class="weui_dialog_ft">
        <a
          class="weui_btn_dialog primary"
          @click="_onHide"
        >{{ buttonText }}</a>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import XDialog from '../x-dialog'

export default {
  components: {
    XDialog
  },
  props: {
    value: Boolean,
    title: String,
    content: String,
    buttonText: {
      type: String,
      default: 'OK'
    },
    maskTransition: {
      type: String,
      default: 'vux-fade'
    },
    dialogTransition: {
      type: String,
      default: 'vux-dialog'
    },
    autoCloseTime: Number
  },
  data() {
    return {
      show: false,
      timeId: ''
    }
  },
  watch: {
    show(val) {
      if (val && this.autoCloseTime > 0) {
        let _autoCloseTime = this.autoCloseTime
        this.timeId = setTimeout(() => {
          this.show = false
        }, _autoCloseTime)
      }
      if (!val && this.timeId) {
        clearTimeout(this.timeId)
        this.timeId = ''
      }
      this.$emit('input', val)
    },
    value(val) {
      this.show = val
    }
  },
  methods: {
    _onHide() {
      this.show = false
    }
  }
}
</script>
