<template lang="html">
  <div v-transfer-dom>
    <alert v-model="show"
      :title="title"
      :button-text="button_text"
      @on-show="onShow"
      @on-hide="onHide">
        <slot></slot>
      </alert>
  </div>
</template>

<script>
import { TransferDom, Alert } from 'vux'

export default {
  components: { Alert },
  directives: { TransferDom },
  props: ['title', 'value', 'button_text'],
  data () {
    return {
    }
  },
  mounted () {
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (val) {}
    }
  },
  methods: {
    onHide () {
      this.$emit('on-hide');
    },
    onShow () {
      this.$emit('on-show');
    }
  }
}
</script>

<style lang="less">
  .weui-dialog {
    width: 90%;
    max-width: 50rem;
  }
  .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>