<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 ref="mySwiper1" class="mySwiper swiper-notice" @swiper="onSwiper"
                                    :direction="'vertical'" :spaceBetween="5" :slidesPerView="1" :centeredSlides="false"
                                    :navigation="false" :modules="modules" :autoplay="{
                                        delay: 3000,
                                        disableOnInteraction: false,
                                    }" :loop="loop">
                                    <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="loop" loopedSlides="1" :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 + '/' + 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>{{ visitHistory }}</p>
                                        <span>명</span>
                                    </div>
                                </div>
                                <div class="main-history-box-2">
                                    <div>
                                        <h3>참가업체</h3>
                                        <p></p>
                                        <p>{{ participationCompany }}</p>
                                        <span>업체</span>
                                    </div>
                                </div>
                                <div class="main-history-box-3">
                                    <div>
                                        <h3>참가인원</h3>
                                        <p></p>
                                        <p>{{ participationUser }}</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 :slidesPerView="10" :spaceBetween="30" :loop="loop" :speed="1500"
                                    :centeredSlides="false" :autoplay="{ delay: 1000, disableOnInteraction: false }"
                                    :breakpoints="{
                                        300: { slidesPerView: 2 },
                                        479: { slidesPerView: 4 },
                                        768: { slidesPerView: 6 },
                                        1023: { slidesPerView: 7 }
                                    }" :navigation="false" :modules="modules" class="mySwiper swiper-2"
                                    >
                                    <swiper-slide v-for="(companyOne, index) in companyLogoLists" :key="index">
                                        <img :src="'http://localhost:8080' + companyOne.file_path + '/' + companyOne.file_nm + '.' + companyOne.file_extn_nm"
                                            alt="">
                                    </swiper-slide>
                                </swiper>
                            </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-if="showPopup">
        <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" v-if="shortcuts_yn === 'Y'">
                            <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
                        </a>
                        <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="" v-else>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="main-popup-input" :class="{ active: doNotShow }">
                <p @click="hidePopup">24시간 동안 열지 않기</p>
                <p @click="closeNow">닫기</p>
            </div>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation,Autoplay, Pagination  } from 'swiper/modules';

import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useStore } from "vuex";
import Cookies from 'js-cookie';


export default {
    data() {
        return {
            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: [],
            showPopup: true,
            companyLogoLists: [],
            swiper: null,
            loop: false,
            modules: [Autoplay, Pagination, Navigation],

            visitHistory: 0,
            participationCompany: 0,
            participationUser: 0
        }
    },
    methods: {
        onSwiper(swiper) {
            this.swiper = swiper;
        },
        // 메인 팝업 관련 메서드
        closeNow: function () {
            this.showPopup = false;
        },
        getFilePath: function (filePath, fileName, fileExt) {
            return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
        },

        checkPopupStatus() {
            const popupClosed = Cookies.get('popupClosed') === 'true';
            console.log("popupClosed", popupClosed);
            if (popupClosed) {
                this.showPopup = false;
            }
        },
        hidePopup() {
            // 'popupClosed' 쿠키를 1일(24시간) 동안 설정합니다.
            Cookies.set('popupClosed', true, { expires: 1 });
            this.showPopup = false;
            console.log("this.showPopup", this.showPopup)
        },

        // 페이지 준비중 alert
        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;
                vm.$nextTick(() => {
                    if (vm.swiper) {
                        console.log("인스턴스 받아와지니", vm.swiper)
                        vm.swiper.init();
                        vm.loop = true;
                    }
                });
            }).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;
                // if (vm.popupList.length > 0) {
                //     vm.showPopup = true
                // }
                if (vm.popupList.length < 1) {
                    vm.showPopup = false;
                }
                console.log("vm.popupList", vm.popupList)
            }).catch(function (error) {
                alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        companyLogoList: function () {
            const vm = this;

            axios({
                url: '/company/companyLogoList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function (response) {
                console.log("companyLogoList!!!")
                vm.companyLogoLists = response.data
                console.log("vm.companyLogoLists", vm.companyLogoLists);
                // vm.$nextTick(() => {
                //     if (vm.swiper) {
                //         console.log("vm.companyLogoLists", vm.swiper)
                //         vm.swiper.init();
                //         vm.loop = true;
                //     }
                // });
            }).catch(function (error) {
                alert('기업 로고 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        mainHistory: function() {
            const vm = this;

            axios({
                url: '/statistics/mainHistory.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
            }).then(function (response) {
                vm.visitHistory = response.data.visitHistory.toLocaleString('ko-KR');
                vm.participationCompany = response.data.participationCompany.toLocaleString('ko-KR');
                vm.participationUser = response.data.participationUser.toLocaleString('ko-KR');
            }).catch(function (error) {
                alert('히스토리 조회 오류, 관리자에게 문의하세요.');
            })
        }

    },
    watch: {

    },
    computed: {

    },
    components: {
        Swiper,
        SwiperSlide,
       
    },
    mounted() {
        console.log('Main mounted');
        this.popupSelectList();
        this.companyLogoList();
        this.postSelectList();
        this.noticeListForMain();
        this.noticeBannerListForMain();
        this.visitLogInsert();
        this.checkPopupStatus();
        this.mainHistory();
    }
}
</script>
