<template>
    <div class="data-main">
        <section class="main-sec sec1">
            <!-- <div class="main-content"> -->
            <div class="flex">
                <!-- 자료집 비주얼 -->
                <div class="data-b">
                    <div class="w1400">
                        <div class="data-b-b">
                            <!-- 자료집 텍스트 -->
                            <div class="data-text">
                                <img src="../../../../resources/jpg/data-img-text.png" alt="">
                                <p>자료집</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 자료집 메인 -->
        <section class="data-b-main">
            <div class="data-b">
                <div class="w1400">
                    <div class="data-b-grid">
                        <!-- 윗쪽 아이콘 -->
                        <div class="data-b-1 da1">
                            <h2>AI 디지털교과서<br><span>정책자료</span></h2>
                            <div class="data-t">

                                <p>· 개발 지원 정책 문서</p>
                                <p>· 법·제도 문서 등</p>
                            </div>
                        </div>
                        <div class="data-b-2 da1">
                            <h2>AI 디지털교과서<br><span>연구자료</span></h2>
                            <div class="data-t data-t2">
                                <p>· 서비스 모델, 프로토타입 연구·보고서 등</p>
                            </div>
                        </div>
                        <div class="data-b-3 da1">
                            <h2>AI 디지털교과서<br><span>가이드라인</span></h2>
                            <div class="data-t">

                                <div class="guide-logo-bt">

                                    <a style="font-size: 15px;" class="down-btn-1"
                                        href="https://webst.edunet.net/AIDT/AI 디지털교과서 개발 가이드라인.pdf" target='_blank'
                                        download>
                                        <i class="fa-solid fa-circle-down guide_i"
                                            style="font-size: 20px; margin-right: 10px;"></i>가이드라인
                                        다운받기</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 자료집 테이블 -->

        <section class="data-table">
            <div class="data-b">
                <div class="w1400">
                    <div class="data-select">


                        <select name="data-table-sild" id="data-table-sild">
                            <option value="전체" selected>전체</option>
                            <option value="기본순">기본순</option>
                            <option value="업로드순" disabled>업로드순</option>
                            <option value="조회순">조회순</option>
                        </select>
                        <div class="input-group">
                            <input type="text" class="input" onfocus="this.value=''; return true;" value="검색어를 입력해주세요.">
                            <input class="button--submit" value="검색" type="submit">
                        </div>
                    </div>
                    <div class="data-table-tr">
                        <table>
                            <th>NO</th>
                            <th>제목</th>
                            <th>날짜</th>
                            <th>조회수</th>

                            <tr v-for="(post, index) in posts" :key="post.id" @click="goToDetailPage(post.id)">
                                <td>{{ index + 1 }}</td>
                                <td>{{ post.title }}</td>
                                <td>{{ post.date }}</td>
                                <td>{{ post.views }}</td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>

import { useRouter } from 'vue-router';
export default {
    data() {
        return {
            posts: [
                { id: 1, title: '[공유] AI 디지털교과서 개발 가이드라인 설명회 발표자료(230907)', date: '2023/10/19', views: 588 },
                { id: 2, title: '[공유] AI 디지털교과서 개발 가이드라인 설명회 발표자료(230907)', date: '2023/10/20', views: 789 },
                { id: 3, title: '[공유] AI 디지털교과서 개발 가이드라인 설명회 발표자료(230907)', date: '2023/10/21', views: 123 },

                // 추가적인 게시글 데이터
            ]
        }
    },
    methods: {
        goToDetailPage(postId) {
            this.$router.push('/DataDtali.page');
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Data mounted');
    }
}
</script>

<style scoped>
.data-t p {
    width: 80%;
    padding: 0rem 0rem 1rem 3rem !important;

}

.data-t2 p {

    padding: 0rem 0rem 0rem 0rem !important;
    margin: 0 auto;
}

.guide-logo-bt {
    float: right;
    /* margin: 0 auto; */
    font-size: 3rem;
    width: 70%;
    padding-right: 3rem;
    font-family: SBaggroM;
    text-align: right;

    cursor: pointer;
}

.guide-logo-bt a {
    color: #e07e27;
}
</style>