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

<template>
  <div class="admin--branch-list">
    <!-- 상단 버튼 -->
    <div class="admin--search-box">
      <div class="admin--search-form"></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></th>
            <th style="">번호</th>
            <th style="width: 70%">분야</th>
            <th>가중치</th>
            <th>등록일</th>
            <th>관리</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="6" class="admin--table-loading">데이터를 불러오는 중...</td>
          </tr>
          <tr v-else-if="!branches || branches.length === 0">
            <td colspan="6" class="admin--table-empty">등록된 낚시분야가 없습니다.</td>
          </tr>
          <tr v-else v-for="(branch, index) in branches" :key="branch.id">
            <td>{{ totalCount - ((currentPage - 1) * perPage + index) }}</td>
            <td class="admin--table-title">{{ branch.name }}</td>
            <!-- <td>{{ branch.main_phone }}</td>
            <td>{{ branch.address }}</td> -->
            <td>
              <button
                class="admin--toggle-btn"
                :class="{ 'is-active': branch.is_active == 1 }"
                @click="toggleActive(branch.id, branch.is_active)"
              >
                {{ branch.is_active == 1 ? "사용" : "비사용" }}
              </button>
            </td>
            <td>
              <div class="admin--table-actions">
                <button
                  class="admin--btn-small admin--btn-small-primary"
                  @click="goToEdit(branch.id)"
                >
                  수정
                </button>
                <button
                  class="admin--btn-small admin--btn-small-danger"
                  @click="deleteBranch(branch.id)"
                >
                  삭제
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 페이지네이션 -->
    <div v-if="totalPages > 1" class="admin--pagination">
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        이전
      </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)"
      >
        다음
      </button>
    </div>

    <!-- 알림 모달 -->
    <AdminAlertModal
      v-if="alertModal.show"
      :title="alertModal.title"
      :message="alertModal.message"
      :type="alertModal.type"
      @confirm="handleAlertConfirm"
      @cancel="handleAlertCancel"
      @close="closeAlertModal"
    />
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import AdminAlertModal from "~/components/admin/AdminAlertModal.vue";

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

  const router = useRouter();
  const { get, del, post } = useApi();

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

  // 알림 모달
  const alertModal = ref({
    show: false,
    title: "알림",
    message: "",
    type: "alert",
    onConfirm: null,
  });

  // 알림 모달 표시
  const showAlert = (message, title = "알림") => {
    alertModal.value = {
      show: true,
      title,
      message,
      type: "alert",
      onConfirm: null,
    };
  };

  // 확인 모달 표시
  const showConfirm = (message, onConfirm, title = "확인") => {
    alertModal.value = {
      show: true,
      title,
      message,
      type: "confirm",
      onConfirm,
    };
  };

  // 알림 모달 닫기
  const closeAlertModal = () => {
    alertModal.value.show = false;
  };

  // 알림 모달 확인
  const handleAlertConfirm = () => {
    if (alertModal.value.onConfirm) {
      alertModal.value.onConfirm();
    }
    closeAlertModal();
  };

  // 알림 모달 취소
  const handleAlertCancel = () => {
    closeAlertModal();
  };

  // 보이는 페이지 번호 계산
  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 loadBranches = async () => {
    isLoading.value = true;

    const params = {
      page: currentPage.value,
      per_page: perPage.value,
    };

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

    console.log("[BranchList] API 응답:", { data, error });

    // API 응답: { success: true, data: { items, total }, message }
    if (data?.success && data?.data) {
      branches.value = data.data.items || [];
      totalCount.value = data.data.total || 0;
      totalPages.value = Math.ceil(totalCount.value / perPage.value);
      console.log("[BranchList] 로드 성공:", branches.value.length);
    }

    isLoading.value = false;
  };

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

  // 낚시분야 등록 페이지로 이동
  const goToCreate = () => {
    router.push("/site-manager/field/create");
  };

  // 낚시분야 수정 페이지로 이동
  const goToEdit = (id) => {
    router.push(`/site-manager/field/edit/${id}`);
  };

  // 낚시분야 삭제
  const deleteBranch = (id) => {
    showConfirm(
      "정말 삭제하시겠습니까?",
      async () => {
        const { data, error } = await del(`/field/${id}`);

        if (error || !data?.success) {
          showAlert(error?.message || data?.message || "삭제에 실패했습니다.", "오류");
        } else {
          showAlert(data.message || "낚시분야가 삭제되었습니다.", "성공");
          loadBranches();
        }
      },
      "낚시분야 삭제"
    );
  };

  // 사용/비사용 토글
  const toggleActive = (id, currentStatus) => {
    console.log("[toggleActive] 호출:", { id, currentStatus });
    const statusText = currentStatus == 1 ? "비사용" : "사용";

    showConfirm(
      `낚시분야을 ${statusText} 상태로 변경하시겠습니까?`,
      async () => {
        console.log("[toggleActive] API 호출:", `/field/${id}/toggle-active`);

        // POST 방식으로 변경 (PATCH 대신)
        const { data, error } = await post(`/field/${id}/toggle-active`);

        console.log("[toggleActive] API 응답:", { data, error });

        if (error || !data?.success) {
          console.error("[toggleActive] 에러 상세:", error);
          showAlert(
            error?.message || data?.message || "상태 변경에 실패했습니다.",
            "오류"
          );
        } else {
          showAlert(data.message || "낚시분야 상태가 변경되었습니다.", "성공");
          loadBranches();
        }
      },
      "상태 변경"
    );
  };

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