<template>
    <div class="content" style="background-color: #f8f8f8;">
        <div :class="{ 'top-banner banner': true, [bannerId]: true }" v-if="this.$route.path.startsWith('/aidt')">
            <div class="flex-column align-center justify-center content">
                <h1 class="banner-title text-ct white" aria-live="assertive">{{ $getMenuInfo().menuNm }}</h1>
                <p class="box-title text-ct white">{{ $getMenuInfo().menuCn }}</p>
            </div>
        </div>
        <PageNavigationBar v-if="this.$route.path.startsWith('/aidt')" />
        <div class="pt100 pb100 guideline-page">
            <div class="w1280">
                <div class="pt50 pb50">
                    <h2 class="page-title text-ct mb30">AI 디지털교과서 개발 가이드라인 안내</h2>
                    <p class="box-title text-ct mb30">
                        본 가이드라인은 AI 디지털교과서 개발을 위한 정책가이드를 제시하여<br />
                        학습자 중심의 맞춤형 학습 체제로의 교육 환경 전환과 양질의 AI 디지털교과서 제작을 지원합니다. <br />
                        AI 디지털교과서 통합지원센터는 본 가이드라인을 바탕으로 후속적인 기술문서, 컨설팅 등을 지원합니다.
                    </p>
                    <div class="guide-line-list flex justify-center align-center">
                        <div class="gd-4 mb10">
                            <div class=" border radius flex justify-between align-center pd10"
                                style="background-color: var(--white);">
                                <h3 class="pd10 default-text">AIDT 개발 가이드(KOR)</h3>
                                <div class="flex align-center">
                                    <button class="icon-btn detail-text" aria-label="pdfPreviewButton" id="pdfPreviewButton" title="미리보기"
                                        @click="$openPdfViewrWindwow('FILE_0000000003', pageAuth)"> <svg-icon type="mdi"
                                            :path="pdfPath" role="img"
                                            aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                    <button class="icon-btn detail-text" aria-label="downloadButton" title="다운로드" id="downloadButton"
                                        @click="$downloadFileById('FILE_0000000003', 'CMMN_FILE_0000000003', 'AI 디지털교과서 개발 가이드라인_KOR.pdf', 'BBS_0000000031', pageAuth)">
                                        <svg-icon type="mdi" :path="downloadPath" role="img"
                                            aria-labelledby="downloadButton"></svg-icon></button>
                                </div>
                            </div>
                        </div>
                        <div class="gd-4 mb10">
                            <div class="border radius flex justify-between align-center pd10"
                                style="background-color: var(--white);">
                                <h3 class="pd10 default-text">AIDT 개발 가이드(ENG)</h3>
                                <div class="flex align-center"> 
                                    <button class="icon-btn detail-text" title="미리보기" aria-label="pdfPreviewButton" id="pdfPreviewButton"
                                        @click="$openPdfViewrWindwow('FILE_0000000004', pageAuth)"> <svg-icon type="mdi"
                                            :path="pdfPath" role="img"
                                            aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                    <button class="icon-btn detail-text" aria-label="downloadButton" title="다운로드" id="downloadButton"
                                        @click="$downloadFileById('FILE_0000000004', 'CMMN_FILE_0000000004', 'AI 디지털교과서 개발 가이드라인_ENG.pdf', 'BBS_0000000032', pageAuth)">
                                        <svg-icon type="mdi" :path="downloadPath" role="img"
                                            aria-labelledby="downloadButton"></svg-icon></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pt50 pb50 full-section">
                <h2 class="page-title text-ct mb15">가이드라인의 내용</h2>
                <div class="w1280">
                    <div class="guide-navigation flex justify-end align-center mb30">
                        <div class="swiper-button-prev guide-prev cursor mr10" aria-label="slide prev button"></div>
                        <div class="swiper-button-next guide-next cursor mr10" aria-label="slide next button"></div>
                        <button @click="toggleAutoplay" aria-label="slideStopButtonn" id="slideStopButton"><svg-icon type="mdi"
                                :path="playPath" role="img" aria-labelledby="slideStopButton"></svg-icon></button>
                    </div>
                </div>
                <div class="swiper guideLineSwiper" ref="guideLineSwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="guideline-item pd30 radius guide1">
                                    <h3 class="box-bold-title mb30">01. AI 디지털교과서란</h3>
                                    <p>AI 디지털교과서의 정의와 특성, 개발 원칙 등 주요 정책 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide2 guideline-item">
                                    <h3 class="box-bold-title mb30">02. AI 디지털교과서 서비스 구성</h3>
                                    <p>서비스의 구성과 공공과 민간의 역할 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide3 guideline-item">
                                    <h3 class="box-bold-title mb30">03. AI 디지털교과서 개발 절차</h3>
                                    <p>전반적인 개발 절차별 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide4 guideline-item">
                                    <h3 class="box-bold-title mb30">04. 인프라</h3>
                                    <p>클라우드(SaaS) 기반의 웹 서비스 구성 방안과 클라우드 보안 사항 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide5 guideline-item">
                                    <h3 class="box-bold-title mb30">05. 공통 기능 연계</h3>
                                    <p>통합인증, 교육과정 표준체계 연계, 서비스 시작 화면 구성 등 공통기능 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide6 guideline-item">
                                    <h3 class="box-bold-title mb30">06. AI 기반 맞춤형 학습 지원</h3>
                                    <p>AI 기반 맞춤형 학습 지원을 위해 필요한 개발 요소(기능) 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide7 guideline-item">
                                    <h3 class="box-bold-title mb30">07. 학습데이터 수집·관리·전송</h3>
                                    <p>AI 디지털교과서 학습데이터 수집·관리·전송 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide8 guideline-item">
                                    <h3 class="box-bold-title mb30">08. UDL 및 접근성</h3>
                                    <p>서비스 접근성, UDL(보편적 학습설계) 보장을 위한 지침 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide9 guideline-item">
                                    <h3 class="box-bold-title mb30">09. 기타 준수 사항</h3>
                                    <p>학습데이터의 목적 외 사용 금지, AI 리스크 관리, 저작권 확보 지침 안내</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide10 guideline-item">
                                    <h3 class="box-bold-title mb30">10. 검정심사 절차 및 기준</h3>
                                    <p>AI 디지털교과서 검정 절차 안내(기술심사 영역)</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="relative">
                                <div class="pd30 radius guide11 guideline-item">
                                    <h3 class="box-bold-title mb30">11. AI 디지털교과서 품질관리</h3>
                                    <p>품질관리체계와 사용자 지원, 보안 및 개인정보 보호 사항 안내</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import PageNavigationBar from '../../../../component/pagenavigationbar/PageNavigationBar.vue';
