<template>
  <div>
    <x-dialog
      v-model="show"
      class="weui_dialog_confirm"
      :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>
      </div>
      <div class="weui_dialog_ft">
        <a
          href="javascript:;"
          class="weui_btn_dialog default"
          @click="onCancel"
        >{{ cancelText }}</a>
        <a
          href="javascript:;"
          class="weui_btn_dialog primary"
          @click="onConfirm"
        >{{ confirmText }}</a>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import XDialog from '../x-dialog'

export default {
  components: {
    XDialog
  },
  props: {
    value: {
      type: Boolean,
      defalut: false
    },
    title: {
      type: String,
      required: true
    },
    confirmText: {
      type: String,
      default: 'confirm'
    },
    cancelText: {
      type: String,
      default: 'cancel'
    },
    maskTransition: {
      type: String,
      default: 'vux-fade'
    },
    dialogTransition: {
      type: String,
      default: 'vux-dialog'
    }
  },
  data () {
    return {
      show: false
    }
  },
  watch: {
    show (val) {
      this.$emit('input', val)
    },
    value (val) {
      if (this.show !== val) {
        this.show = val
      }
    }
  },
  mounted () {
    this.show = this.value
  },
  methods: {
    onConfirm () {
      this.show = false
      this.$emit('on-confirm')
    },
    onCancel () {
      this.show = false
      this.$emit('on-cancel')
    }
  }
}
</script>
