<template>
  <div class="move-bar"></div>
</template>

<script>
const { BrowserWindow } = require("electron").remote;

export default {
  name: "move-bar",
  data() {
    return {
      iniPos: [],
      win: null
    };
  },
  mounted() {
    const _this = this;
    let [_x, _y] = [0, 0];
    let isMoving = false;

    const moveHandle = function(e) {
      if (!isMoving) return;
      const left = Math.floor(_this.iniPos[0] + e.screenX - _x);
      const top = Math.floor(_this.iniPos[1] + e.screenY - _y);
      _this.win.setPosition(left, top);
    };

    const upHandle = function(e) {
      isMoving = false;
      document.removeEventListener("mousemove", moveHandle);
      document.removeEventListener("mouseup", upHandle);
    };

    document.addEventListener("mousedown", function(e) {
      if (_this.$el !== e.target) return;
      isMoving = true;

      _x = e.screenX;
      _y = e.screenY;
      _this.win = BrowserWindow.getFocusedWindow();
      _this.iniPos = _this.win.getPosition();

      document.addEventListener("mousemove", moveHandle);
      document.addEventListener("mouseup", upHandle);
    });
  },
  methods: {}
};
</script>
