<template>
  <!--<transition :name="transition">-->
  <div v-show="showModal" :class="active" class="modal-backdrop" @click.capture="hideModal">
    <div class="modal-backdrop-bg"/>
    <div
      :class="[modalClass,transition]"
      class="modal"
      @touchstart="start"
      @mousedown="start">
      <slot/>
    </div>
  </div>
  <!--</transition>-->
</template>
<script>
export default {
  name: 'Modal',
  props: {
      value: Boolean, // eslint-disable-line
    position: {
      type: String,
      default: 'top',
    },
    cusClass: {
      type: String,
      default: '',
    },
    onClose: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      showModal: false,
      state: 0,
    }
  },
  computed: {
    transition () {
      return {
        'slide-in-up': this.position === 'top',
        'slide-in-down': this.position === 'bottom',
        'slide-in-left': this.position === 'left',
        'slide-in-right': this.position === 'right',
      }
    },
    active () {
      return this.showModal ? 'active' : 'hide'
    },
    modalClass () {
      let mclass
      if (this.state === 1) {
        mclass = 'active'
      } else if (this.state === 2) {
        mclass = 'ng-enter ng-enter-active active'
      } else if (this.state === 3) {
        mclass = 'ng-leave ng-leave-active'
      }
      return mclass
    },
  },
  watch: {
    value (val) {
      this.showModal = val
      this.state = 1
      setTimeout(() => {
        this.state = 2
        setTimeout(() => {
        }, 400)
      }, 100)
    },
    showModal (val) {
      // 标签用法时需要发射一个input事件，修改v-model绑定的属性值
      this.$emit('input', val)
    },
  },
  methods: {
    preventDefault (e) {
      // e.stopPropagation();

    },
    start (e) {
      if (this.onClose) {
        this.hideModal(null)
      }
    },
    hideModal (e) {
      if (!e) {
        this.state = 3
        setTimeout(() => {
          this.state = 0
          this.showModal = false
        }, 250)
      }
      if (e && e.target && e.target.className.indexOf('modal-backdrop') === 0) {
        this.state = 3
        setTimeout(() => {
          this.state = 0
          this.showModal = false
        }, 250)
      }
    },
  },
}
</script>

<style scoped lang="less">
</style>
