<template>
    <div class="w1400">
        <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-dtail">
            <section>

                <h1>{{ post.title }}</h1>
                <p>조회수 {{ post.views }}</p>
                <p>작성일 {{ post.date }}</p>
            </section>

            <section class="dtail-ing">

                <div>{{ post.content }}</div>
                <div>
                    <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
                    {{ post.pick }}
                </div>
            </section>

            <!-- <section class="dtail-button">

                <input type="file" id="file" style="display: none;">
                <label for="file" class="data-file-bt">파일업로드</label>
            </section> -->


            <section class="dtail-navigation">
                <button>다음글</button>
                <button>이전글</button>
            </section>

            <section class="dtail-navigation-in">
                <button @click="goBack">목록</button>
            </section>
            <!-- <hr> -->
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            post: {}
        };
    },
    mounted() {
        const postId = this.$route.params.id;
        this.fetchPostData(postId);

    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        fetchPostData(postId) {
            const dummyData = {
                id: postId,
                title: '	[공지] K-MOOC 마이크로러닝 강좌 개발 가이드라인',
                views: 1234,
                date: '2023/10/27',
                content: '안녕하세요? 한국교육학술정보원(KERIS)에서는 AI 디지털교과서 개발을 위해 개발 영역에 대한 기술지원(교육·컨설팅 등)을 계획하고 있습니다.􀀀이에, 개발사에서 희망하는 기술지원 영역에대한 수요 조사를 다음과 같이 실시하오니 많은 참여 바랍니다. [즐거움이 가득한 학습교재] 학생이 흥미를 가지고 즐겁게 공부할 수 있도록 학생의 경험과 수준에 맞는 교재를 개발하기 위해 항상 연구하며 노력하고 있습니다.',
                pick: '155'
            };
            this.post = dummyData;
        }

    }
}
</script>

<style scoped>
section {
    border-bottom: 1px solid #007aff;
}

.Data-dtail {
    width: 100%;

    padding: 0rem 3rem 12rem;
}

.sec1 {
    border: 0px;
}

.Data-dtail section h1 {
    color: #007aff;
}

.Data-dtail section:nth-child(1) {
    /* border: 1px solid red; */
    background-color: rgb(236, 236, 236);
    border-top: 1px solid #007aff;

}

.Data-dtail section:nth-child(1) {
    display: grid;
    grid-template-columns: 73% 10% 14%;
}

.Data-dtail section:nth-child(3) {
    /* padding: 3rem; */
    font-size: 1.7rem;
}

.Data-dtail h1 {
    padding: 3rem;
}

.Data-dtail p {
    font-size: 1.5rem;
    padding: 4rem 0rem 0rem 3rem;
    /* border: 1px solid red; */
}

.dtail-ing {
    padding: 3rem;
    height: 40rem;
    display: grid;
    grid-template-columns: 1fr;
    align-content: space-between;
}

.dtail-ing div {
    font-size: 1.7rem;
}

.dtail-button {
    padding: 3rem;
}

hr {
    border: 0.5px solid #007aff;
}

.data-file-bt {
    cursor: pointer;
}

.dtail-navigation {
    /* border: 1px solid red; */
    /* padding: 3r/em; */
    display: grid;
    grid-template-columns: 1fr;
}

.dtail-navigation button {
    padding: 2rem 3rem;
    text-align: left;
    font-family: "Pretendard-Regular";
    color: #007aff;
    font-size: 1.5rem;
    font-weight: 600;

}

.dtail-navigation button:nth-child(1) {
    border-bottom: 0.5px solid #787878;

}

.dtail-navigation-in {
    border: 0px;
    padding: 3rem 0;
    text-align: right;

}

.dtail-navigation-in button {
    padding: 1.5rem 5rem;
    background-color: #007aff;
    color: white;
    font-family: "Pretendard-Regular";
    border-radius: 1.5rem;

}
</style>