<template>
  <div class="oper-layout"
    tabindex="0"
    :style="layoutStyle"
    @keydown.prevent.107="enlarge"
    @keydown.prevent.109="narrow"
    ref="layout"
  >
    <div class="ctrl">
      <!-- <i class="el-icon-plus" @click="enlarge"></i>
      <i class="el-icon-minus" @click="narrow"></i> -->
    </div>
    <div class="content" :style="contentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
const MAXSCALE = 2
const MINSCALE = 0.5

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
      }
    }
  },
  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(${this.translate.x}px)
        translateY(${this.translate.y}px)
        scale(${this.tscale})`

      return {transform: val}
    }
  },
  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
        }
        this.translate.x = x + moveX - startX
        this.translate.y = y + moveY - startY
        ev.preventDefault()
        ev.stopPropagation()
      }

      let upHandle = ev => {
        console.log('-0-')
        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>
