<template>
  <div class="content main ">
    <div class="w1400">
      
       <!-- 메인비쥬얼 슬라이드-->
       <div class="community-zone mb30">
        <div class="box-out-title flex justify-between align-center">
          <p>메인비주얼</p>
          <router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
            <p class="mr5">바로가기</p>
            <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
          </router-link>
        </div>
        <div class="gall-zone">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
                <img :src="item.img" :alt="item.alt" />
              </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>
      <!-- 바로가기 -->
      <div class="community-zone mb30">
        <div class="box-out-title flex justify-between align-center">
          <p>바로가기</p>
        </div>
        <ul class="quick-link">
          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
        </ul>
      </div>
      <!-- 검색창 -->
      <div class="community-zone mb30">
        <div class="box-out-title flex justify-between align-center">
          <p>통합검색</p>
        </div>
        <div class="search-bar text-ct">
        <div class="box">
          <input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
            @keyup.enter="totalSearch" />
          <button class="icon-button search-button" @click="totalSearch">
            <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
          </button>
        </div>
       </div>
      </div>
     
      <!-- 카드뉴스 -->
      <div class="community-zone mb30">
        <div class=" ">
          <div class="box-out-title flex justify-between align-center">
            <p>카드뉴스</p>
            <router-link to="/government/BBS_MNG_000000000000027/list.page" class="shortcuts flex align-center">
              <p class="mr5">바로가기</p>
              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
            </router-link>
          </div>

          <ul class="search-list">
            <li class="li box">
              <a href="component/component_02_01.html">
                <div class="img-wrap main_1"></div>
                <div class="conts-wrap">
                  <h4 class="tit">컴포넌트</h4>
                  <p class="desc">디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드</p>
                  <div class="full-input flex justify-end">
                    <div class="btn-wrap flex align-center">
                      <p class="mr5">바로가기</p>
                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li class="li box">
              <a href="global/global_01.html">
                <div class="img-wrap main_2"></div>
                <div class="conts-wrap">
                  <h4 class="tit">기본 패턴</h4>
                  <p class="desc">핵심 서비스에서 공통으로 사용되는 과업을 기반으로 일관성있는 경험을 위한 기본 패턴 가이드</p>
                  <div class="full-input flex justify-end">
                    <div class="btn-wrap flex align-center">
                      <p class="mr5">바로가기</p>
                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li class="li box">
              <a href="service/service_01_01.html">
                <div class="img-wrap main_3"></div>
                <div class="conts-wrap">
                  <h4 class="tit">서비스 패턴</h4>
                  <p class="desc">공공웹·앱에서 제공하는 핵심서비스에 대한 사용자 플로우 와 사용자 경험 설계의 가이드</p>
                  <div class="full-input flex justify-end">
                    <div class="btn-wrap flex align-center">
                      <p class="mr5">바로가기</p>
                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
     
      <!-- 탭존 -->
      <div class="chart-zone mb30">
        <div class="box-out-title flex justify-between align-center">
          <p>탭메뉴</p>
        </div>
        <div class="box">
          <div class="tab-nav mb15">
            <ul class="flex justify-between align-center">
              <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
                ' gd-4': true,
                activeTab: activeTab === item.cd,
              }" @click="showTab(item.cd)">
                <p class="pd15">{{ item.cdNm }}</p>
              </li>
            </ul>
          </div>
          <div class="tab-content">
            <div>
              <div class="flex justify-end align-center no-gutters mb15">
                <div class="select-label gd-1 text-rg mr10">기간</div>
                <div class="gd-2">
                  <select class="full-select" v-model="searchKeyword" @change="fnCompanyInfo">
                    <option value="day">일별</option>
                    <option value="month">월별</option>
                    <option value="year">연도별</option>
                  </select>
                </div>
              </div>
              <div class="chart-wrap" ref="chartdiv">
                <ClusteredColumnChart :chartData="chartData" columnX="stats_date" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 공지사항 및 배너 -->
      <div class="community-zone flex justify-between mb50">
        <div class="gd-6 pl0">
          <div class="box-out-title flex justify-between align-center">
            <p>공지사항(목록형)</p>
            <router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
              <p class="mr5">바로가기</p>
              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
            </router-link>
          </div>
          <div class="box">
            <div class="list_news clearfix">
              <ul>
                <li class="leli">
                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
                  <span>2025.01.08</span>
                </li> 
                <li class="leli">
                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
                  <span>2025.01.08</span>
                </li> 
                <li class="leli">
                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
                  <span>2025.01.08</span>
                </li> 
              </ul>
            </div>
          </div>
        </div>
        <div class="gd-6 pr0">
          <div class="box-out-title flex justify-between align-center">
            <p>배너</p>
            <router-link to="/government/companyInfo/list.page" class=" flex align-center">
              <p class="mr5">바로가기</p>
              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
            </router-link>
          </div>
          <div class="box">

            <div class="banner-zone">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
                <img :src="item.img" :alt="item.alt" />
              </div>
            </div>
            
            <!-- <button @click="startAutoplay" type="button" class="button play" data-control="play" style="display: none;"><span>분야별 정보 슬라이드 재생</span></button>
            <button @click="stopAutoplay" type="button" class="button stop hidden" data-control="stop" style=""><span>분야별 정보 슬라이드 정지</span></button> -->
          </div>
          <div class="swiper-pagination"></div>
            <div class="swiper-button-prev button"></div>
            <div class="swiper-button-next button"></div>
        </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
