<!--

* @description 自适应高度

* @fileName autoHeight.vue

* @author 彭成刚

* @date 2019/03/11 09:45:38

* @version V1.0.0

<autoHeight v-model="s1Height"

                  :allHeight='0'

                  :precent='20'

                  :diffHeight='0'>

  <table-s1 :height="s1Height"></table-s1>

</autoHeight>

!-->

<template>

  <div :style='styleHeight'>

    <slot></slot>

  </div>

</template>

<script>

export default {

  data () {

    return {

      allHeightData: 0,

      styleHeight: ''

    }

  },

  props: {

    value: {

      type: Number,

      default: 0

    },

    noStyle: {

      type: Boolean,

      default: false

    },

    allHeight: {

      type: Number,

      default: 0

    },

    precent: {

      type: Number,

      default: 100

    },

    diffHeight: {

      type: Number,

      default: 0

    }

  },

  components: {},

  computed: {},

  mounted () {

    this.calcHeight()

    window.addEventListener('resize', () => {

      this.calcHeight()

    })

    // window.innerHeight

  },

  watch: {

    'allHeight' (to, from) {

      this.calcHeight()

    },

    '$route' (to, from) {

      this.calcHeight()

    }

  },

  methods: {

    calcHeight () {

      let retHeight

      if (this.allHeight === 0) {

        this.allHeightData = window.innerHeight

      } else {

        this.allHeightData = this.allHeight

      }

      retHeight = (this.allHeightData * this.precent / 100) - this.diffHeight

      this.$emit('input', retHeight)

      if (!this.noStyle) {

        this.styleHeight = 'height: ' + retHeight + 'px; overflow-y:auto;'

      }

    }

  }

}

</script>

<style lang='less' scoped>

</style>