import { mdiPlay, mdiPause, mdiFileDownloadOutline, mdiFileSearchOutline } from '@mdi/js';
import Swiper from 'swiper/bundle';



export default {
    data() {
        return {
            pageAuth: this.$store.state.pageAuth,
            downloadPath: mdiFileDownloadOutline,
            pdfPath: mdiFileSearchOutline,
            bannerId: 'guide-banner',
            path: this.$store.state.path,
            isPlaying: true,
            playPath: mdiPause,
            guideSwiperInstance: null,
        }
    },
    methods: {

        // 가이드라인슬라이드 초기화
        guideSlideInit() {
            this.guideSwiperInstance = new Swiper('.guideLineSwiper', {
                loop: true,
                navigation: {
                    nextEl: '.guide-next', prevEl: '.guide-prev'
                },
                keyboard: true,
                slidesPerView: 1,
                spaceBetween: 0,
                breakpoints: {
                    500: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    1280: {
                        slidesPerView: 4.5,
                        spaceBetween: 20,
                    },
                },
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                },
                centeredSlides: true
            });
        },
        toggleAutoplay: function () {
            if (this.isPlaying) {
                this.$refs.guideLineSwiper.swiper.autoplay.stop();
                this.playPath = mdiPlay
            } else {
                this.$refs.guideLineSwiper.swiper.autoplay.start();
                this.playPath = mdiPause
            }
            this.isPlaying = !this.isPlaying
        },
    },

    watch: {

    },
    computed: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,

    },
    created() {

    },
    mounted() {
        this.guideSlideInit();
    },
    unmounted() {
        // 컴포넌트가 파괴될 때 Swiper 인스턴스도 파괴
        if (this.guideSwiperInstance) {
            this.guideSwiperInstance.destroy();
            this.guideSwiperInstance = null;
        }
    },
}
</script>
