<template>
    <div class="md-modal" v-if="mdShow">
      <transition name="bounce">
        <div class="modal-inner">
            <div class="modal-content">
                <!-- <div class="modal-message">{{question}}</div> -->
                <slot></slot>
            </div>
            <div class="mgt15 fxrow">
              <button class="fxcol btn btn-disabled submit-button" @click="closeModal">取消</button>
              <button class="btn btn-disabled submit-button bl1px" v-if="comfirmDisable">确认</button>
              <button class="btn submit-button" v-if="!comfirmDisable" @click="comfirm">确认</button>
            </div>
        </div>
      </transition>
      <transition name="fade">
        <div class="overlay"></div>
      </transition>
    </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    // question: String,
    mdShow: Boolean,
    comfirmDisable: Boolean,
    type: String
  },
  methods: {
    closeModal () {
      this.$emit('closeModalCallback')
    },
    comfirm () {
      this.$emit('comfirmCallback', this.type)
    }
  }
}
</script>

<style lang="stylus" scoped>
.modal-inner
  position fixed
  top 50%
  left 50%
  width 80%
  font-size .28rem
  overflow hidden
  transition .3s
  border-radius 4px
  background-color #fff
  transform translate3d(-50%, -50%, 0)
  z-index 2018
.overlay
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, .7)
  z-index 11
>>>.btn
  border-radius 0
>>>.submit-button
  margin 0
.bl1px
  border-left 1px solid #fff
</style>
