<template>
  <!--<transition :name="transition">-->
  <div v-show="showModal" :class="active" class="modal-backdrop" @touchstart="hideModal">
    <div class="modal-backdrop-bg"/>
    <div
      :class="[modalClass,cusClass]"
      class="modal slide-in-up"
      @touchstart="start"
      @mousedown="start">
      <slot/>
    </div>
  </div>
  <!--</transition>-->
</template>
<script>
export default {
  name: 'Modal',
  props: {
    value: Boolean, // eslint-disable-line
    position: {
      type: String,
      default: 'bottom',
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      showModal: false,
      state: 0,
    }
  },
  computed: {
    transition () {
      return this.position === 'bottom' ? 'slide-in-up' : 'slide-in-down'
    },
    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)
      }, 50)
    },
    showModal (val) {
      // 标签用法时需要发射一个input事件，修改v-model绑定的属性值
      this.$emit('input', val)
    },
  },
  methods: {
    preventDefault (e) {
      // e.stopPropagation();

    },
    start (e) {
      e.stopPropagation()
    },
    hideModal () {
      this.state = 3
      setTimeout(() => {
        this.state = 0
        this.showModal = false
      }, 250)
    },
  },
}
</script>

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