<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 v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
                            <option :value = null selected>전체</option>
                            <option value="title">제목</option>
                            <option value="user">작성자</option>
                            <option value="조회순">조회순</option>
                        </select>
                        <div class="input-group">
                            <input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
                            <input class="button--submit" value="검색" type="submit" @click="postSelectList()">
                        </div>
                    </div>
                    <div class="data-table-tr">
                        <table>
                            <th>NO</th>
                            <th>제목</th>
                            <th>작성자</th>
                            <th>날짜</th>
                            <th>조회수</th>

                            <tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
                                <td>{{ postIdx - idx }}</td>
                                <td>{{ item.post_title }}</td>
                                <td>{{ item.rgtr_id }}</td>
                                <td>{{ yyyymmdd(item.reg_dt) }}</td>
                                <td>{{ item.view_cnt }}</td>
                            </tr>
                            <tr v-if="postListCount == 0">
                                <td style="font-size: 20px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';

export default {
    data() {
        return {
            postListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: null,
                searchText: null,
            },
            postList: [],
            postListCount: 0,
            postIdx: 0
        }
    },
    methods: {
        postSelectList: function() {
            const vm = this;
            
            axios({
                url: '/post/postSelectList.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.postListSearch
            }).then(function(response) {
                vm.postList = response.data.postSelectList;
                vm.postListCount = response.data.postSelectListCount;
                vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
            }).catch(function(error) {
                alert('자료집 목록 조회 오류, 관리자에게 문의하세요.');
            })
        },

        //날짜 시,분,초 자르기
        yyyymmdd: function (date) {
            return COMMON_UTIL.yyyymmdd(date);
        },
        
        //게시글 상세조회 페이지로 이동
        postSelectOnePage: function (item) {
            this.$router.push({ path: '/', query: {'post_id': item.post_id}});
        },
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Data mounted');
        this.postSelectList();
    }
}
</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>