<template lang="html">
  <div v-transfer-dom>
    <confirm v-model="show"
      :title="title"
      :confirm-text="right_text"
      :cancel-text="left_text"
      :close-on-confirm="close_confirm"
      ref="confirm"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
      @on-show="onShow"
      @on-hide="onHide">
        <slot></slot>
      </confirm>
  </div>
</template>

<script>
import { TransferDomDirective as TransferDom, Confirm } from 'vux'

export default {
  components: { Confirm },
  directives: { TransferDom },
  props: {
    title: {
      required: true
    },
    value: {
      required: true
    },
    left_text: {
      required: true
    },
    right_text: {
      required: true
    },
    close_confirm: {
      default: false
    }
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (val) {}
    }
  },
  methods: {
    onCancel () {
      this.$emit('on-cancel');
    },
    onConfirm (msg) {
      this.$emit('on-confirm', msg);
    },
    onHide () {
      this.$emit('on-hide');
    },
    onShow () {
      this.$emit('on-show');
    }
  }
}
</script>

<style lang="less">
  .weui-dialog__btn.weui-dialog__btn_primary {
    color: #353535;
  }
  .weui-dialog__hd {
    background-color: #8ea9cf;
    color: #FFFFFF;
    padding: 0.5em 1.6em 0.5em;
  }
</style>