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

<script>
import {addBodyClass, removeBodyClass} from '@uif/core/lib/utils/dom'
import {px} from '@uif/core/lib/utils/assist'

export default {
  name: 'u-slide-down',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  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 = px(el.getBoundingClientRect().height)
    },
    after (el) {
      removeBodyClass('no-select')
      el.style.height = ''
      this.$emit('after')
    }
  },
  components: {}
}
</script>
