<template>
  <transition name="n-slide-down" @before-enter="beforeEnter" @before-leave="beforeLeave"
              @after-enter="after" @after-leave="after">
    <div class="n-slide-down" v-show="value">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
import {addBodyClass, prop, removeBodyClass} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-slide-down',
  props: {
    // 显示状态（可以使用v-model双向绑定数据）
    value: prop.boolean()
  },
  methods: {
    beforeEnter (el) {
      addBodyClass('no-select')
      el.style.display = 'block'
      this.setHeight(el)
      el.style.display = ''
    },
    beforeLeave (el) {
      addBodyClass('no-select')
      this.setHeight(el)
    },
    setHeight (el) {
      el.style.height = el.getBoundingClientRect().height + 'px'
    },
    after (el) {
      removeBodyClass('no-select')
      el.style.height = ''
      this.$emit('after')
    }
  }
}
</script>
