<template>
    <div class="w1400">
        <div class="noti-bos">

            <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/notic-logo-img.png" alt="">
                                    <p>공지사항</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <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>

            <section class="noti-sec">
                <div class="noti-sec-table">
                    <!-- <table>
                        <th>no</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                        <th>조회수</th>

                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>AI 디지털교과서 개발 기술지원 수요조사</td>
                            <td>KERIS</td>
                            <td>2023-09-12</td>
                            <td>129</td>
                        </tr>
                    </table> -->
                    <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>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            posts: [
                { id: 1, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/19', views: 588 },
                { id: 2, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/20', views: 789 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },
                { id: 3, title: '[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인 ', date: '2023/10/21', views: 123 },

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

    },
    computed: {

    },
    mounted() {

    }
}
</script>

<style scoped>
.noti-bos {
    width: 100%;
}



.noti-sec {
    width: 100%;
    padding: 12rem 3rem;
}

.noti-sec-table table {
    background-color: white;
    border-bottom: 1px solid #cccccc;

}

.noti-sec-table th {
    padding: 1.5rem;
    color: white;
    background-color: #007aff;
    font-size: 1.5rem;
}

.noti-sec-table td {
    padding: 1.5rem;
    font-size: 1.5rem;
    border-bottom: 1px solid #cccccc;
    text-align: center;
}
</style>


