<template>


  <el-row data-auto-row="1">
    <el-col :span="24"> <div class="grid-content" id="__auto_3_wdsp4i" draggable="true" @dragstart="__autoDragStart($event, '__auto_3_wdsp4i')" @dragover="__autoDragOver($event, '__auto_3_wdsp4i')" @dragleave="__autoDragLeave" @dr
                             op="__autoDragDrop($event, '__auto_3_wdsp4i')"> <div class="drop-hint left" v-if="__autoDropInfo.targetId === '__auto_3_wdsp4i' && __autoDropInfo.direction === 'left'"></div> <div class="drop-hint right" v-if="__autoDropInfo.targetId === '__auto_3_wdsp4i' && __autoDropInfo.direction === 'right'"></div>
      1112
    </div></el-col>
  </el-row>

  <!-- 其他el-col结构按相同模式添加 -->
  <el-row data-auto-row="2">
    <el-col :span="12"
    :_material="{
      id:'__auto_3_47f3v9'
    }">
      <div class="grid-content"
           id="__auto_3_47f3v9"
           draggable="true"
           @dragstart="__autoDragStart($event, '__auto_3_47f3v9')"
           @dragover="__autoDragOver($event, '__auto_3_47f3v9')"
           @dragleave="__autoDragLeave"
           @drop="__autoDragDrop($event, '__auto_3_47f3v9')">
        <div class="drop-hint left" v-if="__autoDropInfo.targetId === '__auto_3_47f3v9' && __autoDropInfo.direction === 'left'"></div>
        <div class="drop-hint right" v-if="__autoDropInfo.targetId === '__auto_3_47f3v9' && __autoDropInfo.direction === 'right'"></div>
      222
    </div></el-col>
    <el-col :span="12"> <div class="grid-content" id="__auto_3_zjwi9y" draggable="true" @dragstart="__autoDragStart($event, '__auto_3_zjwi9y')" @dragover="__autoDragOver($event, '__auto_3_zjwi9y')" @dragleave="__autoDragLeave" @dr op="__autoDragDrop($event, '__auto_3_zjwi9y')"> <div class="drop-hint left" v-if="__autoDropInfo.targetId === '__auto_3_zjwi9y' && __autoDropInfo.direction === 'left'"></div> <div class="drop-hint right" v-if="__autoDropInfo.targetId === '__auto_3_zjwi9y' && __autoDropInfo.direction === 'right'"></div>
      333
    </div></el-col>
  </el-row>

  <el-row data-auto-row="3">
    <el-col :span="12"> <div class="grid-content" id="__auto_3_d60r1c" draggable="true" @dragstart="__autoDragStart($event, '__auto_3_d60r1c')" @dragover="__autoDragOver($event, '__auto_3_d60r1c')" @dragleave="__autoDragLeave" @dr
                             op="__autoDragDrop($event, '__auto_3_d60r1c')"> <div class="drop-hint left" v-if="__autoDropInfo.targetId === '__auto_3_d60r1c' && __autoDropInfo.direction === 'left'"></div> <div class="drop-hint right" v-if="__autoDropInfo.targetId === '__auto_3_d60r1c' && __autoDropInfo.direction === 'right'"></div>
      22222
    </div></el-col>
    <el-col :span="12"> <div class="grid-content" id="__auto_3_pp0uya" draggable="true" @dragstart="__autoDragStart($event, '__auto_3_pp0uya')" @dragover="__autoDragOver($event, '__auto_3_pp0uya')" @dragleave="__autoDragLeave" @dr
                             op="__autoDragDrop($event, '__auto_3_pp0uya')"> <div class="drop-hint left" v-if="__autoDropInfo.targetId === '__auto_3_pp0uya' && __autoDropInfo.direction === 'left'"></div> <div class="drop-hint right" v-if="__autoDropInfo.targetId === '__auto_3_pp0uya' && __autoDropInfo.direction === 'right'"></div>
      33333
    </div></el-col>
  </el-row>


</template>

<script setup name="Index">
import { ref } from 'vue'
// AUTO-INJECTED DRAG LOGIC
const __autoDragElement = ref(null)
const __autoDropInfo = ref({
  targetId: null,
  direction: null
})

const __autoDragStart = (e, id) => {
  __autoDragElement.value = id
  e.dataTransfer.effectAllowed = 'move'
}

const __autoDragOver = (e, targetId) => {
  e.preventDefault()
  const rect = e.currentTarget.getBoundingClientRect()
  __autoDropInfo.value = {
    targetId,
    direction: e.clientX - rect.left < rect.width / 2 ? 'left' : 'right'
  }
}

const __autoDragLeave = () => {
  __autoDropInfo.value = { targetId: null, direction: null }
}

const __autoDragDrop = (e, targetId) => {
  e.preventDefault()
  if (!__autoDragElement.value || !targetId) return
  console.log(`DRAG_ACTION: ${__autoDragElement.value} -> ${targetId} (${__autoDropInfo.value.direction})`)
  __autoDragElement.value = null
  __autoDropInfo.value = { targetId: null, direction: null }
}
</script>
<style lang='scss' scoped>
.grid-content {
  border: 1px solid #e4e7ed;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  cursor: move;
  user-select: none;
  background: white;
  z-index: 1;

  /* 悬停效果 */
  &:hover {
    background-color: #f5f7fa;
    border-color: #409eff;
    transform: translateY(-2px);
    z-index: 2;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 拖放指示器 */
  .drop-hint {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 3;
    pointer-events: none;

    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
      color: #409eff;
      font-weight: 500;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 左侧指示 */
    &.left {
      left: 0;
      border-left: 3px solid #409eff;

      &::after {
        content: "← 放置左侧";
        left: 10px;
      }
    }

    /* 右侧指示 */
    &.right {
      right: 0;
      border-right: 3px solid #409eff;

      &::after {
        content: "放置右侧 →";
        right: 10px;
      }
    }
  }

  /* 拖放时的半透明效果 */
  &[draggable="true"]:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* 当前拖拽元素的样式 */
  &.drag-overlay {
    opacity: 0.5;
    transform: rotate(3deg);
  }
}

/* 行间距 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

/* 拖放过程的状态指示 */
.drag-enter {
  background: linear-gradient(
          45deg,
          rgba(64, 158, 255, 0.1) 25%,
          transparent 25%,
          transparent 50%,
          rgba(64, 158, 255, 0.1) 50%,
          rgba(64, 158, 255, 0.1) 75%,
          transparent 75%,
          transparent
  );
  background-size: 40px 40px;
  animation: dragStripes 3s linear infinite;
}

@keyframes dragStripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* 优化移动端触摸体验 */
@media (hover: none) {
  .grid-content {
    touch-action: manipulation;
    &:active {
      transform: scale(0.96);
    }
  }
}
</style>
