<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 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>
            <section class="noti-sec">
                <div class="noti-sec-table">
                    <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>
            </section>
        </div>
    </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() {
        this.postSelectList();
    }
}
</script>




