<template>
  <div class="per-layout" ref="layout">
    <div id="box" class="content" :style="contentStyle">
      <slot />
    </div>
</div>
</template>

<script>

import browser from '@/utils/browser'

const MAXSCALE = 1
const MINSCALE = 1
const RANGE = 0.1
let wh = { width: window.innerHeight * (2880 / 1400), height: window.innerHeight }
export default {
  data() {
    return {
      wh,
      width: wh.width,
      height: wh.height,
      tscale: 1,
      translate: {
        x: -14,
        y: 0
      },
      isFireFox: browser.gecko,
      ismobile: browser.mobile,
      wLimit: (wh.width - window.innerWidth) / 2
    }
  },
  computed: {
    contentStyle() {
      let tempW = Math.round(this.tscale * wh.width)
      let tempH = Math.round(this.tscale * wh.height)

      let val = `translateX(calc(-50% + ${this.translate.x}px))
        `
      let width = `${tempW % 2 === 0 ? tempW : tempW + 1}px`
      let height = `${tempH % 2 === 0 ? tempH : tempH + 1}px`
      return { transform: val, width, height }
    },

    hLimit() {
      return ((wh.height * this.tscale) - wh.height) / 2
    }
  },
  watch: {
    tscale() {
      this.$emit('closeItem')
      this.translate.x = Math.min(Math.max(this.translate.x, -this.wLimit), this.wLimit)
      this.translate.y = Math.min(Math.max(this.translate.y, -this.hLimit), this.hLimit)
    },
    g_isLandscape: {
      immediate: true,
      handler: function () {
        wh = { width: window.innerHeight * (2880 / 1400), height: window.innerHeight }
      }
    }
  },
  methods: {
    readyMove(ev) {
      // ev.preventDefault()
      ev.stopPropagation()

      let startX, startY
      if (ev.screenX) {
        startX = ev.screenX
        startY = ev.screenY
      } else {
        startX = ev.touches[0].clientX
        startY = ev.touches[0].clientY
      }

      let x = this.translate.x
      let y = this.translate.y
      let moveHandle = ev => {
        let moveX, moveY
        if (ev.screenX) {
          moveX = ev.screenX
          moveY = ev.screenY
        } else {
          moveX = ev.touches[0].clientX
          moveY = ev.touches[0].clientY
        }

        // this.translate.x = x + moveX - startX
        this.translate.x = Math.min(Math.max((x + moveX - startX), -this.wLimit), this.wLimit)
      }

      let upHandle = () => {
        document.removeEventListener('touchmove', moveHandle, { passive: false })
        document.removeEventListener('touchend', upHandle)
        document.removeEventListener('mousemove', moveHandle, { passive: false })
        document.removeEventListener('mouseup', upHandle)
      }

      document.addEventListener('touchmove', moveHandle, { passive: false })
      document.addEventListener('touchend', upHandle)
      document.addEventListener('mousemove', moveHandle, { passive: false })
      document.addEventListener('mouseup', upHandle)
    },
    scrollFunc(e) {
      e = e || window.event
      let up = () => {
        this.tscale < MAXSCALE && (this.tscale += RANGE)
      }
      let down = () => {
        let scaleFuc = (y) => {
          this.translate = {
            x: 0,
            y
          }
        }
        this.tscale > MINSCALE && (this.tscale -= RANGE)
        this.ismobile ? (this.tscale === 3 && scaleFuc(184)) : (this.tscale === 1 && scaleFuc(0))
      }
      if (this.isFireFox) {
        switch (true) {
          case e.detail > 0: // 当滑轮向下滚动时
            down()
            break
          default:
            up()
            break
        }
      } else { // 判断浏览器IE，谷歌滑轮事件
        switch (true) {
          case e.wheelDelta > 0:// 当滑轮向上滚动时
            up()
            break
          default:
            down()
            break
        }
      }
    }
  },
  mounted() {
    var box = document.querySelector('#box')
    this.$nextTick(() => {
      this.wLimit = (wh.width - window.innerWidth) / 2
    })

    this.readyMove = this.readyMove.bind(this)
    this.$refs.layout.addEventListener('mousedown', this.readyMove, { capture: false })
    this.$refs.layout.addEventListener('touchstart', this.readyMove, { capture: false })
    /* IE、Opera注册事件 */
    if (document.attachEvent) {
      box.attachEvent('onmousewheel', this.scrollFunc)
    }
    // Firefox使用addEventListener添加滚轮事件
    if (document.addEventListener) { // firefox
      box.addEventListener('DOMMouseScroll', this.scrollFunc, false)
    }
    // Safari与Chrome属于同一类型
    window.onmousewheel = box.onmousewheel = this.scrollFunc
  },
  beforeDestroy() {
    this.$refs.layout.removeEventListener('mousedown', this.readyMove)
    this.$refs.layout.removeEventListener('touchstart', this.readyMove)
  }
}
</script>

<style lang="scss" scoped>
.per-layout {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.content {
  width: 120%;
  will-change: transform;
  position: relative;
  left: 50%;
  height: 100%;
  touch-action: none;
}
</style>