<template>
  <transition name="modal-fade">
    <div v-if="visible" class="modal" tabindex="-1" role="dialog" style="display: block;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ title }}</h5>
            <button type="button" class="btn-close" @click="cancel"></button>
          </div>
          <div class="modal-body">{{ message }}</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="cancel">关闭</button>
            <button type="button" class="btn btn-primary" @click="commit">{{ btnTxt }}</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>


<script>


export default {

    name:'Confirm',
    props: {
    title: {
        type:String
    },
    message:{
        type:String
    },
    btnTxt: {
        type:String,
        default:'确认'
    }
  },
    data(){
        return {
            visible: false,
            resolve: null
        }
    },
    methods: {
        open(){
            this.visible = true
            return new Promise((resolve) => {
                this.resolve = resolve
            })
        },
        commit()
        {
            this.visible = false
            this.resolve && this.resolve(true)
        },
        cancel(){
            this.visible = false
            this.resolve && this.resolve(false)
        }
    }
}
</script>

<style scoped>
.modal {
  background: rgba(0, 0, 0, 0.5);;
}

/* 进入前 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity 0.3s ease;
}
.modal-fade-enter, .modal-fade-leave-to {
  opacity: 0;
}

</style>