<template>
  <div class="content">
    <div class="sub-title-area mb-30">
      <h2>영상 기록물</h2>
      <div class="breadcrumb-list">
        <ul>
          <!-- Bind the image source dynamically for homeicon -->
          <li><img :src="homeicon" alt="Home Icon">
            <p>기록물</p>
          </li>
          <li><img :src="righticon" alt=""></li>
          <li>영상 기록물</li>
        </ul>
      </div>
    </div>
    <div action="search" class="search-form form ">
      <dl>
        <dd class="mb-15">
          <p>검색범위</p>
          <ul>
            <li>
              <input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions('scope')" />
              <label for="allScope">전체</label>
            </li>
            <li v-for="(scope, idx) in searchType" :key="idx">
              <input type="checkbox" :id="idx" :name="searchType" :value="scope.key" v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
              <label :for="idx">{{ scope.value }}</label>
            </li>
          </ul>
        </dd>
        <dd class="mb-15">
          <p>검색어</p>
          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div>
        </dd>
        <dd class="mb-15">
          <p>생산연도</p>
          <input type="date" v-model="searchReqDTO.startYear">
          <p class="mark">~</p>
          <input type="date" v-model="searchReqDTO.endYear">
        </dd>
        <dd class="mb-20">
          <p>카테고리</p>
          <ul>
            <li v-for="(category, idx) of categorys" :key="idx">
              <input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId" v-model="searchReqDTO.searchCtgry" />
              <label :for="category.ctgryId">{{ category.ctgryNm }}</label>
            </li>
          </ul>
        </dd>
        <dd class="mb-15">
          <p>정렬</p>
          <ul>
            <li v-for="(order, idx) of orders" :key="idx">
              <input type="radio" :id="order.key" name="orders" :value="order.key" v-model="searchReqDTO.order" />
              <label :for="order.key">{{ order.value }}</label>
            </li>
          </ul>
        </dd>
        <div class="btn-group">
          <button class="reset"><img :src="reseticon" alt="">
            <p>초기화</p>
          </button>
          <button class="search"><img :src="searchicon" alt="">
            <p>검색</p>
          </button>
        </div>
      </dl>
    </div>
    <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>{{ count }}개</b>의 영상 기록물이 검색되었습니다. </p>
          </div>
          <div class="flex ">
            <ul class="tab-box mb-20">
              <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">
                <img :src="selectedTab === 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="itemsPerPage" @change="changeItemsPerPage">
                <option :value="5" selected>5개</option>
                <option :value="10">10개</option>
                <option :value="15">15개</option>
              </select>
            </div>
          </div>
        </div>
        <div class="tab-content">
          <!-- Loop through tabContents, and only display content that matches selectedTab -->
          <div v-for="(tabContent, idx) in tabContents" :key="idx">
            <!-- Display content only if the tab's ID matches the selectedTab -->
            <div v-show="tabContent.id === selectedTab">
              <!-- 카드형 Section (Card Layout) -->
              <div v-if="tabContent.viewType === 'card'">
                <ul class="card-wrap">
                  <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
                    <div class="result-box">
                      <!-- Main Image Section -->
                      <div class="main-img">
                        <img :src="resultitem.img" alt="" class="tab-image" />
                      </div>
                      <!-- Text Section -->
                      <div class="text-box">
                        <router-link :to="{ path: '/VideoHistoryDetail.page' }">
                          <h5>{{ resultitem.title }}</h5>
                        </router-link>
                        <p class="address">{{ resultitem.address }}</p>
                        <p class="text">{{ resultitem.content }}</p>
                        <div class="mb-20">
                          <ul class="category">
                            <li v-if="resultitem.category1" class="category1">카테고리1</li>
                            <li v-if="resultitem.category2" class="category2">카테고리2</li>
                          </ul>
                        </div>
                        <div class="date">
                          <ul>
                            <li>생산연도 <b>{{ resultitem.year }}</b></li>
                            <li>|</li>
                            <li>등록 <b>{{ resultitem.date }}</b></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Empty State if no results in paginatedItems -->
                <div v-if="paginatedItems.length === 0" class="no-results">
                  <p>등록된 게시물이 없습니다.</p>
                </div>
              </div>
              <!-- 리스트형 Section (List Layout) -->
              <div v-if="tabContent.viewType === 'list'">
                <ul class="list-wrap">
                  <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
                    <div class="text-box">
                      <router-link :to="{ path: '/VideoHistoryDetail.page' }">
                        <h5>{{ resultitem.title }}</h5>
                      </router-link>
                      <p class="address">{{ resultitem.address }}</p>
                      <div class="flex-sp-bw">
                        <div class="mb-20">
                          <ul class="category">
                            <li v-if="resultitem.category1" class="category1">카테고리1</li>
                            <li v-if="resultitem.category2" class="category2">카테고리2</li>
                          </ul>
                        </div>
                        <div class="date ">
                          <ul>
                            <li>생산연도 <b>{{ resultitem.year }}</b></li>
                            <li>|</li>
                            <li>등록 <b>{{ resultitem.date }}</b></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Empty State if no results in paginatedItems -->
                <div v-if="paginatedItems.length === 0" class="no-results">
                  <p>등록된 게시물이 없습니다.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-group flex-end mt-40"><button class="register"> <router-link :to="{ path: '/VideoHistoryInsert.page' }">등록</router-link></button></div>
      <div class="pagination flex-center mt-40">
        <!-- Previous and Next Page Buttons -->
        <button>
          <DoubleLeftOutlined />
        </button>
        <button @click="previousPage" :disabled="currentPage === 1">
          <LeftOutlined />
        </button>
        <button class="page-number clicked">1</button>
        <button @click="nextPage" :disabled="currentPage === totalPages">
          <RightOutlined />
        </button>
        <button>
          <DoubleRightOutlined />
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
import { findAllCategoryProc } from "../../../resources/api/category"; // 카테고리 목록 검색

