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

<template>
  <div
    class="content" @touchstart.capture="touchStart"
    @touchend.capture="touchEnd">
    <slot/>
  </div>
</template>

<script>
import { detectOS } from '../../common/utils/index'
export default {
  name: 'HContent',
  props: {
    calContent: {
      type: Boolean,
      default: true,
    },
    tapDelay: {
      type: Number,
      default: 200,
    },
    tapTimeout: {
      type: Number,
      default: 700,
    },
  },
  data () {
    return {
      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
      winHeight: window.innerHeight,
      winWidth: window.innerWidth,
      height: 0,
      firstClickTime: 0,
      lastClickTime: 0,
      startY: 0, // 触摸位置
      endY: 0, // 结束位置
    }
  },
  watch: {
  },
  mounted () {
    if (this.calContent) {
      this.contentHeight()
    }
    /*  document.body.addEventListener('touchstart', (event) => {
      if (event.target.readOnly) return
      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
        startTouches = event.changedTouches[0]
      }
      console.log('touchStartTime:' + event.timeStamp)
      if ((event.timeStamp - lastClickTime) < tapDelay) {
        event.preventDefault()
      }
    }) */
    /*  document.body.addEventListener('touchend', (event) => {
      if ((event.timeStamp - lastClickTime) < tapDelay) return
      debugger
      console.log('touchEndTime:' + event.timeStamp)
      lastClickTime = event.timeStamp
      let keyboardHeight = this.getKeyBoardHeight()
      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
        let pointY = startTouches.clientY

        let scrollTop = (this.winHeight - pointY) < keyboardHeight ? (keyboardHeight - (this.winHeight - pointY)) : 0
        if (scrollTop) {
          this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
          this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
          this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
          this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
        }
        event.target.focus()
      }
    }) */
    /*  document.body.addEventListener('focusin', () => {
      // this.final = this.final + this.distance
      console.log('distance:' + this.distance)
     // this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
      // this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
     // this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
      let node = document.activeElement
      setTimeout(() => {
        if (node) {
          if (node) {
            if (node.nodeName === 'TEXTAREA' || node.nodeName === 'INPUT') { // 如果是input或textarea
              if (node.style.textShadow === '') {
                node.style.textShadow = 'rgba(0,0,0,0) 0 0 0' // 改变某个不可见样式，触发dom重绘
                node.scrollIntoView()
                node.focus()
              } else {
                node.style.textShadow = ''
              }
            }
          }
        }
      }, 100)
    //   this.$el.scrollTop = this.final
    }) */
    // document.body.addEventListener('focusout', () => {
    // if (detectOS() === 'ios') {
    //   document.body.addEventListener('focusin', () => {
    //     // 软键盘弹出的事件处理

    //     let keyboardHeight = this.getKeyBoardHeight()
    //     let activeElement = document.activeElement
    //     let offsetTop = activeElement.offsetTop
    //     let offsetParent = activeElement.offsetParent
    //     if (activeElement === document.body) {
    //       return
    //     }
    //     while (offsetParent !== document.body) {
    //       offsetTop += offsetParent.offsetTop
    //       offsetParent = offsetParent.offsetParent
    //     }
    //     offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
    //     if (offsetTop > 0) {
    //       this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
    //       this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
    //       this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
    //     }
    //   })
    document.body.addEventListener('focusout', () => {
      // 软键盘收起的事件处理
      this.$el.style.height = parseInt(this.contentsHeight) + 'px'
      this.$el.style.transform = 'translate(0px,  0px) scale(1) translateZ(0px)'
    })
    // document.body.addEventListener('focusin', () => {
    //   // 软键盘弹出的事件处理
    //   let keyboardHeight = this.getKeyBoardHeight()
    //   let activeElement = document.activeElement
    //   let offsetTop = activeElement.offsetTop
    //   let i = 0
    //   console.log(offsetTop, 11)
    //   let offsetParent = activeElement.offsetParent
    //   if (activeElement === document.body) {
    //     return
    //   }
    //   while (offsetParent !== document.body) {
    //     i++
    //     offsetTop += offsetParent.offsetTop
    //     console.log(offsetParent, i)
    //     console.log(offsetParent.offsetTop, 'offsetParent', i)
    //     offsetParent = offsetParent.offsetParent
    //     console.log(offsetTop, i, 'top')
    //   }
    //   // console.log(this.$el)
    //   // console.log(this.$el.offsetTop, 'top')
    //   // console.log(this.$el.style.height)
    //   // console.log(innerHeight - offsetTop)
    //   offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
    //   console.log(offsetTop)
    //   if (offsetTop > 0) {
    //     this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
    //     this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
    //     this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
    //   }
    // })
    // }

    // 当视图窗口大小发生改变时
    window.onresize = () => {
      return (() => {
        if (!this.isResize) {
          // 默认屏幕高度
          this.docmHeight = document.documentElement.clientHeight
          this.isResize = true
        }
        // 实时屏幕高度
        this.showHeight = document.body.clientHeight
      })()
    }
  },
  methods: {
    touchStart (event) {
      this.firstClickTime = event.timeStamp
      if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
      if (event.target.readOnly) return
      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
        this.startY = event.changedTouches[0].clientY
      }
    },
    touchEnd (event) {
      if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
      this.lastClickTime = event.timeStamp
      if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
        this.endY = event.changedTouches[0].clientY
        if ((this.endY - this.startY > 100) || this.endY - this.startY < -100) return
        let keyboardHeight = this.getKeyBoardHeight()
        let scrollTop = (this.winHeight - this.endY) < keyboardHeight ? (keyboardHeight - (this.winHeight - this.endY)) : 0
        if (scrollTop) {
          this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
          this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
          this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
          this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
        }
        event.target.focus()
      }
    },
    getHeaderHeight () {
      let vm = this
      let $el = vm.$el.previousElementSibling
      let headerHeight = 0
      do {
        if ($el) {
          let elHeight = window.getComputedStyle($el).height
          if (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
          if (elHeight) {
            nextHeight += Number(elHeight.replace('px', ''))
          }
          if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
            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
      vm.height = (window.innerHeight - nextHeight - headerHeight)
      content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
    },

    // 键盘的高度
    getKeyBoardHeight () {
      var innerWidth = window.innerWidth
      if (detectOS() === 'ios') {
        if (innerWidth >= 375 && innerHeight >= 812) {
          return 460
        }
        return 400
      } else {
        return 300
      }
    },
  },
}
</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>
