<template>
    <div class="main-page">
        <section class="main-sec sec1">
            <!-- <div class="main-content"> -->
            <div class="flex">
                <!-- 메인비주얼 -->
                <div class="main-box">
                    <div class="w1400">
                        <div class="main-box-wrap">
                            <!-- 공지사항 배너 -->
                            <div class="main-notice">
                                <h2> <i class="fa-solid fa-volume-high" style="color: #ffffff;"></i>공지사항</h2>
                                <swiper :direction="'vertical'" :loop="false" :spaceBetween="8" :slidesPerView="1"
                                    :centeredSlides="false" :navigation="false" :modules="modules"
                                    class="mySwiper swiper-notice" :autoplay="{
                                        delay: 3000,
                                        disableOnInteraction: false,
                                    }">
                                    <swiper-slide v-for="(item, idx) in noticeListForBanner" :key="idx"
                                        @click="noticeSelectOnePage(item)" class="slide1">
                                        <p class="main-notice-top2">{{ item.post_title }}</p>
                                    </swiper-slide>
                                </swiper>
                            </div>
                            <!-- 메인 텍스트 -->
                            <div class="main-text">
                                <p>모두를 위한 맞춤 교육<br><span>AI 디지털교과서</span></p>
                            </div>
                            <!-- 메인 배너 -->
                            <div class="main-benner">
                                <swiper :pagination="{
                                    clickable: true,
                                }" :modules="modules" class="mySwiper main-benner-sw" loop="true" :autoplay="{
    delay: 3000,
    disableOnInteraction: false,
}"> <swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main-slide3.png" alt=""></swiper-slide>
                                    <swiper-slide class="main-benner-img"><img
                                            src="../../../../resources/jpg/main-slide2.png" alt=""></swiper-slide>
                                    <swiper-slide class="main-benner-img"><img
                                            src="../../../../resources/jpg/main-slide1.png" alt=""></swiper-slide>


                                </swiper>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- </div> -->
            </div>
        </section>
        <section class="main-sec sec1">
            <div class="main-content">
                <div class="flex">
                    <!-- 메인 퍼즐 -->
                    <div class="main-content-wrap">
                        <div class="w1400">
                            <div class="main-puzzle-container">
                                <div class="main-wrap-grid">
                                    <div class="main-grid-name">
                                        <h3>공지사항</h3>
                                        <button @click="goToNotice">+ 더보기</button>
                                        <!-- <input type="button" value="+ 더보기"> -->
                                    </div>
                                    <div class="m-p-table">
                                        <table>
                                            <!-- <tr v-for="(noticeOne, idx) in noticeList" :key="idx" @click="postSelectOnePage(item)"></tr> -->
                                            <tr v-for="(noticeOne, idx) in noticeList" :key="idx"
                                                @click="noticeSelectOnePage(noticeOne)">
                                                <td>
                                                    <p>{{ noticeOne.post_title }}</p>
                                                    <p>{{ noticeOne.rgtr_id }} l {{ yyyymmdd(noticeOne.reg_dt) }}</p>

                                                </td>
                                            </tr>

                                        </table>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-5 ">
                                    <div class="main-position">
                                        <a href="/Technology.page">
                                            <img src="../../../../resources/jpg/main-pu3.png" alt="">
                                            <button class="main-grid-box">기술문서</button>
                                        </a>
                                    </div>
                                </div>

                                <div class="main-wrap-grid-3 ">
                                    <div class="main-position">
                                        <a href="/Data.page?type=main">
                                            <img src="../../../../resources/jpg/main-box.png" alt="">
                                            <button class="main-grid-box">가이드라인</button>
                                        </a>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-4 ">
                                    <div class="main-position">
                                        <a href="/Data.page">
                                            <img src="../../../../resources/jpg/main-pu4.png" alt="">
                                            <button class="main-grid-box">자료집</button>
                                        </a>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-2 ">
                                    <div class="main-position">
                                        <a @click="showAlert">
                                            <img src="../../../../resources/jpg/fille.png" alt="">
                                            <!-- <input type="button" value="네트워킹" class="m-p-ai"> -->
                                            <button class="main-grid-box">네트워킹</button>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="main-sec sec1">
            <div class=" flex">
                <!-- 메인 홍보/뉴스 -->
                <div v-show="isModalOpen" class="news-modal">
                    <!-- <div class="modal-content" ref="modalInner"> -->
                    <div class="modal-content">
                        <div ref="modalInner"></div>
                        <!-- <iframe width="100%" height="80%" :src="videoUrl" title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen></iframe> -->
                        <!-- 모달 닫기 버튼 -->
                        <button @click="closeModal">닫기</button>
                    </div>
                </div>
                <div class="main-content-news">
                    <div class="w1400">
                        <div class="main-wrap-news">
                            <h3>홍보/뉴스</h3>
                            <div class="main-wrap-news-hidden">
                                <swiper ref="mySwiper" :navigation="true" :pagination="false" :slidesPerView="3"
                                    :mousewheel="true" :initialSlide="2" :centeredSlides="false" :spaceBetween="55"
                                    :loop="true" :breakpoints="{
                                        200: { slidesPerView: 1 },
                                        300: { slidesPerView: 1 },
                                        479: { slidesPerView: 1 },
                                        768: { slidesPerView: 2 },
                                        1023: { slidesPerView: 3 }
                                    }" :modules="modules" class="mySwiper">
                                    <swiper-slide v-for="(item, idx) in postList" :key="idx">
                                        <div class="modal-img" @click="openModal(item)">
                                            <img :src="'http://localhost:8080' + item.file_path + '/thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
                                                alt="thumbnail" />
                                            <p>{{ item.post_title }}</p>
                                        </div>
                                    </swiper-slide>
                                </swiper>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </section>
        <!-- <section class="main-sec sec1">

            <div class=" flex"> -->
        <!-- 히스토리 -->

        <!-- <div class="main-history">
                    <div class="w1400">
                        <div class="main-history-wrap">
                            <h1>History</h1>
                            <div class="main-history-box">
                                <div class="main-history-box-1">
                                    <div>
                                        <h3>방문자수</h3>
                                        <p></p>
                                        <p>367,700 </p>
                                        <span>명</span>

                                    </div>
                                </div>
                                <div class="main-history-box-2">
                                    <div>
                                        <h3>참가업체</h3>
                                        <p></p>
                                        <p>52,500 </p>
                                        <span>업체</span>

                                    </div>
                                </div>
                                <div class="main-history-box-3">
                                    <div>
                                        <h3>참가인원</h3>
                                        <p></p>
                                        <p>360,000</p>
                                        <span>명</span>

                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>

            </div>

        </section> -->


        <!-- <section class="main-sec sec1">
                    <div class=" flex"> -->
        <!-- 파트너사 -->

        <!-- <div class="main-partner">

                            <div class="main-partner-wrap">
                                <h1>파트너사</h1>
                                <div class="m-p-sw">

                                    <div class="m-p-sw-1">

                                        <swiper :slides-per-view="7" :space-between="30" :loop="true" :speed="1000"
                                            :centered-slides="true" :autoplay="{ delay: 0, disableOnInteraction: false }"
                                            :breakpoints="{
                                                300: { slidesPerView: 1 },
                                                479: { slidesPerView: 2 },
                                                768: { slidesPerView: 3 },
                                                1023: { slidesPerView: 5 }
                                            }" :navigation="false" :modules="modules" class="mySwiper swiper-2">

                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/kefa.png" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/keris.gif" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko.png" alt="">
                                            </swiper-slide>

                                        </swiper>
                                    </div>
                                </div>

                                <div class="w1400">

                                    <div class="main-partner-logo">
                                        <div class="main-partner-img lo1">
                                        </div>
                                        <div class="main-partner-img lo2">

                                        </div>
                                        <div class="main-partner-img lo3">

                                        </div>
                                        <div class="main-partner-img lo4">


                                        </div>
                                        <div class="main-partner-img lo5">


                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

 -->

        <!-- 
        </section> -->


        <div class="w1400">

            <div class="main-partner-logo">
                <div class="main-partner-img lo1">
                </div>
                <div class="main-partner-img lo2">

                </div>
                <div class="main-partner-img lo3">

                </div>
                <div class="main-partner-img lo4">


                </div>
                <div class="main-partner-img lo5">


                </div>
            </div>


        </div>
    </div>



    <div class="main-popup" v-show="popupList.length > 0">
        <div>
            <div class="main-popup-div">
                <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
                    delay: 3000,
                    disableOnInteraction: false,
                }" :pagination="{
    clickable: true,
}" :navigation="false" :modules="modules" class="mySwiper">

                    <swiper-slide v-for="(item, index) in popupList" :key="index">
                        <a :href="item.shortcuts_url" target="_blank">
                            <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
                        </a>
                    </swiper-slide>

                </swiper>
            </div>
            <div class="main-popup-input" :class="{ active: doNotShow }">
                <p @click="closeForDay">오늘 하루동안 열지 않기</p>
                <p @click="closeNow">닫기</p>
            </div>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { Autoplay, Pagination } from 'swiper/modules';
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useStore } from "vuex";