export default {
  components: {
    DoubleLeftOutlined,
    LeftOutlined,
    RightOutlined,
    DoubleRightOutlined,
  },
  data() {
    return {
      selectedTab: 1,
      // 검색용 객체
      searchReqDTO: {
        searchType: [],
        searchText: null,
        startYear: null,
        endYear: null,
        searchTy: null,
        searchCtgry: [],
        order: "rgsde",
      },
      tabs: [

        {
          id: 1,
          title: "카드형",
          activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
          inactiveImage: "client/resources/images/list_icon01_off.png",
        },
        {
          id: 2,
          title: "리스트형",
          activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
          inactiveImage: "client/resources/images/list_icon02_off.png",
        },
      ],
      tabContents: [
        { id: 1, viewType: 'card', list: [{ sj: 'Item 1', rgsde: '2025-03-01', files: [{ filePath: 'image1.png' }] }] },
        { id: 2, viewType: 'list', list: [{ sj: 'Item 2', rgsde: '2025-03-02', files: [{ filePath: 'image2.png' }] }] },
      ],
      paginatedItems: [],
      resultitems: [
        {
          img: 'client/resources/images/img6.png',
          title: '영상 기록물 제목',
          address: '경상북도 구미시 송정대로 55',
          content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
          category1: true,
          category2: true,
          year: 2020,
          date: '2021-01-01'
        },

      ],
      currentPage: 1, // Current page number
      itemsPerPage: 5,
      resulticon: "client/resources/images/icon/r-check.png",
      homeicon: 'client/resources/images/icon/home.png',
      searchicon: 'client/resources/images/icon/search.png',
      reseticon: 'client/resources/images/icon/reset.png',
      righticon: 'client/resources/images/icon/right.png',
      count: 23,
      checkOptions: [
        '전체',
        '사진',
        '영상',
        '미디어 영상',
        '보도자료',
      ],
      checkOptions2: [
        '전체',
        '제목',
        '내용',
        '주소',
      ],
      checkOptions3: [
        '카테고리1',
        '카테고리2',
        '카테고리3',
        '카테고리4',
        '카테고리5',
      ],
      checkOptions4: [
        '최신',
        '인기',
      ],
      isChkAllScope: false, // 검색범위 전체 체크 여부
      searchType: [
        { key: "sj", value: "제목" },
        { key: "cn", value: "내용" },
        { key: "adres", value: "주소" },
      ], // 검색범위 목록
      categorys: [], // 카테고리 목록
      orders: [
        { key: "rgsde", value: "최신" },
        { key: "rdcnt", value: "인기" },
      ], // 정렬 목록
    };
  },
  computed: {
    // Total number of pages
    totalPages() {
      return Math.ceil(this.resultitems.length / this.itemsPerPage);
    },

    // Paginated items based on current page and items per page
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.resultitems.slice(start, end);
    },
  },
  created() {
    // 초기 데이터 세팅
    this.isChkAllScope = true;
    this.searchReqDTO.searchType = this.searchType.map(item => item.key);
    this.searchReqDTO.order = this.orders[0].key

    this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
  },
  methods: {
    selectTab(tabId) {
      this.selectedTab = tabId; // Update the selected tab index
    },
    // Change the number of items displayed per page
    changeItemsPerPage() {
      this.currentPage = 1; // Reset to first page when changing items per page
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },

    // Go to the next page
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    isChkAllScope: false, // 검색범위 전체 체크 여부
    searchType: [
      { key: "sj", value: "제목" },
      { key: "cn", value: "내용" },
      { key: "adres", value: "주소" },
    ], // 검색범위 목록
    categorys: [], // 카테고리 목록
    orders: [
      { key: "rgsde", value: "최신" },
      { key: "rdcnt", value: "인기" },
    ], // 정렬 목록

    async fnFindCategorys() {
      try {
        const response = await findAllCategoryProc();
        this.categorys = response.data.data.ctgry;
      } catch (error) {
        if (error.response) {
          console.log("에러 응답:", error.response.data);
        }
        console.error("Error:", error);
      }
    },

    // 통합검색
    async fnFindAllDatas() {
      try {
        let params = {};
        if (this.searchReqDTO.searchRecord.length > 0) {
          params.searchRecords = this.searchReqDTO.searchRecord.join(',');
        }
        if (this.searchReqDTO.searchType.length > 0) {
          params.searchTypes = this.searchReqDTO.searchType.join(',');
        }
        if (this.searchReqDTO.searchCtgry.length > 0) {
          params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
        }
        params.searchText = this.searchReqDTO.searchText;
        params.startYear = this.searchReqDTO.startYear;
        params.endYear = this.searchReqDTO.endYear;
        params.order = this.searchReqDTO.order;

        // API 호출
        const response = await findAllDatas(params);
        this.searchResult = response.data.data.searchResult;
      } catch (error) {
        if (error.response) {
          console.log("에러 응답:", error.response.data);
        }
        console.error("Error:", error);
      }
    },
  },



};
</script>
<style scoped></style>