<template>
    <div class="notice-page page">
        <div class="w1400">
            <div class="noti-bos">
                <div class="page-logo flex-start">
                    <img src="../../../../resources/jpg/notic-logo-img.png" alt="공지사항">
                    <h1>공지사항</h1>
                </div>
                <div class="btn-wrap  data-btn-wrap">
                    <select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
                        class="data-table-search">
                        <option v-for="(item, idx) in option" :key="idx" :value=item.value>
                            {{ item.name }}
                        </option>
                    </select>
                    <div class="notice-search">
                        <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="sort-wrap" style="grid-column: 1 / span 2;">
                    <ul class="flex-end">
                        <li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
                            @click="changeColor(index)">
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <div class="noti-sec">
                    <div class="noti-sec-table">
                        <table class="list-table user-table-list">
                            <th style="width:5%">no</th>
                            <th style="width:55%">제목</th>
                            <th style="width:10%">작성자</th>
                            <th style="width:10%">작성일자</th>
                            <th style="width:10%">조회수</th>
                            <tr v-for="(notice, nIdx) in postNoticeList" :key="nIdx" @click="postSelectOnePage(notice)">
                                <td class="board-title pen-nib-icon notice-box" :class="{ 'first-row': notice.notice_yn === 'Y' }" style="text-align: center; padding-left: 2.5rem;">
                                    <i class="fas fa-thumbtack" v-if="notice.notice_yn === 'Y'"></i>
                                </td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }">
                                    <p class="board-title">
                                        {{ notice.post_title }}
                                    </p>
                                </td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ notice.rgtr_id }}</td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ yyyymmdd(notice.reg_dt) }}</td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ notice.view_cnt }}</td>
                            </tr>
                            <tr v-for="(post, pIdx) in postList" :key="pIdx" @click="postSelectOnePage(post)">
                                <td>{{ postIdx - pIdx }}</td>
                                <td>
                                    <p class="board-title">
                                        {{ post.post_title }}
                                    </p>
                                </td>
                                <td>{{ post.rgtr_id }}</td>
                                <td>{{ yyyymmdd(post.reg_dt) }}</td>
                                <td>{{ post.view_cnt }}</td>
                            </tr>
                            <tr v-if="postListCount == 0 && postNoticeList.length == 0">
                                <td colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="bottom-wrap">
                    <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
                        :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
export default {
    data() {
        return {
            postListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'all',
                searchText: null,
                bbs_id: '2',
                sort: 'dt'
            },
            page_nm: '공지사항',
            postList: [],
            postNoticeList: [],
            postListCount: 0,
            postIdx: 0,
            // 최신순 조회순
            sorts: [{ name: '최신순', value: 'dt' },
            { name: '조회수순', value: 'view' }],
            activeIndex: 0,
            option: [
                { name: '전체', value: 'all' },
                { name: '제목', value: 'title' },
                { name: '내용', value: 'content' },
                { name: '작성자', value: 'writer' },
            ]
        }
    },
    methods: {

        //  최신순 조회순
        changeColor(index) {
            this.activeIndex = index;
            this.postListSearch.sort = this.sorts[index].value;
            this.postSelectList();
        },

        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.postNoticeList = response.data.postNoticeSelectList;
                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) {
            const vm = this;

            axios({
                url: '/post/postViewCount.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
            }).then(function (response) {
                vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
            }).catch(function (error) {
                alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");
            })

        },

        /**페이지 접속 로그 등록 */
        pageLogInsert: function() {
            const vm = this;

            axios({
                url: '/statistics/pageLogInsert.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: { "page_nm": vm.page_nm }
            })
        }
    },
    watch: {

    },
    computed: {

    },
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('User Notice mounted')
        this.pageLogInsert();
        this.postSelectList();
    }
}
</script>




