<template>
  <div class="visual mb-50">
    <swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }" :pagination="{
      type: 'progressbar',
    }" :navigation="true" :modules="modules" @slideChange="onSlideChange" 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">{{ currentSlide }} / {{ totalSlides }}</div>
        <div class="btn-control">
          <button @click="play">
            <CaretRightOutlined />
          </button>
          <button @click="stop">
            <PauseOutlined />
          </button>
        </div>
      </div>
    </swiper>
    <div class="search-wrap">
      <div class="search-area">
        <select name="" id="">
          <option value="all" selected>전체</option>
          <option value="pic">사진</option>
          <option value="video">영상</option>
          <option value="media">미디어 영상</option>
          <option value="bodo">보도자료</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" @click="fnMoveTo('TotalSearch')"><a href="">상세검색</a></button>
      </div>
    </div>
  </div>
  <div class="current-status mb-60">
    <div class="board w1500">
      <ul>
        <template v-for="(item, idx) of icons" :key="idx">
          <li>
            <div class="labeling"><img :src="item.url" :alt="item.name + '아이콘'"><span>{{ item.name }}</span></div>
            <div :class="{ 'count': true, 'all': item.id === 'TOTAL' }">{{ item.rowCo }}</div>
          </li>
          <li class="line" v-if="idx < icons.length - 1"></li>
        </template>
      </ul>
      <div class="current-btn"><button><span>기록물 현황</span><img :src="direct" alt=""></button></div>
    </div>
  </div>
  <div class="new-update w1500 mb-50">
    <div class="tabs">
      <ul class="">
        <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>&nbsp;기록물</p>
        </li>
      </ul>
      <div class="tab-content">
        <template v-for="(tabContent, idx1) of tabContents" :key="idx1">
          <div v-show="tabContent.id === selectedTab" class="content-wrap">
            <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
            <div class="new-pic">
              <div v-for="(item, idx2) in tabContent.list" :key="idx2" class="box-wrap">
                <div class="box">
                  <img :src="item.hasOwnProperty('files') && item.files.length > 0 ? item.files[0].filePath : null" :alt="item.sj" class="tab-image" />
                  <div class="info">
                    <p>{{ item.sj }}</p>
                    <span>{{ item.rgsde.slice(0, -6) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
  <div class="new-update w1500 mb-50 flex-sp-bw">
    <div class="new-media">
      <div class="title mb-30">
        <h4>신규 미디어 영상</h4>
        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
      </div>
      <div class="media-wrap">
        <div v-for="(mediaContent, index) in mediaContent" :key="index" class="media-box">
          <img :src="mediaContent.url" :alt="mediaContent.title" class="media-image" />
          <div class="info">
            <p>{{ mediaContent.content }}</p>
            <span>{{ mediaContent.date }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="new-bodo">
      <div class="title mb-30">
        <h4>신규 미디어 영상</h4>
        <router-link :to="{ path: '/' }" class="gopage">더보기</router-link>
      </div>
      <ul>
        <li v-for="(bodoContent, index) in bodoContent" :key="index" class="info">
          <p>{{ bodoContent.content }}</p>
          <span>{{ bodoContent.date }}</span>
        </li>
      </ul>
    </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 { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';

// import required modules
import { Autoplay, Pagination, Navigation } from 'swiper/modules';

// 메인화면 조회
import { findAllSttusesProc } from "../../../resources/api/main";

// 유투브 유틸
import { getYouTubeThumbnail } from '../../../resources/js/youtubeUtils';

export default {
  components: {
    Swiper,
    SwiperSlide,
    PauseOutlined,
    CaretRightOutlined,
  },
  setup() {
    return {
      modules: [Autoplay, Pagination, Navigation],
    };
  },
  data() {
    return {
      selectedTab: "newPhoto", // Set initial tab index to 신규사진기록물 (first tab)
      tabs: [
        {
          id: "newPhoto",
          title: "신규 사진",
          activeImage: "client/resources/images/mCont_ico1_on.png", // Active tab image
          inactiveImage: "client/resources/images/mCont_ico1_off.png",
        },
        {
          id: "newVideo",
          title: "신규 영상",
          activeImage: "client/resources/images/mCont_ico2_on.png", // Active tab image
          inactiveImage: "client/resources/images/mCont_ico2_off.png",
        },
      ],
      tabContents: [], // 신규 사진, 영상 기록물
      mediaContent: [], // 신규 미디어 영상
      bodoContent: [], // 신규 보도자료
      direct: 'client/resources/images/direct-btn.png',
      search: 'client/resources/images/icon/search.png',
      icons: [
        {
          id: "TOTAL",
          name: "전체",
          url: 'client/resources/images/icon/icon1.png',
        },
        {
          id: "dcry_photo",
          name: "사진",
          url: 'client/resources/images/icon/icon2.png',
        },
        {
          id: "dcry_vido",
          name: "영상",
          url: 'client/resources/images/icon/icon3.png',
        },
        {
          id: "media_vido",
          name: "미디어",
          url: 'client/resources/images/icon/icon4.png',
        },
        {
          id: "nes_dta",
          name: "보도자료",
          url: '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
      ],
      currentSlide: 1,   // To track the current slide
      totalSlides: 3,

      navigation: true, // Enable navigation buttons (prev/next)
    };
  },
  created() {
    this.fnFindAllSttuses();
  },
  mounted() {
    // Store the swiper instance when it's ready
    this.totalSlides = this.slides.length;
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index; // Update the selected tab index
    },
    play() {
      const swiper = this.$refs.swiper.swiper;
      if (swiper && swiper.autoplay) {
        swiper.autoplay.start(); // Start autoplay
      } else {
        console.warn('Swiper instance or autoplay is not available');
      }
    },
    // Method to stop autoplay
    stop() {
      const swiper = this.$refs.swiper.swiper;
      if (swiper && swiper.autoplay) {
        swiper.autoplay.stop();  // Stop autoplay
      } else {
        console.warn('Swiper instance or autoplay is not available');
      }
    },
    // Method to update the current slide and total slides
    onSlideChange() {
      const swiper = this.$refs.swiper.swiper;
      if (swiper) {
        this.currentSlide = swiper.realIndex + 1; // Get current slide (1-based index)
      }
    },
    // 메인화면 정보 조회
    async fnFindAllSttuses() {
      try {
        const response = await findAllSttusesProc();
        if (response.data.status == 200) {
          let dcrySttuses = response.data.data.dcrySttuses;
          dcrySttuses.forEach(item => {
            const matchingIcon = this.icons.find(icon => icon.id === item.iemNm);
            if (matchingIcon) matchingIcon.rowCo = item.rowCo;
          });

          let photoDcrys = response.data.data.photoDcrys;
          this.tabContents.push({ id: 'newPhoto', list: photoDcrys });

          let vidoDcrys = response.data.data.vidoDcrys;
          this.tabContents.push({ id: 'newVideo', list: vidoDcrys });

          let mediaVidos = response.data.data.mediaVidos;
          this.mediaContent = this.onChangeList(mediaVidos);

          let nesDtas = response.data.data.nesDtas;
          this.bodoContent = this.onChangeList(nesDtas);
        } else {
          alert(response.data.message);
        }
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    // 목록 변환
    onChangeList(list) {
      let resultArr = [];

      for (let item of list) {
        let url = null;

        if (item.hasOwnProperty('files')) {
          if (item.files.length > 0) {
            url = item.files[0].filePath
          }
        } else {
          url = getYouTubeThumbnail(item.link);
        }

        resultArr.push({
          content: item.sj,
          date: item.rgsde.slice(0, -6),
          url: url
        });
      }

      return resultArr;
    },

    // 페이지 이동
    fnMoveTo(page) {
      this.$router.push({
        name: page,
        query: {},
      });
    }
  },
};
</script>
<style scoped></style>
