<template>
    <div class="news-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/info-logo.png" alt="홍보뉴스 아이콘" class="title-icon">
                    <h2 class="main-title">홍보 / news</h2>
                </div>
            </div>
            <div class="content-wrap NewsSelectList">
                <div class="btn-wrap">
                    <div class="data-select">
                        <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="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>
                <!-- 최신순 조회순 -->
                <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>
                <ul class="news-list">
                    <li v-for="(item, idx) in postList" :key="idx" @click.stop="postSelectOnePage(item)">
                        <a>
                            <div class="thumbnail">
                                <img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
                                    alt="thumbnail" />
                            </div>
                            <div class="text-zone">
                                <p class="content-title">{{ item.post_title }}</p>
                                <p class="content-detail">{{ removeTag(item.post_content) }}</p>
                                <div class="content-info">
                                    <p><span class="writer">작성자</span><span>{{ item.rgtr_id }}</span></p>
                                    <p><span class="views">조회수</span><span>{{ item.view_cnt }}</span></p>
                                </div>
                                <p class="content-date">{{ yyyymmdd(item.reg_dt) }}</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="btn-wrap">
                    <button class="blue-btn" @click="postInsertPage()">글쓰기</button>
                </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: '1',
                sort: 'dt'
            },
            postList: [],
            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',
                url: '/post/newsSelectList.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);
        },

        // content html 제거
        removeTag: function (data) {
            return COMMON_UTIL.removeTag(data);
        },
        //게시글 상세조회 페이지로 이동
        postSelectOnePage: function (item) {
            this.$router.push({ path: '/adm/newsSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
        },
        postInsertPage: function () {
            this.$router.push({ path: '/adm/newsInsert.page', query: {} })
        }

    },
    watch: {},
    computed: {},
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('News mounted')
        this.postSelectList();
    }
};
</script>

