<template>
  <div>
    {{ list2 }}
    <div class="row">
      <div>
        <div class="col-1" v-for="(item, index) in list1" :key="index">
          <p>{{ item.name }}</p>

          <template v-for="(element, i) in item.childern">
            <draggable
              :key="i"
              :list="item.childern"
              :group="{
                name: 'site',
                pull: true, //可以拖从
                put: false, //可以拖出
              }"
              @start="(e) => handlestart(e, element)"
              @unchoose="startData = null"
            >
              <p class="item" v-if="!element.show">
                {{ element.name }}---{{ element.show }}
              </p>
            </draggable>
          </template>
        </div>
      </div>

      <div class="col-2" @dragover.prevent="dragOver" @drop="onDropA">
        <VueDraggableResizable
          class="list-group-item"
          v-for="element in list2"
          :key="element.id"
          :snap="true"
          :is-conflict-check="true"
          :x="element.x"
          :y="element.y"
          :w="element.w"
          :h="element.h"
          @resizing="
            (left, top, width, height) =>
              onResize(left, top, width, height, element)
          "
          @dragging="(left, top) => onDrag(left, top, element)"
        >
          {{ element.name }}
          <button @click="handleDelete(element)">删除</button>
        </VueDraggableResizable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import VueDraggableResizable from "vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable.vue";

// 导入默认样式
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
export default {
  components: {
    draggable,
    VueDraggableResizable,
  },
  data() {
    return {
      list1: [
        {
          name: "标题1",
          childern: [
            { name: "John", id: 11, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Joao", id: 12, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Jean", id: 13, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Gerard", id: 14, show: false, x: 0, y: 0, w: 200, h: 50 },
          ],
        },
        {
          name: "标题2",
          childern: [
            { name: "John", id: 21, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Joao", id: 22, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Jean", id: 23, show: false, x: 0, y: 0, w: 200, h: 50 },
            { name: "Gerard", id: 24, show: false, x: 0, y: 0, w: 200, h: 50 },
          ],
        },
      ],
      list2: [],
      startData: null,
      x: 0,
      y: 0,
      ax: 0,
      ay: 0,
    };
  },
  methods: {
    //开始拖拽
    handlestart(e, item) {
      console.log(e.originalEvent, item, 123123);
      this.ax = e.originalEvent.offsetX;
      this.ay = e.originalEvent.offsetY;
      // 开始拖拽拿到数据
      this.startData = item;
    },
    // 目标元素移动位置
    dragOver(e) {
      this.x = e.offsetX - this.ax;
      this.y = e.offsetY - this.ay;
    },
    //拖拽完成
    onDropA(e) {
      console.log(e, 123, this.x, this.y);
      this.list2.push({ ...this.startData, x: this.x, y: this.y });
      //拖拽完成数据push
      // 遍历list2中的每一项
      this.list2.forEach((itemInList2) => {
        // 对于list1中的每个对象
        this.list1.forEach((parentItem) => {
          // 查找并更新匹配的子项
          parentItem.childern = parentItem.childern.map((childItem) => {
            if (childItem.id === itemInList2.id) {
              // 如果id匹配，设置show为true
              return { ...childItem, show: true };
            } else {
              // 否则，保持原样
              return childItem;
            }
          });
        });
      });
    },
    onDrag(left, top, element) {
      console.log(left, top, element, "干啥的", this.list2);
      this.list2 = this.list2.map((item) => {
        if (item.id === element.id) {
          return { ...item, x: left, y: top };
        }
        return item;
      });
    },
    onResize(left, top, width, height, element) {
      console.log(left, top, width, height, element, "弄啥的");
      this.list2 = this.list2.map((item) => {
        if (item.id === element.id) {
          return { ...item, x: left, y: top, w: width, h: height };
        }
        return item;
      });
    },
    handleDelete(value) {
      // 遍历list1的每个项目
      this.list1.forEach((parentItem) => {
        if (parentItem.childern) {
          // 遍历子项目
          parentItem.childern = parentItem.childern.map((child) => {
            // 如果id匹配，则更新show属性
            if (child.id === value.id) {
              return { ...child, show: false };
            }
            return child;
          });
        }
      });
      const index = this.list2.findIndex((i) => i.id === value.id);
      if (index > -1) {
        this.list2.splice(index, 1);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.row {
  display: flex;
  height: 100%;
  .col-1 {
    width: 300px;
  }
  .col-2 {
    flex: 1;
    //background-color: aquamarine;
    height: 100vh;
    border: 1px solid black;
    .dragArea {
      width: 100%;
      height: 100%;
      display: flex;
    }
    .list-group-item {
      width: 100px;
      height: 100px;
      border: 1px solid #333;
    }
  }
}
.item {
  width: 200px;
  height: 50px;
  border: 1px solid #333;
  line-height: 50px;
}
</style>
