<template>
  <div class="drag-layout">
    <div class="drag-content" :class="{ padding: isDrag }">
      <div id="drag__container" :style="imageStyle">
        <div id="drag__move" :style="ewmStyle">
          <el-tooltip v-model="tooltipShow" effect="dark" content="二维码在这里!" placement="top-start" :manual="true">
            <div style="width: 100%; height: 100%" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="drag__control">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { dragmove } from './dragmove.js'
export default {
  name: 'DragLayout',
  props: {
    qw: {
      type: Number,
      default: 53
    },
    qh: {
      type: Number,
      default: 53
    },
    oldX: {
      type: Number,
      default: 0
    },
    oldY: {
      type: Number,
      default: 0
    },
    image: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    isDrag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tooltipShow: false,
      dragContainer: null,
      snapThreshold: 0, // 边界
      x: 0,
      y: 0
    }
  },
  computed: {
    imageWidth() {
      return this.size.split(',')[0] + 'px'
    },
    imageHeight() {
      return this.size.split(',')[1] + 'px'
    },
    imageStyle() {
      return {
        width: this.imageWidth,
        height: this.imageHeight,
        background: `url(${this.image}) no-repeat center`,
        'background-size': `${this.imageWidth} ${this.imageHeight}`
      }
    },
    ewmStyle() {
      console.log({
        left: this.oldX + 'px',
        top: this.oldY + 'px',
        width: this.qw + 'px',
        height: this.qh + 'px',
        'background-size': `${this.qw + 'px'} ${this.qh + 'px'}`
      })

      return {
        // cursor: this.isDrag ? 'move' : '',
        left: this.oldX + 'px',
        top: this.oldY + 'px',
        width: this.qw + 'px',
        height: this.qh + 'px',
        'background-size': `${this.qw + 'px'} ${this.qh + 'px'}`
      }
    }
  },
  mounted() {
    if (!this.isDrag) return
    this.dragContainer = document.querySelector('#drag__container')
    dragmove(
      document.querySelector('#drag__container #drag__move'),
      document.querySelector('#drag__container #drag__move'),
      this.onStart,
      this.onEnd
    )
    setTimeout(() => {
      this.tooltipShow = true
    }, 2000)
  },
  methods: {
    // 取消
    onCancel() {
      this.x = this.oldX
      this.y = this.oldY
      this.$emit('cancel', { x: this.x, y: this.y })
      this.tooltipShow = false
    },

    // 确认
    onConfirm() {
      this.$emit('confirm', { x: this.x, y: this.y })
      this.tooltipShow = false
    },

    // 开始拖动
    onStart(el, x, y) {
      this.tooltipShow = false
    },

    // 结束拖动
    onEnd(el, x, y) {
      this.tooltipShow = true
      if (x < this.snapThreshold) {
        el.style.left = 0
        el.style.right = 'auto'
      }
      if (y < 0) {
        el.style.top = 0
        el.style.bottom = 'auto'
      }
      if (x > this.dragContainer.offsetWidth - el.offsetWidth) {
        el.style.right = 0
        el.style.left = 'auto'
      }
      if (y > this.dragContainer.offsetHeight - el.offsetHeight) {
        el.style.bottom = 0
        el.style.top = 'auto'
      }

      const { offsetWidth, offsetHeight } = this.dragContainer

      if (x < 0) {
        this.x = 0
      } else if (x > offsetWidth - this.qw) {
        this.x = offsetWidth - this.qw
      } else {
        this.x = x
      }

      if (y < 0) {
        this.y = 0
      } else if (y > offsetHeight - this.qh) {
        this.y = offsetHeight - this.qh
      } else {
        this.y = y
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drag-content {
  background: #f1f1f1;
  &.padding {
    padding: 50px 0;
  }
  #drag__container {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
  }
  #drag__move {
    position: absolute;
    background-color: skyblue;
    background: url(~@/assets/img/drag-qrcode-temp.png) no-repeat center;
  }
}

.drag__control {
  margin-top: 24px;
  text-align: right;
}
</style>
