<template>
  <div>
    <div v-for="(lists, idx) of lists" :key="lists.sanctnId || idx" class="draggable-item-wrapper">
      <div class="drop-zone" @dragover.prevent="handleDragEnter($event, idx)" @dragenter.prevent="handleDragEnter($event, idx)" @dragleave="handleDragLeave($event, idx)" @drop.prevent="handleDrop($event, idx)" :class="{
        'drop-active': dropTarget === idx,
        'drop-visible': draggedIndex !== null && shouldShowDropZone(idx),
        'drop-hidden': draggedIndex !== null && !shouldShowDropZone(idx)
      }">
        <div class="drop-indicator">여기에 놓기</div>
      </div>
      <div class="d-flex addapproval draggable-item" draggable="true" @dragstart="handleDragStart(idx, $event)" @dragend="handleDragEnd" :class="{ 'being-dragged': draggedIndex === idx }">
        <select class="form-select" v-model="lists.sanctnSe" style="width: 110px;" @mousedown.stop>
          <option v-for="(item, idx) of cmmnCodes.sanctnCodeList" :key="idx" :value="item.code"> {{ item.codeNm }} </option>
        </select>
        <div class="d-flex align-items-center border-x">
          <p>{{ lists.confmerNm }} {{ lists.clsfNm }} ({{ lists.sanctnOrdr }})</p>
          <button type="button" @click="$emit('delSanctn', idx)" @mousedown.stop>
            <CloseOutlined />
          </button>
        </div>
      </div>
    </div>
    <div class="drop-zone" @dragover.prevent="handleDragEnter($event, lists.length)" @dragenter.prevent="handleDragEnter($event, lists.length)" @dragleave="handleDragLeave($event, lists.length)" @drop.prevent="handleDrop($event, lists.length)" :class="{
      'drop-active': dropTarget === lists.length,
      'drop-visible': draggedIndex !== null && shouldShowLastDropZone(),
      'drop-hidden': draggedIndex !== null && !shouldShowLastDropZone()
    }">
      <div class="drop-indicator">여기에 놓기</div>
    </div>
  </div>
</template>
<script>
import { CloseOutlined } from '@ant-design/icons-vue';

export default {
  name: 'SanctnList',

  components: { CloseOutlined },

  props: {
    lists: {
      type: Array,
      default: () => [],
    }
  },

  data() {
    return {
      cmmnCodes: {}, // 결재 코드 목록
      draggedIndex: null,
      dropTarget: null,
    }
  },

  async created() {
    this.cmmnCodes = await this.$defaultCodes(); // 코드 목록 초기화
  },

  methods: {
    shouldShowDropZone(index) {
      if (this.draggedIndex === null) return true;
      if (index === this.draggedIndex || index === this.draggedIndex + 1) return false;
      return true;
    },

    shouldShowLastDropZone() {
      if (this.draggedIndex === null) return true;
      return this.draggedIndex !== this.lists.length - 1;
    },

    handleDragStart(index, event) {
      this.draggedIndex = index;
      event.dataTransfer.effectAllowed = 'move';
      event.dataTransfer.setData('text/plain', index.toString());
    },

    handleDragEnter(event, dropIndex) {
      if (this.draggedIndex !== null) {
        this.dropTarget = dropIndex;
      }
    },

    handleDragLeave(event, dropIndex) {
      const rect = event.currentTarget.getBoundingClientRect();
      const x = event.clientX;
      const y = event.clientY;

      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
        if (this.dropTarget === dropIndex) {
          this.dropTarget = null;
        }
      }
    },

    handleDrop(event, dropIndex) {
      if (this.draggedIndex !== null && this.draggedIndex !== dropIndex) {
        let finalDropIndex = dropIndex;

        if (this.draggedIndex < dropIndex) {
          finalDropIndex = dropIndex - 1;
        }

        const newSanctns = [...this.lists];
        const draggedItem = newSanctns.splice(this.draggedIndex, 1)[0];
        newSanctns.splice(finalDropIndex, 0, draggedItem);

        newSanctns.forEach((item, index) => {
          item.sanctnOrdr = index + 1;
        });

        this.$emit('update:lists', newSanctns);
      }

      this.dropTarget = null;
    },

    handleDragEnd() {
      this.draggedIndex = null;
      this.dropTarget = null;
    }
  }
};
</script>
<style scoped>
.draggable-item-wrapper {
  position: relative;
}

.draggable-item {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  background: white;
  border-radius: 8px;
  padding: 8px;
}

.being-dragged {
  opacity: 0.5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.drop-zone {
  height: 0;
  margin: 0;
  padding: 0;
  border: 2px dashed transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

.drop-zone.drop-visible {
  height: 40px;
  margin: 8px 0;
  opacity: 1;
  border-color: #ddd;
  font-size: 14px;
  line-height: normal;
}

.drop-zone.drop-hidden {
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  line-height: 0;
  font-size: 0;
}

.drop-zone.drop-active {
  border-color: #007bff !important;
  background-color: #e3f2fd;
}

.drop-indicator {
  color: #007bff;
  font-weight: bold;
  font-size: inherit;
  pointer-events: none;
}
</style>