import store from "../../../AppStore";

// 통합검색 관련
import queryParams from "../../../../../resources/js/queryParams";
import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";

// API
import { governmentMainProc } from "../../../../../resources/api/main";
import { sysListByPageProc } from "../../../../../resources/api/popup";
import { findFiveNotice } from "../../../../../resources/api/bbsCn";
import Swiper from 'swiper';

export default {
  name: 'SwiperComponent',
  mixins: [queryParams],
  components: {
    ClusteredColumnChart: ClusteredColumnChart,
  },
  data() {
    return {
      slides: [
        { img: 'https://via.placeholder.com/600x300?text=Slide+1', alt: 'Slide 1' },
        { img: 'https://via.placeholder.com/600x300?text=Slide+2', alt: 'Slide 2' },
        { img: 'https://via.placeholder.com/600x300?text=Slide+3', alt: 'Slide 3' },
      ],
      search: { ...defaultTotalSearchParams },
      mbrId: store.state.mbrId || null, // 사용자 아이디
      roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
      menuType: store.state.userType || null, // 메뉴 타입

      // 공지사항 top5
      noticeTop5: [],

      // 검색조건
      codeList: [],
      activeTab: "categoryTab",
      searchKeyword: "day",

      // 통계
      chartData: [],

      popupList: [],

      // 기업정보
      companyInfoList: [],
    };
  },
  created() {
    // 쿠키 초기화
    const today = new Date();
    let tomorrow = new Date(today.setDate(today.getDate() + 1));
    tomorrow.setHours(0, 0, 0, 0);
    tomorrow = new Date(tomorrow);
    if (this.$cookies.get("popup") == null) {
      this.$cookies.set("popup", [], tomorrow);
    }

    this.fnPopupList();
    this.fnCompanyInfo();
    this.fnFiveNotice();
  },
  methods: {


    showTab: function (tabName) {
      this.activeTab = tabName;
      this.searchKeyword = "day";
      this.fnCompanyInfo();
    },

    // 통합검색
    totalSearch() {
      if (this.search.searchText === "") {
        alert("검색어를 입력해주세요.");
        return;
      }
      this.search.mbrId = this.mbrId;
      this.search.roles = this.roles;
      this.search.menuType = this.menuType;
      this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
      this.$router.push({
        path: "/government/search.page",
      });
    },

    // 통계 조회
    async fnCompanyInfo() {
      let data = {
        activeTab: this.activeTab,
        searchKeyword: this.searchKeyword,
      };
      try {
        const response = await governmentMainProc(data);
        this.codeList = response.data.data.codeList;
        this.chartData = response.data.data.governmentStats;
        this.companyInfoList = response.data.data.companyInfo;
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },

    // 기업정보 상세 조회
    fnCompanyInfoViewDetail(entId) {
      this.$router.push({
        path: "/government/companyInfo/view.page",
        query: { pageId: entId },
      });
    },

    // 팝업조회(상세)
    async fnPopupList() {
      let data = {
        pageType: this.$store.state.userType,
      };
      try {
        const response = await sysListByPageProc(data);
        let popupList = response.data.data;
        if (popupList != null && popupList.length > 0) {
          this.fnShowPopup(popupList);
        }
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    // 팝업 표시
    fnShowPopup(popupList) {
      for (let popup of popupList) {
        let count = false;
        const popupCookies = this.$cookies.get("popup");
        if (popupCookies.length > 0) {
          for (let cookie of popupCookies) {
            if (popup.popupId == cookie) {
              count = true;
            }
          }
        }
        if (!count) {
          let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
          window.open(
            "/cmmn/popup.page?popupId=" + popup.popupId,
            "_blank",
            size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
          );
        }
      }
    },

    // 공지사항 최신 5개 조회
    async fnFiveNotice() {
      try {
        const params = {
          bbsMngId: "BBS_MNG_000000000000004",
        };
        const response = await findFiveNotice(params);
        this.noticeTop5 = response.data.data;
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    // 공지사항 상세페이지 이동
    fnNoticeViewDetail(bbsId) {
      this.$router.push({
        path: "/government/BBS_MNG_000000000000004/view.page",
        query: {
          pageId: bbsId,
        },
      });
    },
    stopAutoplay() {
      if (this.swiperInstance) {
        this.swiperInstance.autoplay.stop();
      }
    },
    // 자동 슬라이드 전환 시작하기
    startAutoplay() {
      if (this.swiperInstance) {
        this.swiperInstance.autoplay.start();
        this.swiperInstance.update();
      }
    },
  },
  mounted() {
    // Swiper 인스턴스 초기화
    this.swiperInstance = new Swiper('.swiper-container', {
      loop: true,  // 슬라이드 반복 여부
      autoplay: {
        delay: 2500,  // 2.5초마다 자동으로 슬라이드 전환
        disableOnInteraction: false,  // 사용자가 슬라이드 조작 후에도 자동 전환 유지
      },
      pagination: {
        el: '.swiper-pagination',  // 페이지네이션 요소
        clickable: true,  // 페이지네이션 클릭 가능
      },
      navigation: {
        nextEl: '.swiper-button-next',  // 다음 버튼
        prevEl: '.swiper-button-prev',  // 이전 버튼
      },
    });
  }
};
</script>