export default {
    data() {
        return {
            module: [Pagination, Autoplay],
            isModalOpen: false,
            videoUrl: '',
            postList: [],
            postListCount: 0,
            postIdx: 0,
            postListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: null,
                searchText: null,
                bbs_id: '1'
            },
            noticeList: [],
            noticeListForBanner: [],
            swiper: null,
            store: useStore(),
            popupList: []
        }
    },
    methods: {
        // closeForDay: function () {
        //     this.doNotShow = true;
        //     const now = new Date();
        //     localStorage.setItem('popupClosed', now);
        //     this.doNotShow = true;
        // },
        closeNow: function () {
            this.popupList = [];
        },
        // checkPopup: function () {
        //     const popupClosedTime = localStorage.getItem('popupClosed');
        //     if (popupClosedTime) {
        //         const closedTime = new Date(popupClosedTime);
        //         const now = new Date();
        //         const diffTime = Math.abs(now - closedTime);
        //         const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
        //         if (diffHours < 24) {
        //             return true;
        //         }
        //     }
        //     return false;
        // },

        getFilePath: function (filePath, fileName,fileExt) {
            return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
        },


        showAlert: function () {
            alert('페이지 준비중입니다.');
        },
        // +더보기 공지사항으로 
        goToNotice() {
            this.$router.push({ name: 'Notice' });
        },
        closeModal() {
            this.videoUrl = "";
            this.urlHTML(this.videoUrl)
            this.isModalOpen = false;
        },
        postSelectList: function () {
            const vm = this;

            axios({
                url: '/post/newsSelectListForMain.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.postListSearch
            }).then(function (response) {
                vm.postList = response.data.postSelectList;
                vm.postListCount = response.data.postSelectListCount;
                vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
            }).catch(function (error) {
                alert('홍보/뉴스 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        //공지사항 최신순 5개 리스트 출력
        noticeListForMain: function () {
            const vm = this;
            let limitCnt = 5;
            axios({
                url: '/post/noticeSelectListForMain.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {
                    'limit_cnt': limitCnt,
                },
            }).then(function (response) {
                vm.noticeList = response.data;
                console.log("resopnse.data", response.data)
            }).catch(function (error) {
                alert('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        //배너 부분 공지사항 상단고정 목록
        noticeBannerListForMain: function () {
            const vm = this;

            axios({
                url: '/post/noticeBannerListForMain.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },

            }).then(function (response) {
                vm.noticeListForBanner = response.data;
            }).catch(function (error) {
                alert('배너 공지사항 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        //날짜 시,분,초 자르기
        yyyymmdd: function (date) {
            return COMMON_UTIL.yyyymmdd(date);
        },
        openModal: function (item) {
            this.isModalOpen = true;
            this.videoUrl = item.post_content;
            this.urlHTML(this.videoUrl)
        },
        urlHTML: function (content) {
            /* this.$nextTick(() => {
                let divRef = this.$refs['modalInner'];
                if (divRef) {
                    divRef.innerHTML = content;
                    }
            }); */
            let divRef = this.$refs['modalInner'];
            divRef.innerHTML = content;
        },

        //공지사항 상세조회 페이지로 이동
        noticeSelectOnePage: function (item) {
            const vm = this;

            axios({
                url: '/post/postViewCount.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
            }).then(function (response) {

                axios({
                    url: '/statistics/pageLogInsert.json',
                    method: 'post',
                    headers: {
                        'Content-Type': "application/json; charset=UTF-8",
                    },
                    data: { "page_nm": "공지사항" }
                }).then(function () {
                    vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
                })

            }).catch(function (error) {
                console.log(error)
                alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");
            })
        },

        /** 사이트 방문자 통계 */
        visitLogInsert: function () {
            const vm = this;
            console.log("vm.store.state.loginUser   ", vm.store.state.loginUser)
            axios({
                url: '/statistics/visitLogInsert.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { 'user': vm.store.state.loginUser }
            })
        },

        popupSelectList: function () {
            const vm = this;

            axios({
                url: '/popup/userPopupList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function (response) {
                vm.popupList = response.data;
                console.log("vm.popupList", vm.popupList)
            }).catch(function (error) {
                alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

    },
    watch: {
    },
    computed: {

    },
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Autoplay, Pagination, Navigation],
        };
    },
    mounted() {
        console.log('Main mounted');
        this.popupSelectList();
        this.postSelectList();
        this.noticeListForMain();
        this.noticeBannerListForMain();
        this.visitLogInsert();
    }
}
</script>
