<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 relative introduce-page">
            <div class="w1280">
                <div class="pt50 pb50">
                    <h2 class="page-title text-ct mb30" aria-live="polite">AI 디지털교과서란?</h2>
                    <p class="box-title text-ct mb15">
                        학생 개인의 능력과 수준에 맞는 맞춤 학습 기회를 지원할 수 있도록<br />
                        인공지능을 포함한 지능정보기술을 활용하여 다양한 학습자료 및 학습지원 기능 등을 탑재한 교과서입니다.
                    </p>
                    <div class="aidt-list flex align-start mb30">
                        <div class="gd-3 mb10">
                            <div class="aidt-item radius pd30 text-ct flex-column justify-center">
                                <h3 class="box-bold-title"><span class="blue">A</span>daptive<br /> Learning</h3>
                                <p class="box-title">맞춤학습</p>
                            </div>
                        </div>
                        <div class="gd-3 mb10">
                            <div class="aidt-item radius pd30 text-ct flex-column justify-center">
                                <h3 class="box-bold-title"><span class="blue">I</span>nteresting &<br />Immersion</h3>
                                <p class="box-title">흥미와 몰입</p>
                            </div>
                        </div>
                        <div class="gd-3 mb10">
                            <div class="aidt-item radius pd30 text-ct flex-column justify-center">
                                <h3 class="box-bold-title"><span class="blue">D</span>iversity &<br /> Data-driven</h3>
                                <p class="box-title">다양성과 데이터 기반</p>
                            </div>
                        </div>
                        <div class="gd-3 mb10">
                            <div class="aidt-item radius pd30 text-ct flex-column justify-center">
                                <h3 class="box-bold-title">High<br /><span class="blue">T</span>echnology</h3>
                                <p class="box-title">첨단 기술 적용</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex align-start policy-materials radius">
                        <div class="gd-2 pd30 radius content flex-column justify-center">
                            <h2 class="page-sub-title text-ct pd10">정책자료</h2>
                        </div>
                        <div class="gd-10 pd20 pt30"
                            style="background-color: var(--light); border-radius:0 1rem 1rem 0;">
                            <ul class="flex align-center">
                                <li class="gd-6 mb10">
                                    <div class="flex justify-between align-center download-item pd10 radius no-gutters">
                                        <p class="gd-10 ellipsis default-text" title="디지털 기반 교육혁신 방안(23.2)">
                                            디지털 기반 교육혁신 방안(23.2)
                                        </p>
                                        <div class="flex justify-end align-center gd-2 pd0">
                                            <button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 방안(23.2) pdf 보기 버튼" id="pdfPreviewButton"
                                                @click="$openPdfViewrWindwow('FILE_0000000005', pageAuth)" title="미리보기">
                                                <svg-icon type="mdi" :path="pdfPath" role="img"
                                                    aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                            <button class="icon-btn cursor"  aria-label="디지털 기반 교육혁신 방안(23.2) 다운로드 버튼" id="downloadButton"
                                                @click="$downloadFileById('FILE_0000000005', 'CMMN_FILE_0000000005', 'AI 디지털 기반 교육혁신 방안.pdf', 'BBS_0000000031', pageAuth)"
                                                title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
                                                    aria-labelledby="downloadButton"></svg-icon></button>
                                        </div>
                                    </div>
                                </li>
                                <li class="gd-6 mb10">
                                    <div class="flex justify-between align-center download-item pd10 radius no-gutters">
                                        <p class="gd-10 ellipsis default-text" title="AI 디지털교과서 추진 방안(23.6)">
                                            AI 디지털교과서 추진 방안(23.6)
                                        </p>
                                        <div class="flex justify-end align-center gd-2 pd0">
                                            <button class="icon-btn cursor" aria-label="AI 디지털교과서 추진 방안(23.6) pdf 보기 버튼" id="pdfPreviewButton"
                                                @click="$openPdfViewrWindwow('FILE_0000000006', pageAuth)" title="미리보기">
                                                <svg-icon type="mdi" :path="pdfPath" role="img"
                                                    aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                            <button class="icon-btn cursor"  aria-label="AI 디지털교과서 추진 방안(23.6) 다운로드 버튼" id="downloadButton"
                                                @click="$downloadFileById('FILE_0000000006', 'CMMN_FILE_0000000006', 'AI 디지털교과서 추진 방안.pdf', 'BBS_0000000031', pageAuth)"
                                                title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
                                                    aria-labelledby="downloadButton"></svg-icon></button>
                                        </div>
                                    </div>
                                </li>                               
                                <li class="gd-6 mb10">
                                    <div class="flex justify-between align-center download-item pd10 radius no-gutters">
                                        <p class="gd-10 ellipsis default-text" title="디지털 기반 교육혁신 역량강화 지원 방안(24.4)">
                                            디지털 기반 교육혁신 역량강화 지원 방안(24.4)
                                        </p>
                                        <div class="flex justify-end align-center gd-2 pd0">
                                            <button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 역량강화 지원 방안(24.4) pdf 보기 버튼" id="pdfPreviewButton"
                                                @click="$openPdfViewrWindwow('FILE_0000000008', pageAuth)" title="미리보기">
                                                <svg-icon type="mdi" :path="pdfPath" role="img"
                                                    aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                            <button class="icon-btn cursor" aria-label="디지털 기반 교육혁신 역량강화 지원 방안(24.4) 다운로드 버튼" id="downloadButton"
                                                @click="$downloadFileById('FILE_0000000008', 'CMMN_FILE_0000000008', '디지털 기반 교육혁신 역량강화 지원 방안.pdf', 'BBS_0000000031', pageAuth)"
                                                title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
                                                    aria-labelledby="downloadButton"></svg-icon></button>
                                        </div>
                                    </div>
                                </li>
                                <li class="gd-6 mb10">
                                    <div class="flex justify-between align-center download-item pd10 radius no-gutters">
                                        <p class="gd-10 ellipsis default-text" title="디지털 교육 규범(24.7)">
                                            디지털 교육 규범(24.7)
                                        </p>
                                        <div class="flex justify-end align-center gd-2 pd0">
                                            <button class="icon-btn cursor" aria-label="디지털 교육 규범(24.7) pdf 보기 버튼" id="pdfPreviewButton"
                                                @click="$openPdfViewrWindwow('FILE_0000001274', pageAuth)" title="미리보기">
                                                <svg-icon type="mdi" :path="pdfPath" role="img"
                                                    aria-labelledby="pdfPreviewButton"></svg-icon></button>
                                            <button class="icon-btn cursor"  aria-label="디지털 교육 규범(24.7) 다운로드 버튼" id="downloadButton"
                                                @click="$downloadFileById('FILE_0000001274', 'CMMN_FILE_0000001013', '디지털 교육 규범.pdf', 'BBS_0000000031', pageAuth)"
                                                title="다운로드"> <svg-icon type="mdi" :path="downloadPath" role="img"
                                                    aria-labelledby="downloadButton"></svg-icon></button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pt50 pb50">
                    <h2 class="page-title text-ct mb30">AI 디지털교과서 통합지원센터란?</h2>
                    <ul class="flex justify-center">
                        <li class="gd-4 mb20 relative">
                            <div class="introduce-item pd30 radius introduce1">
                                <h3 class="box-title blue" style="font-weight: 700;">정책</h3>
                                <p class="box-title ">AIDT 개발의 기술표준 및 정책 연구</p>
                            </div>
                        </li>
                        <li class="gd-4 mb20 relative">
                            <div class="pd30 radius introduce2 introduce-item">
                                <h3 class="box-title blue" style="font-weight: 700;">네트워킹</h3>
                                <p class="box-title ">소통과 협력 기반의 개발 환경 조성</p>
                            </div>
                        </li>
                        <li class="gd-4 mb20 relative">
                            <div class="pd30 radius introduce3 introduce-item">
                                <h3 class="box-title blue" style="font-weight: 700;">연계</h3>
                                <p class="box-title ">공공 서비스와 민간 서비스의 원활한<br />연계 지원</p>
                            </div>
                        </li>
                        <li class="gd-4 mb20 relative">
                            <div class="pd30 radius introduce4 introduce-item">
                                <h3 class="box-title blue" style="font-weight: 700;">동향</h3>
                                <p class="box-title ">AIDT 모델 및 최신 기술 동향 정보 제공</p>
                            </div>
                        </li>
                        <li class="gd-4 mb20 relative">
                            <div class="pd30 radius introduce5 introduce-item">
                                <h3 class="box-title blue" style="font-weight: 700;">활용</h3>
                                <p class="box-title ">AIDT 개발 및 운영 현황분석을 통한<br />활용 활성화</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="flex">
                    <div :class="{ 'introduce-wrap gd-4': true, 'mt60': index === 0 || index === 2, 'mb60': index === 1 }"
                        v-for="(item, index) in items" :key="index">
                        <div class="introduce-list pd30 radius cursor relative" @mouseover="item.isActive = true"
                            @mouseout="item.isActive = false">
                            <div class="content flex-column justify-center align-center">
                                <div :class="{ 'hov-before text-ct': true, 'none': item.isActive }">
                                    <h3 class="page-sub-title text-ct mb15 white">{{ item.title }}</h3>
                                    <button class="pd15 detail-text" :aria-label="item.title + '자세히 보기'" @click="item.isActive = true">자세히보기</button>
                                </div>
                                <div :class="{ 'hov-affter': true, 'active': item.isActive }">
                                    <h3 class="page-sub-title text-ct mb15 white">{{ item.title }}</h3>
                                    <div class="pd20 mb20 sub-item radius">
                                        <div class="pb10 border-b mb10">
                                            <h4 class="box-bold-title text-ct white">{{ item.subtitle1 }}</h4>
                                        </div>
                                        <ul>
                                            <li class="text-ct">{{ item.detail1 }}</li>
                                            <li class="text-ct">{{ item.detail2 }}</li>
                                        </ul>
                                    </div>
                                    <div class="pd20 mb20 sub-item radius">
                                        <div class="pb10 border-b mb10">
                                            <h4 class="box-bold-title text-ct white">{{ item.subtitle2 }}</h4>
                                        </div>
                                        <ul>
                                            <li class="text-ct">{{ item.detail3 }}</li>
                                            <li class="text-ct">{{ item.detail4 }}</li>
                                            <li class="text-ct">{{ item.detail5 }}</li>
                                        </ul>
                                    </div>
                                    <div class="pd20 sub-item radius" v-if="item.subtitle3">
                                        <div class="pb10 border-b mb10">
                                            <h4 class="box-bold-title text-ct white">{{ item.subtitle3 }}</h4>
                                        </div>
                                        <ul>
                                            <li class="text-ct">{{ item.detail6 }}</li>
                                            <li class="text-ct">{{ item.detail7 }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import { mdiFileDownloadOutline, mdiFileSearchOutline } from '@mdi/js';
import { findAllFile } from '../../../../resources/api/bbsCn.js'
import { defaultSearchParams } from '../../../../resources/js/defaultSearchParams';
import { toRaw } from 'vue'


export default {
    data() {
        return {
            pageAuth: this.$store.state.pageAuth,
            downloadPath: mdiFileDownloadOutline,
            pdfPath: mdiFileSearchOutline,
            bannerId: 'introduce-banner',
            path: this.$store.state.path,
            search: { ...defaultSearchParams },
            items: [
                {
                    title: '기술표준 연구',
                    subtitle1: '가이드라인 제・개정',
                    detail1: '기술영역별 전문가 협의체 구성 및 운영',
                    detail2: '제・개정 관련 개발 현황 점검 및 의견수렴',
                    subtitle2: '개발 표준 제공',
                    detail3: 'AIDT 교육과정 표준체계',
                    detail4: '통합인증, 학습데이터 수집 체계',
                    subtitle3: '개발 생태계 조성',
                    detail5: '신기술 활용 및 도입 기반 지원',
                    detail6: '협력 네트워킹 지원',
                    detail7: 'AI 디지털교과서 모델 제시',
                    isActive: false
                },
                {
                    title: '연계 및 공동자원 지원',
                    subtitle1: '공공 연계 지원',
                    detail1: 'API 테스트 및 연계 지원',
                    detail2: '공공 연계 서비스 안내',
                    subtitle2: '개발 공동자원 활용 지원',
                    detail3: '공동 활용 콘텐츠 확보・보급',
                    detail4: '테스트랩・테스트베드 활용 신청',
                    detail5: 'AI 트레이닝 데이터셋 제공',
                    isActive: false
                },
                {
                    title: '활용・활성화 지원',
                    subtitle1: '활용 환경 조성',
                    detail1: '고객 서비스(CS) 지원',
                    detail2: '현장 활용 및 활성화 정책 수립',
                    subtitle2: '활성화 촉진',
                    detail3: '운영・유지관리 현황 모니터링',
                    detail4: '운영 결과 분석 및 정책 환류',
                    isActive: false
                }
            ],
            list: [], // 게시판 내용 목록
            ntcList: [],
        }
    },
    methods: {
        async findAll() {
            this.search.id = 'BBS_MNG_0000000005'
            this.$setLoading(true);
            try {
                const res = await findAllFile(toRaw(this.search));
                this.ntcList = res.data.data.ntcList;
            } catch (error) {
                // alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
                alert(this.$getCmmnMessage('err005'));
            } finally {
                this.$setLoading(false);
            }
        },
        // 파일사이즈
        formatFileSize: function (size) {
            const units = ['B', 'KB', 'MB', 'GB', 'TB'];
            let i;

            // 파일 크기를 적절한 단위로 변환
            for (i = 0; size >= 1024 && i < units.length - 1; i++) {
                size /= 1024;
            }

            // 파일 크기와 단위를 문자열로 반환
            if (i === units.length - 1) {
                return `${size.toFixed(2)} ${units[i]}`;
            } else {
                return `${size.toFixed(2)} ${units[i]}`;
            }
        },

    },

    watch: {

    },
    computed: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,

    },
    created() {
        this.findAll();
    },
    mounted() {
    }
}
</script>
