<template>
  <div id="stage-canvas" @click="handleCanvasClick">
    <vue-draggable-resizable
      v-for="(item, index) in app.componentList"
      v-if="item.options.mamHidden"
      :key="index"
      :grid="[20, 20]"
      :x="item.options.x"
      :y="item.options.y"
      :w="item.options.width"
      :h="item.options.height"
      :snap="true"
      :snap-tolerance="0"
      :parent="true"
      :prevent-active-behavior="true"
      :parent-limitation="true"
      :is-active="true"
      :scale-ratio="0.6"
      :prevent-deactivation="false"
      @activated="activated(item)"
      @click.native.stop="handleResizeClick($event, item)"
      @refLineParams="getRefLineParams"
      @resizestop="resizestop"
      @dragstop="handleDragstop"
      @contextmenu.native.prevent="handleContextMenu($event, item)"
      @resizing="onResize"
    >
      <component
        :is="item.type"
        :options="item.options"
        :dom-id="'domId' + index"
      />
    </vue-draggable-resizable>
    <!--辅助线-->
    <span
      v-for="(item, index) in vLine"
      v-show="item.display"
      :key="'A' + index"
      class="ref-line v-line"
      :style="{
        left: item.position,
        top: item.origin,
        height: item.lineLength
      }"
    />
    <span
      v-for="(item, index) in hLine"
      v-show="item.display"
      :key="'B' + index"
      class="ref-line h-line"
      :style="{ top: item.position, left: item.origin, width: item.lineLength }"
    />
    <!--辅助线END-->

    <right-menu
      :x="x_index"
      :y="y_index"
      :show-menu.sync="showMenu"
      @del="delAttr"
    /></div
></template>
<script>
import draggable from "./mixin/draggable";
import resize from "./mixin/resize";
import RightMenu from "@/components/RightMenu/index";
export default {
  name: "StageCanvas",
  inject: ["app"],
  components: {
    RightMenu
  },
  mixins: [draggable, resize],
  data() {
    return {
      x_index: 0,
      y_index: 0,
      showMenu: false,
      vLine: [],
      hLine: [],
      activeComponent: {}, // 被激活的组件
      selectData: {} // 鼠标右键选中的数据
    };
  },
  methods: {
    handleCanvasClick() {
      this.app.isCanvasActived = true;
    },

    handleContextMenu(event, data) {
      console.log('移动了')
      const e = event || window.event;
      const scrollX =
        document.documentElement.scrollLeft || document.body.scrollLeft;
      const scrollY =
        document.documentElement.scrollTop || document.body.scrollTop;
      const x = e.pageX || e.clientX + scrollX;
      const y = e.pageY || e.clientY + scrollY;
      this.x_index = x - 250;
      this.y_index = y;
      this.selectData = data;
      this.showMenu = true;
    },

    // 删除回调
    delAttr() {
      console.log("删除:this.selectData.key", this.selectData.key);
      console.log("数组", this.app.componentList);
      //return false
      this.showMenu = false;
      this.app.componentList.forEach((val, index) => {
        console.log("删除:val.key", val.key);
        console.log("删除:index", index);
        if (this.selectData.key == val.key) {
          this.app.componentList.splice(index, 1);
        }
      });
    }
  }
};
</script>
<style lang="scss">
@import "../../styles/theme.scss";
#stage-canvas {
  flex: 1;
  //background: $stage-canvas-theme;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  position: relative;
  //background: linear-gradient(-90deg, rgba(255,255,255, .3) 1px, transparent 1px) 10px 10px/20px 20px, linear-gradient(rgba(255,255,255, .3) 1px, transparent 1px) 0% 0%/20px 20px;
  background: linear-gradient(
        -90deg,
        rgba(216, 221, 228, 1) 1px,
        transparent 1px
      )
      10px 10px/20px 20px,
    linear-gradient(rgba(216, 221, 228, 1) 1px, transparent 1px) 0% 0%/20px 20px;
  //background:green;
  .draggable-box {
    width: 100%;
    height: 100%;
  }

  a {
    color: #333;
  }
  .right-menu {
    position: fixed;
    background: #fff;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    z-index: 999;
    display: none;
  }
  .right-menu a {
    width: 75px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: block;
    color: #1a1a1a;
  }
  .right-menu a:hover {
    background: #eee;
    color: #fff;
  }
}
</style>
