/**
* @Author Think
* @Date 2018/11/24
*/

<template>
  <div class="content">
    <slot/>
  </div>
</template>

<script>
import { detectOS } from '../../common/utils/index'
export default {
  name: 'HContent',
  props: {
    calContent: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
      winHeight: window.innerHeight,
      winWidth: window.innerWidth,
    }
  },
  mounted () {
    if (this.calContent) {
      this.contentHeight()
    }
  },
  methods: {
    getHeaderHeight () {
      let vm = this
      let $el = vm.$el.previousElementSibling
      let headerHeight = 0
      do {
        if ($el) {
          let elHeight = window.getComputedStyle($el).height
          let part = /^\d+(\.\d+)?px$/
          if (elHeight && part.test(elHeight)) {
            headerHeight += Number(elHeight.replace('px', ''))
          }
          if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
            if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
              headerHeight += 0.8 * vm.fontSize
            } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
              headerHeight += 0.8 * vm.fontSize
            } else if (detectOS() === 'ios') {
              headerHeight += 0.4 * vm.fontSize
            }
          }
          $el = $el.previousElementSibling
        }
      } while ($el)

      return headerHeight
    },
    getNextElementHeight () {
      let vm = this
      let nextElement = this.$el.nextElementSibling
      let nextHeight = 0
      do {
        if (nextElement) {
          let elHeight = window.getComputedStyle(nextElement).height
          let part = /^\d+(\.\d+)?px$/
          if (elHeight && part.test(elHeight)) {
            nextHeight += Number(elHeight.replace('px', ''))
          }
          if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
            let height = nextElement.clientHeight
            if (detectOS() === 'ios' && height > Math.ceil(vm.fontSize * 0.88)) {
              nextHeight += 0
            } else {
              if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
                nextHeight += vm.fontSize * 0.68
              } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
                nextHeight += vm.fontSize * 0.68
              }
            }
          }
          nextElement = nextElement.nextElementSibling
        }
      } while (nextElement)
      return nextHeight
    },
    contentHeight () {
      let vm = this
      const headerHeight = vm.getHeaderHeight()
      const nextHeight = vm.getNextElementHeight()
      let content = vm.$el
      content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
    },
  },
}
</script>

<style lang="less">
  .content {
    flex: 1;
    overflow: hidden;
    background-color: #fafafa;
    position: relative;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .has-header {
        top: 84px;
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .has-header {
        top: 84px;
      }
    }
  }
</style>
