<template>
  <div class="oper-layout"
    tabindex="0"
    :style="layoutStyle"
    @keydown.prevent.107="enlarge"
    @keydown.prevent.109="narrow"
    ref="layout"
  >
    <div class="content" :style="contentStyle">
      <slot :style="{transform:`scale(${this.tscale})`}" />
    </div>
  </div>
</template>

<script>
const MAXSCALE = 2
const MINSCALE = 0.5

const wh = {width: window.innerWidth, height: window.innerHeight}

function getType (data) {
  let string = Object.prototype.toString.call(data)
  return string.substring(8, string.length - 1)
}

export default {
  props: {
    width: {
      default: '100%'
    },
    height: {
      default: 'auto'
    },
    scale: {
      type: Number,
      default: 1
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      tscale: this.scale,
      translate: {
        x: this.x,
        y: this.y
      },
      wh
    }
  },
  computed: {
    layoutStyle () {
      let width = getType(this.width) === 'Number'
        ? this.width + 'px' : this.width
      let height = getType(this.height) === 'Number'
        ? this.height + 'px' : this.height

      return {width, height}
    },
    contentStyle () {
      let val = `translateX(calc(-50% + ${this.translate.x}px))
        translateY(calc(-50% + ${this.translate.y}px))`
      return {transform: val}
    },
    wLimit () {
      return (1080 - wh.width) / 2
    },
    hLimit () {
      return wh.height / 2 - 60
    }
  },
  methods: {
    readyMove (ev) {
      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
        }

        // if (Math.abs(this.translate.y) >= 368) {
        //   return
        // }
        // this.translate.x = x + moveX - startX
        this.translate.x = Math.min(Math.max((x + moveX - startX), -this.wLimit), this.wLimit)
        this.translate.y = Math.min(Math.max((y + moveY - startY), -this.hLimit), this.hLimit)
        ev.preventDefault()
        ev.stopPropagation()
      }

      let upHandle = ev => {
        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)
    },
    enlarge () {
      if (this.tscale < MAXSCALE) {
        this.tscale += 0.1
      }
    },
    narrow () {
      if (this.tscale > MINSCALE) {
        this.tscale -= 0.1
      }
    }
  },
  mounted () {
    this.readyMove = this.readyMove.bind(this)
    this.$refs.layout.addEventListener('mousedown', this.readyMove)
    this.$refs.layout.addEventListener('touchstart', this.readyMove)
  },
  beforeDestroy () {
    this.$refs.layout.removeEventListener('mousedown', this.readyMove)
    this.$refs.layout.removeEventListener('touchstart', this.readyMove)
  }
}
</script>

<style scoped>
@import url('./style.css');
</style>
