<template>
  <div class="visual mb-50">
    <swiper :loop="true" :spaceBetween="30" :centeredSlides="true" :pagination="{
      type: 'progressbar',
    }" :navigation="true" :modules="modules" class="mySwiper ">
      <swiper-slide v-for="(item, index) in slides" :key="index" >
        <img :src="item.img" :alt="item.alt" />
      </swiper-slide>
      <div class="pagination">
        <div class="page-count">1/3</div>

      </div>
    </swiper>
    <div class="search-wrap">

      <div class="search-area">
        <select name="" id="">
          <option value="" selected>전체</option>
          <option value="">사진</option>
          <option value="">영상</option>
          <option value="">미디어 영상</option>
          <option value="">보도자료</option>
        </select>
        <div class="line"></div>
        <input type="text" placeholder="검색어를 입력하세요">
        <button class="search-btn"><img :src="search" alt=""></button>
      </div>
      <div class="total-search">
        <button class="total-btn">상세검색</button>
      </div>
    </div>
  </div>
  <div class="current-status mb-60">
    <div class="board w1500">
      <ul>
        <li>
          <div class="labeling"><img :src="icon1" alt=""><span>전체</span></div>
          <div class="count all">520</div>
        </li>
        <li class="line"></li>
        <li>
          <div class="labeling"><img :src="icon2" alt=""><span>사진</span></div>
          <div class="count">520</div>
        </li>
        <li class="line"></li>
        <li>
          <div class="labeling"><img :src="icon3" alt=""><span>영상</span></div>
          <div class="count">520</div>
        </li>
        <li class="line"></li>
        <li>
          <div class="labeling"><img :src="icon4" alt=""><span>미디어</span></div>
          <div class="count">520</div>
        </li>
        <li class="line"></li>
        <li>
          <div class="labeling"><img :src="icon5" alt=""><span>보도자료</span></div>
          <div class="count">520</div>
        </li>
      </ul>
      <div class="current-btn"> <button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
    </div>
  </div>
  <div class="new-update w1500">
    <div class="tabs">
        <ul>
          <li v-for="(tab, index) in tabs" :key="index" class="tab-title" :class="{ active: selectedTab === index }"
            @click="selectTab(index)">
            <img
            :src="selectedTab === index ? tab.activeImage : tab.inactiveImage"
            :alt="tab.title"
            class="tab-icon"
          />
            <p><b>{{ tab.title }}</b>&nbsp;기록물</p>
          </li>
        </ul>
      <div class="tab-content">
        <div v-if="selectedTab === 0" class="new-pic">
          <p>{{ tabs[0].content }}</p>
        </div>
        <div v-if="selectedTab === 1" class="new-video">
          <p>{{ tabs[1].content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
// Import Swiper Vue components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

import 'swiper/css/pagination';
import 'swiper/css/navigation';


// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Autoplay, Pagination, Navigation],
    };
  },
  data() {
    return {
      selectedTab: 0, // Set initial tab index to 0 (first tab)
      tabs: [
        { title: "신규 사진", content: "This is the content for Tab 1", activeImage: "client/resources/images/pic-btn-click.png", // Active tab image
        inactiveImage: "client/resources/images/pic-btn-click.png"},
        { title: "신규 영상", content: "This is the content for Tab 2",activeImage: "client/resources/images/video-btn.png", // Active tab image
        inactiveImage: "client/resources/images/video-btn.png"},
      ],
      direct: 'client/resources/images/direct-btn.png',
      search: 'client/resources/images/icon/search.png',
      icon1: 'client/resources/images/icon/icon1.png',
      icon2: 'client/resources/images/icon/icon2.png',
      icon3: 'client/resources/images/icon/icon3.png',
      icon4: 'client/resources/images/icon/icon4.png',
      icon5: 'client/resources/images/icon/icon5.png',
      slides: [
        { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
        { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
        // Add more slides as needed
      ],
      autoplay: {
        delay: 2500, // Delay in milliseconds
        disableOnInteraction: false, // Autoplay won't stop when interacting
      },
      pagination: {
        clickable: true, // Allow clicking pagination
      },
      navigation: true, // Enable navigation buttons (prev/next)
    };
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index; // Update the selected tab index
    },
  },
};
</script>

<style scoped></style>
