<template>
  <div
    id="line"
    style="left: 22%;top: 57%;background-color: transparent;overflow: hidden;cursor: none;"
  >
    <div class="sucaitu vieWsucaitu" :style="{ width: '100%', height: '100%' }">
      <vue-drag-resize-rotate
        :w="item.w"
        class-name="my-drag-resize-rotate"
        :prevent-deactivation="false"
        :h="item.h"
        :x="item.x"
        :z="item.zIndex"
        :aspectRatio="true"
        :isActive="index === selectIndex"
        :y="item.y"
        v-for="(item, index) in imgList"
        :key="index"
        :draggable="true"
        :resizable="true"
        :rotatable="true"
        @dragstop="(a) => dragStop(a, item)"
        @resizestop="(a) => resizeStop(a, item)"
        @rotatestop="(a) => rotating(a, item)"
        :angle="item.r"
      >
        <div
          ref="sucaitu-img"
          :style="{ zIndex: item.zIndex }"
          class="sucaitu-img img element"
          style="cursor: default"
        >
          <img
            crossOrigin="anonymous"
            :src="item.url"
            :id="item.fileName + '_' + index"
            alt=""
            style="width: 100%;height: 100%"
            class="sucaitu-img"
          />
        </div>
      </vue-drag-resize-rotate>
    </div>
    <div
      :class="{ 'no-border-grid': systemSetting.gridShow !== 1 }"
      :style="{
        width: gridWH.w + 'px',
        height: gridWH.h + 'px',
      }"
      class="grid"
    >
      <div
        :style="{ height: gridSpacing.h, lineHeight: gridSpacing.h }"
        class="grid-row"
        v-for="it in 100"
        :key="it"
      >
        <div
          :style="{ width: gridSpacing.w, height: gridSpacing.h }"
          class="grid-col"
          v-for="it in 100"
          :key="it"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {};
  },
  methods: {
    dragStop(data, item) {
      this.$set(item, "y", data.y);
      this.$set(item, "x", data.x);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    resizeStop(data, item) {
      if (this.selectIndex < 0 && this.imgList.length) this.selectIndex = 0;
      this.$set(item, "y", data.y);
      this.$set(item, "w", data.w);
      this.$set(item, "h", data.h);
      this.$set(item, "x", data.x);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
    rotating(data, item) {
      console.log(data);
      this.$set(item, "r", data.angle);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.no-border-grid {
  border-color: transparent !important;

  * {
    border-color: transparent !important;
  }
}
#line {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translate(0, -50%);
  background-color: #f0f2f6;
}
</style>
