piratezon_new/app/pages/site-manager/item/list.vue

<template>
  <div class="admin--field-list">
    <!-- 상단 검색/액션 영역 -->
    <div class="admin--search-box">
      <div class="admin--search-form">
        <!-- <select v-model="filterStatus" @change="onSearch" class="admin--form-select admin--search-select">
          <option value="">전체 상태</option>
          <option value="Y">사용중</option>
          <option value="N">미사용</option>
        </select> -->
        <input
          v-model="searchQuery"
          type="text"
          placeholder="아이템명으로 검색"
          @keyup.enter="onSearch"
          class="admin--form-input admin--search-input"
        />
        <button @click="onSearch" class="admin--btn-small admin--btn-small-primary">검색</button>
        <button @click="resetSearch" class="admin--btn-small admin--btn-small-secondary">초기화</button>
        <div class="admin--filter-radio">
          <button
            type="button"
            class="admin--btn-small admin--btn-small-secondary filter--btn"
            :class="{ 'is-active': filterType === '' }"
            @click="selectType('')"
          >전체</button>
          <button
            type="button"
            class="admin--btn-small admin--btn-small-secondary filter--btn"
            :class="{ 'is-active': filterType === 'T' }"
            @click="selectType('T')"
          >진출권</button>
          <button
            type="button"
            class="admin--btn-small admin--btn-small-secondary filter--btn"
            :class="{ 'is-active': filterType === 'P' }"
            @click="selectType('P')"
          >포인트</button>
          <button
            type="button"
            class="admin--btn-small admin--btn-small-secondary filter--btn"
            :class="{ 'is-active': filterType === 'B' }"
            @click="selectType('B')"
          >뱃지</button>
        </div>
      </div>
      <div class="admin--search-actions">
        <button class="admin--btn-add" @click="goToCreate">+ 새 아이템 추가</button>
      </div>
    </div>

    <!-- 테이블 -->
    <div class="admin--table-wrapper">
      <table class="admin--table">
        <thead>
          <tr>
            <th style="width: 80px;">번호</th>
            <th style="width: 120px;">이미지</th>
            <th>아이템명</th>
            <th style="width: 120px;">구분</th>
            <th style="width: 120px;">포인트</th>
            <th style="width: 120px;">상태</th>
            <th style="width: 120px;">등록일</th>
            <th style="width: 120px;">관리</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="8" class="admin--table-loading">데이터를 불러오는 중...</td>
          </tr>
          <tr v-else-if="!items || items.length === 0">
            <td colspan="8" class="admin--table-empty">등록된 아이템이 없습니다.</td>
          </tr>
          <tr
            v-else
            v-for="(item, index) in items"
            :key="item.id"
            class="admin--table-row-clickable"
            @click="goToDetail(item.id)"
          >
            <td class="date">{{ totalCount - ((currentPage - 1) * perPage + index) }}</td>
            <td>
              <div v-if="item.file_path" class="item--thumb">
                <img :src="getImageUrl(item.file_path)" :alt="item.file_name || item.name" />
              </div>
              <template v-else>-</template>
            </td>
            <td class="admin--table-title">{{ item.name }}</td>
            <td>
              <span :class="['admin--badge', typeBadgeClass(item.type)]">{{ typeLabel(item.type) }}</span>
            </td>
            <td :class="[item.point ? 'point' : '']">{{ item.point !== null && item.point !== undefined ? item.point + "P" : "-" }}</td>
            <td>
              <span :class="['admin--badge', item.status_YN === 'Y' ? 'admin--badge-active' : 'admin--badge-ended']">
                {{ item.status_YN === "Y" ? "사용중" : "미사용" }}
              </span>
            </td>
            <td class="date">{{ formatDate(item.created_at) }}</td>
            <td>
              <div class="admin--table-actions">
                <button class="admin--btn-small admin--btn-blue" @click.stop="goToEdit(item.id)">
                  수정
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 페이지네이션 -->
    <div v-if="totalPages > 1" class="admin--pagination">
      <button
        v-if="totalPages > 2"
        class="admin--pagination-btn"
        :disabled="currentPage === 1"
        @click="changePage(1)"
        title="처음"
      >
        ◀◀
      </button>
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
        title="이전"
      >
        ◀
      </button>
      <button
        v-for="page in visiblePages"
        :key="page"
        class="admin--pagination-btn"
        :class="{ 'is-active': page === currentPage }"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
        title="다음"
      >
        ▶
      </button>
      <button
        v-if="totalPages > 2"
        class="admin--pagination-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(totalPages)"
        title="끝"
      >
        ▶▶
      </button>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from "vue";
  import { useRouter } from "vue-router";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const router = useRouter();
  const { get } = useApi();
  const { getImageUrl } = useImage();

  // 구분 라벨/뱃지
  const typeLabel = (t) => (t === "T" ? "진출권" : t === "P" ? "포인트" : t === "B" ? "뱃지" : "-");
  const typeBadgeClass = (t) =>
    t === "T" ? "item--ticket" : t === "P" ? "item--point" : t === "B" ? "item--badge" : "";

  const isLoading = ref(false);
  const items = ref([]);
  const currentPage = ref(1);
  const perPage = ref(10);
  const totalCount = ref(0);
  const totalPages = ref(0);

  const searchQuery = ref("");
  const filterType = ref(""); // '', T, P, B

  // 구분 필터 선택
  const selectType = (t) => {
    filterType.value = t;
    currentPage.value = 1;
    loadItems();
  };

  // 보이는 페이지 번호 계산
  const visiblePages = computed(() => {
    const pages = [];
    const maxVisible = 5;
    let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
    let end = Math.min(totalPages.value, start + maxVisible - 1);

    if (end - start < maxVisible - 1) {
      start = Math.max(1, end - maxVisible + 1);
    }
    for (let i = start; i <= end; i++) {
      pages.push(i);
    }
    return pages;
  });

  // 데이터 로드
  const loadItems = async () => {
    isLoading.value = true;

    const params = {
      page: currentPage.value,
      per_page: perPage.value,
    };
    if (searchQuery.value) params.search = searchQuery.value;
    if (filterType.value) params.type = filterType.value;

    const { data, error } = await get("/item/list", { params });

    if (error) {
      console.error("[ItemList] 목록 로드 실패:", error);
      items.value = [];
      totalCount.value = 0;
      totalPages.value = 0;
    } else if (data?.success && data?.data) {
      items.value = data.data.items || [];
      totalCount.value = data.data.total || 0;
      totalPages.value = data.data.total_pages || 0;
    }

    isLoading.value = false;
  };

  // 검색
  const onSearch = () => {
    currentPage.value = 1;
    loadItems();
  };

  // 검색 초기화
  const resetSearch = () => {
    searchQuery.value = "";
    filterType.value = "";
    currentPage.value = 1;
    loadItems();
  };

  // 페이지 변경
  const changePage = (page) => {
    if (page < 1 || page > totalPages.value) return;
    currentPage.value = page;
    loadItems();
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // 이동
  const goToCreate = () => router.push("/site-manager/item/create");
  const goToDetail = (id) => router.push(`/site-manager/item/detail/${id}`);
  const goToEdit = (id) => router.push(`/site-manager/item/edit/${id}`);

  // 날짜 포맷
  const formatDate = (dateString) => {
    if (!dateString) return "-";
    const date = new Date(dateString.replace(" ", "T"));
    if (isNaN(date.getTime())) return dateString;
    return date.toLocaleDateString("ko-KR", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    });
  };

  onMounted(() => {
    loadItems();
  });
</script>