<template>
  <div>
    <div v-for="(lists, idx) of lists" :key="lists.sanctnId || idx" class="draggable-item-wrapper">
      <div class="drop-zone" @dragover.prevent="handleDragOver($event, idx)" @dragenter.prevent="handleDragEnter($event, idx)" @dragleave="handleDragLeave($event, idx)" @drop.prevent="handleDrop($event, idx)" :class="{
        'drop-active': currentDropTarget === idx,
        'drop-visible': isDragging && shouldShowDropZone(idx),
        'drop-hidden': isDragging && !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': currentDraggedIndex === idx }">
        <select class="form-select" v-model="lists.sanctnSe" style="width: 110px;" @mousedown.stop>
          <option v-for="(item, idx) of approvalCodes" :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="removeApproval(idx)" @mousedown.stop>
            <CloseOutlined />
          </button>
        </div>
      </div>
    </div>
    <!-- 마지막 드롭존 -->
    <div class="drop-zone" @dragover.prevent="handleDragOver($event, lists.length)" @dragenter.prevent="handleDragEnter($event, lists.length)" @dragleave="handleDragLeave($event, lists.length)" @drop.prevent="handleDrop($event, lists.length)" :class="{
      'drop-active': currentDropTarget === lists.length,
      'drop-visible': isDragging && shouldShowLastDropZone(),
      'drop-hidden': isDragging && !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: () => [],
    }
  },

  emits: ['update:lists', 'delSanctn'],

  data() {
    return {
      approvalCodes: [], // 결재 코드 목록
      currentDraggedIndex: null,
      currentDropTarget: null,
    }
  },

  computed: {
    // 드래그 중인지 여부
    isDragging() {
      return this.currentDraggedIndex !== null;
    },
  },

  async created() {
    this.loadApprovalCodes(); // 코드 목록 초기화
  },

  methods: {
    // 결재 코드 목록 로드
    async loadApprovalCodes() {
      try {
        this.approvalCodes = await this.$findChildCodes('sanctn_code');
      } catch (error) {
        console.error('결재 코드 로드 실패:', error);
        this.approvalCodes = [];
      }
    },

    // 드롭존 표시 여부 계산
    shouldShowDropZone(targetIndex) {
      if (!this.isDragging) return true;

      // 현재 드래그 중인 아이템의 앞뒤 드롭존은 숨김
      const adjacentIndexes = [this.currentDraggedIndex, this.currentDraggedIndex + 1];
      return !adjacentIndexes.includes(targetIndex);
    },

    // 마지막 드롭존 표시 여부 계산
    shouldShowLastDropZone() {
      if (!this.isDragging) return true;

      // 마지막 아이템을 드래그 중이면 마지막 드롭존 숨김
      return this.currentDraggedIndex !== this.lists.length - 1;
    },

    // 드래그 시작
    handleDragStart(itemIndex, event) {
      this.currentDraggedIndex = itemIndex;
      event.dataTransfer.effectAllowed = 'move';
      event.dataTransfer.setData('text/plain', itemIndex.toString());
    },

    // 드래그 오버 (드롭 허용)
    handleDragOver(event, dropIndex) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
    },

    // 드래그 진입
    handleDragEnter(event, dropIndex) {
      if (this.isDragging) {
        this.currentDropTarget = dropIndex;
      }
    },

    // 드래그 떠남
    handleDragLeave(event, dropIndex) {
      const dropZone = event.currentTarget;
      const rect = dropZone.getBoundingClientRect();
      const { clientX: x, clientY: y } = event;

      // 드롭존 영역을 완전히 벗어났는지 확인
      const isOutside = x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;

      if (isOutside && this.currentDropTarget === dropIndex) {
        this.currentDropTarget = null;
      }
    },

    // 드롭 처리
    handleDrop(event, dropIndex) {
      if (!this.isDragging || this.currentDraggedIndex === dropIndex) {
        this.resetDragState();
        return;
      }

      this.reorderApprovalList(dropIndex);
      this.resetDragState();
    },

    // 드래그 종료
    handleDragEnd() {
      this.resetDragState();
    },

    // 결재 목록 재정렬
    reorderApprovalList(dropIndex) {
      let finalDropIndex = dropIndex;

      // 드래그한 아이템이 드롭 위치보다 앞에 있으면 인덱스 조정
      if (this.currentDraggedIndex < dropIndex) {
        finalDropIndex = dropIndex - 1;
      }

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

      // 결재 순서 재설정
      this.updateApprovalOrder(reorderedList);
      this.$emit('update:lists', reorderedList);
    },

    // 결재 순서 업데이트
    updateApprovalOrder(approvalList) {
      approvalList.forEach((item, index) => {
        item.sanctnOrdr = index + 1;
      });
    },

    // 결재자 삭제
    removeApproval(itemIndex) {
      this.$emit('delSanctn', itemIndex);
    },

    // 드래그 상태 초기화
    resetDragState() {
      this.currentDraggedIndex = null;
      this.currentDropTarget = 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;
  cursor: grab;
}

.draggable-item:active {
  cursor: grabbing;
}

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

.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;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

.drop-indicator {
  color: #007bff;
  font-weight: bold;
  font-size: inherit;
  pointer-events: none;
  user-select: none;
}

.addapproval {
  margin-bottom: 8px;
}

.addapproval:last-child {
  margin-bottom: 0;
}
</style>