<template>
    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
      <div class="modal-content modal-scroll">
        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
        <button class="close-btn" @click="closeModal">✖</button>

        <!-- 연차 목록 -->
        <div class="modal-body" v-if="mergedVacations.length > 0">
          <ol class="vacation-list">
            <li
              v-for="(vac, index) in mergedVacations"
              :key="vac._expandIndex"
              class="vacation-item"
            >
              <!-- Used 항목만 인덱스 표시 -->
              <span v-if="vac.category === 'used'" class="vacation-index">
                {{ usedVacationIndexMap[vac._expandIndex] }})
              </span>

              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
                {{ vac.category === 'used' ? '-' : '+' }}
              </span>

              <span
                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
                class="vacation-date"
              >
                {{ formatDate(vac.date) }}
              </span>
            </li>
          </ol>
        </div>

        <!-- 연차 데이터 없음 -->
        <p v-else class="no-data">
          🚫 사용한 연차가 없습니다.
        </p>
      </div>
    </div>
  </template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";

const props = defineProps({
  isOpen: Boolean,
  myVacations: {
    type: Array,
    default: () => [],
  },
  receivedVacations: {
    type: Array,
    default: () => [],
  },
  userColors: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["close"]);

/**
 * 1) Used 휴가를 used_quota만큼 펼치기
 *    - category: "used"
 *    - code: 휴가 코드(예: LOCVACTYP)
 *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
 */
let globalCounter = 0; // 확장 시 사용할 전역 카운터
const usedVacations = computed(() => {
  const result = [];
  props.myVacations.forEach((v) => {
    const count = v.used_quota || 1;
    for (let i = 0; i < count; i++) {
      result.push({
        ...v,
        category: "used",
        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
        _expandIndex: globalCounter++,
      });
    }
  });
  return result;
});

/**
 * 2) Received 휴가: category: "received"
 */
const receivedVacations = computed(() =>
  props.receivedVacations.map((v) => ({
    ...v,
    category: "received",
  }))
);

/**
 * 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
 *    - type === "700103"이면 +1
 *    - 그 외이면 +0.5
 */
const sortedUsedVacationsAsc = computed(() => {
  return [...usedVacations.value].sort((a, b) => {
    return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
  });
});

const usedVacationIndexMap = computed(() => {
  let cumulative = 0;
  const map = {};
  sortedUsedVacationsAsc.value.forEach((item) => {
    const increment = item.type === "700103" ? 1 : 0.5;
    cumulative += increment;
    map[item._expandIndex] = cumulative;
  });
  return map;
});

/**
 * 4) 최종 표시할 merged 리스트 (Used + Received)
 *    - 날짜 내림차순 정렬 (최신 → 과거)
 */
const mergedVacations = computed(() => {
  const all = [...usedVacations.value, ...receivedVacations.value];
  // 날짜 내림차순 + 확장 인덱스 내림차순
  all.sort((a, b) => {
    const dateDiff = new Date(b.date) - new Date(a.date);
    if (dateDiff !== 0) return dateDiff;
    return b._expandIndex - a._expandIndex;
  });
  return all;
});

/** 날짜 포맷 (YYYY-MM-DD) */
const formatDate = (dateString) => {
  if (!dateString) return "";
  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
  return dateString.substring(0, 10);
};


/** 모달 닫기 */
const closeModal = () => {
  emit("close");
};
</script>

  <style scoped>
  /* 모달 본문 */
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 400px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
  }

  /* 닫기 버튼 */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
  }

  /* 리스트 기본 스타일 */
  .vacation-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
  }

  /* 리스트 아이템 */
  .vacation-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 5px 10px;
    border-radius: 5px;
    background: #f9f9f9;
  }

  /* 인덱스 (연차 사용 개수) */
  .vacation-index {
    font-weight: bold;
    font-size: 16px;
    margin-right: 8px;
    color: #333;
  }

  /* "-" 빨간색 */
  .minus-symbol {
    color: red;
    font-weight: bold;
    margin-right: 8px;
  }

  /* "+" 파란색 */
  .plus-symbol {
    color: blue;
    font-weight: bold;
    margin-right: 8px;
  }

  /* 날짜 스타일 */
  .vacation-date {
    font-size: 16px;
    color: #333;
  }

  /* 연차 데이터 없음 */
  .no-data {
    text-align: center;
    font-size: 14px;
    color: gray;
    margin-top: 10px;
  }
  </style>
