<template>
  <div class="content">
    <div class="sub-title-area mb-30">
      <h2>보도자료</h2>
      <div class="breadcrumb-list">
        <ul>
          <li>
            <img :src="homeicon" alt="Home Icon">
            <p>언론에서 바라본 구미시</p>
          </li>
          <li><img :src="righticon" alt=""></li>
          <li>보도자료</li>
        </ul>
      </div>
    </div>
    <!-- 검색 폼 컴포넌트 사용 -->
    <SearchFormComponent :initialData="searchReqDTO" pageType="bodo" @search="handleSearch" @reset="handleReset" />
    <div class="search-result">
      <div class="tabs">
        <div class="flex-sp-bw mb-20 align-center">
          <div class="resultext ">
            <img :src="resulticon" alt="">
            <p>총 <b>{{ searchReqDTO.totalRecordCount }}개</b>의 보도자료가 검색되었습니다. </p>
          </div>
          <div class="flex">
            <ul class="tab-box mb-20">
              <li v-for="(tab, idx) in tabs" :key="idx" class="tab-title" :class="{ active: selectedTabId === tab.id }" @click="selectTab(tab.id)">
                <img :src="selectedTabId === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
                <p><b>{{ tab.title }}</b></p>
              </li>
            </ul>
            <div class="select-box">
              <select v-model="searchReqDTO.recordSize" @change="fnChnageReqDTO">
                <option :value="24">24개</option>
                <option :value="36">36개</option>
                <option :value="100">100개</option>
              </select>
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div v-if="searchResult.length > 0">
            <CardStyleComponent v-if="selectedTabId === 'CARD'" :name="'N'" :list="searchResult" />
            <ListStyleComponent v-if="selectedTabId === 'LIST'" :name="'N'" :list="searchResult" />
          </div>
          <div v-else class="no-results">
            <img :src="nosearch" alt="">
            <p>검색 결과가 없습니다.</p>
            <p>단어의 철자가 정확한지 확인해 주시기 바랍니다.<br>검색어의 단어 수를 줄이거나, 다른 검색어(유사어)로 검색해 보시기 바랍니다.<br>일반적으로 많이 사용하는 검색어로 다시 검색해 주시기 바랍니다.</p>
          </div>
        </div>
      </div>
      <div class="btn-group flex-end mt-40"><button type="button" class="register" @click="fnMoveTo('edit')">등록</button></div>
      <DefaultPagination class="mt-40" :search="searchReqDTO" @onChange="fnChangeCurrentPage" />
    </div>
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div>
        <p>검색 중입니다</p>
        <p>잠시만 기다려주세요</p>
      </div>
    </div>
  </div>
</template>
<script>
// COMPONENT
import SearchFormComponent from '@/views/component/SearchFormComponent.vue';
import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
import ListStyleComponent from '@/views/component/listLayout/ListStyleComponent.vue';
import DefaultPagination from '@/views/component/listLayout/DefaultPagination.vue';
// API
import { findAllNesDtasProc } from "@/resources/api/nesDta";

