<template>
  <div v-show="moving" class="guides">
    <!-- 横线 -->
    <div
      v-for="val in horiz"
      v-show="attachHoriz(val.val)"
      :key="val.id"
      :style="{top: val.val + '%'}"
      class="horiz"
    />

    <!-- 竖线 -->
    <div
      v-for="val in verti"
      v-show="attachVerti(val.val)"
      :key="val.id"
      :style="{left: val.val + '%'}"
      class="verti"
    />
  </div>
</template>

<script>
import vpd from "../../mixins/vpd";

export default {
  name: "RefLines",
  mixins: [vpd],
  computed: {
    moving() {
      return this.$vpd.state.moving;
    },
    guides() {
      var state = this.$vpd.state;
      var guides = [];
      var uuid = state.uuid;

      state.widgets.forEach(item => {
        // 排除选中元素
        if (item.hasGuide && item.uuid === uuid) return;
        // 排除容器中的元件
        if (item.hasGuide && item.belong !== "page") return;

        guides.push({
          uuid: item.uuid,
          width: item.width,
          height: item.height,
          top: item.top,
          left: item.left
        });
      });

      return guides;
    },
    /**
     * 获取参考线
     *
     * 取画布中线以及每个元件上下边的坐标
     * 排除正在移动的元件
     * 排除画布边缘坐标
     * 排除重复坐标
     */
    horiz() {
      var guides = this.guides;
      var cor = [];

      guides.forEach(val => {
        console.log(val, 'ref-lines  guide')
        var top = val.top;
        var bottom = top + val.height;

        if (cor.indexOf(top) < 0 && top !== 0) {
          cor.push({
            id: `horiz-${val.uuid}-${top}`,
            val: top
          });
        }
        if (cor.indexOf(bottom) < 0) {
          cor.push({
            id: `horiz-${val.uuid}-${bottom}`,
            val: bottom
          });
        }
      });

      return cor;
    },

    verti() {
      var guides = this.guides;
      var cor = [375];

      guides.forEach(val => {
        var left = val.left;
        var right = left + val.width;

        if (cor.indexOf(left) < 0 && left !== 0) {
          cor.push({
            id: `verti-${val.uuid}-${left}`,
            val: left
          });
        }
        if (cor.indexOf(right) < 0 && right < 750) {
          cor.push({
            id: `verti-${val.uuid}-${right}`,
            val: right
          });
        }
      });

      return cor;
    },

    // 移动元素上下边坐标
    horizontal() {
      var a = this.$vpd.state.activeElement;
      if (a) {
        var h = Math.round(a.height);
        return [a.top, a.top + h];
      } else {
        return [];
      }
    },

    // 移动元素左中右坐标
    vertical() {
      var a = this.$vpd.state.activeElement;
      if (a) {
        var w = Math.round(a.width / 2);
        return [a.left, a.left + w, a.left + w * 2];
      } else {
        return [];
      }
    }
  },
  methods: {
    attachHoriz(value) {
      return this.horizontal.some(val => Math.abs(val - value) <= 1);
    },
    attachVerti(value) {
      return this.vertical.some(val => Math.abs(val - value) <= 1);
    }
  }
};
</script>

<style scoped>
.guides {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
}
.verti {
  position: absolute;
  width: 1px;
  height: 1000%;
  top: -50px;
  background: #18ffff;
}
.horiz {
  position: absolute;
  height: 0.5px;
  width: 1000%;
  left: -500%;
  background: #18ffff;
}
</style>