export default {
  components: {
    SearchFormComponent,
    DefaultPagination,
    CardStyleComponent,
    ListStyleComponent,
  },

  data() {
    return {
      // ICON
      nosearch: "client/resources/images/no_search.png",
      resulticon: "client/resources/images/icon/r-check.png",
      homeicon: 'client/resources/images/icon/home.png',
      righticon: 'client/resources/images/icon/right.png',

      // 검색용 객체 초기값
      searchDefault: {
        useSj: true,
        useCn: true,
        searchText: null,
        startYear: null,
        endYear: null,
        searchTy: "N", // 보도자료 고정
        searchCtgries: [],
        order: "rgsde",
        // 페이지네이션
        currentPage: 1, // 현재 페이지
        recordSize: 24, // 한 페이지에 표시할 데이터 개수
      },

      // URL 파라미터로부터 가져온 초기 검색 조건
      urlParamsDefault: null,

      searchReqDTO: {}, // 실제 검색에 사용되는 객체
      searchResult: [], // 검색결과

      // 목록 레이아웃
      selectedTabId: null,
      tabs: [
        {
          id: "CARD",
          title: "카드형",
          activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
          inactiveImage: "client/resources/images/list_icon01_off.png",
        },
        {
          id: "LIST",
          title: "리스트형",
          activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
          inactiveImage: "client/resources/images/list_icon02_off.png",
        },
      ],

      isInitialLoad: true, // 초기 로드 여부

      loading: false, // 로딩 상태 추가
    };
  },

  created() {
    // 초기화
    this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
    this.selectedTabId = this.tabs[0].id; // 기본 탭 설정

    // URL 파라미터에서 검색 조건 가져오기
    this.queryParamsToSearch();
  },

  mounted() {
    this.fnSearch(); // 초기 검색 실행
  },

  methods: {
    // URL 파라미터로부터 검색 조건 설정
    queryParamsToSearch() {
      let query = this.$route.query;
      if (!this.$isEmpty(query)) {
        // 기본 검색 조건 복사
        let urlParams = JSON.parse(JSON.stringify(this.searchDefault));

        const typeConverters = {
          useSj: val => val === 'true',
          useCn: val => val === 'true',
          searchCtgries: val => Array.isArray(val) ? val : (val ? val.split(',') : [])
        };

        // URL 파라미터 값 적용
        Object.entries(query).forEach(([key, value]) => {
          if (key in urlParams) {
            urlParams[key] = key in typeConverters ? typeConverters[key](value) : value;
          }
        });

        // URL 파라미터 기반 초기값 저장
        this.urlParamsDefault = urlParams;

        // 현재 검색 조건에 적용
        this.searchReqDTO = JSON.parse(JSON.stringify(urlParams));
      }
    },

    // 페이지 이동
    fnChangeCurrentPage(currentPage) {
      this.searchReqDTO.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.fnSearch();
      });
    },

    // 검색 폼 컴포넌트에서 검색 버튼 클릭 시 호출되는 메소드
    handleSearch(formData) {
      // searchTy는 항상 "N"로 유지
      formData.searchTy = "N";

      // 페이지 초기화
      formData.currentPage = 1;

      this.searchReqDTO = formData;
      this.fnSearch();
    },

    // 검색 폼 컴포넌트에서 초기화 버튼 클릭 시 호출되는 메소드
    handleReset() {
      // URL 파라미터가 있으면 그 값 사용, 없으면 기본값 사용
      if (this.urlParamsDefault) {
        this.searchReqDTO = JSON.parse(JSON.stringify(this.urlParamsDefault));
      } else {
        this.searchReqDTO = JSON.parse(JSON.stringify(this.searchDefault));
      }

      this.searchResult = []; // 검색결과 초기화
      this.fnSearch(); // 초기화 후 검색 실행
    },

    // 검색 조건이 변경된 경우
    fnChnageReqDTO() {
      this.searchReqDTO.currentPage = 1;
      this.$nextTick(() => {
        this.fnSearch();
      });
    },

    // 통합검색
    async fnSearch() {
      this.loading = true; // 로딩 시작
      try {
        const params = JSON.parse(JSON.stringify(this.searchReqDTO));

        // 카테고리 목록 처리
        if (this.searchReqDTO.searchCtgries && this.searchReqDTO.searchCtgries.length > 0) {
          params.searchCtgries = this.searchReqDTO.searchCtgries.join(',');
        } else {
          delete params.searchCtgries;
        }

        // API 호출
        const response = await findAllNesDtasProc(params);
        this.searchResult = response.data.data.nesDtas;
        this.searchReqDTO = response.data.data.search;

        window.scrollTo({ top: 0, behavior: 'smooth' });
      } catch (error) {
        this.searchResult = []; // 검색결과 초기화

        if (error.response) {
          alert(error.response.data.message);
        }
        console.error(error.message);
      } finally {
        this.loading = false; // 로딩 종료
      }
    },

    selectTab(tabId) {
      this.selectedTabId = tabId;
    },

    // 페이지 이동
    fnMoveTo(type, id) {
      const routes = {
        'list': { name: 'NewsReleaseSearch' },
        'view': { name: 'NewsReleaseDetail', query: { id } },
        'edit': { name: 'NewsReleaseInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

      if (routes[type]) {
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  },
};
</script>