<template>
    <div class="data-page page">
        <div class="w1400">
            <div class="data">
                <div class="page-logo flex-start">
                    <img src="../../../../resources/jpg/data-img-text.png" alt="">
                    <h1>자료집</h1>
                </div>
                <!-- 자료집 카테고리 -->


                <div class="data-b-main">
                    <div class="data-b">

                        <div class="data-banner">
                            <!-- 윗쪽 아이콘 -->

                            <button v-for="(button, index) in buttons" :key="index" :class="button.class" :style="{
                                '--button-bg-color': button.clicked ? button.color : button.defaultColor,
                                backgroundColor: button.clicked ? button.color : button.defaultColor
                            }" @click="clickButton(index)">
                                <h2><span>AI 디지털교과서</span>{{ button.name }}</h2>
                                <p>{{ button.content }}</p>
                                <p>{{ button.content2 }}</p>


                            </button>


                        </div>
                    </div>
                </div>
            </div>
            <!-- 자료집 테이블 -->
            <div class="data-table">
                <div class="data-b">

                    <div class="btn-wrap  data-btn-wrap " >
                        <div class="data-bos">


                            <div id="data-app">

                                <p class="category">자료집> <span>{{ categoryName }}</span></p>
                            </div>
                            <div class="tech-search-box">
                                <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 data-button-sum" value="검색" type="submit"
                                        @click="postSelectList()">
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="sort-wrap">
                        <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="data-table-tr">
                        <table class="list-table user-table-list">
                            <th style="width:5%">no</th>
                            <th style="width:15%">카테고리</th>
                            <th style="width:45%">제목</th>
                            <th style="width:10%">작성자</th>
                            <th style="width:15%">작성일자</th>
                            <th style="width:20%">조회수</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' }" v-if="notice.ctgry_nm === 'policy'">
                                    <span class="category-zone">정책자료</span>
                                </td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }"
                                    v-else-if="notice.ctgry_nm === 'research'"><span class="category-zone">연구자료</span></td>
                                <td :class="{ 'first-row': notice.notice_yn === 'Y' }" v-else><span
                                        class="category-zone">가이드라인</span></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 v-if="post.ctgry_nm === 'policy'"><span class="category-zone">정책자료</span></td>
                                <td v-else-if="post.ctgry_nm === 'research'"><span class="category-zone">연구자료</span></td>
                                <td v-else><span class="category-zone">가이드라인</span></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 style="font-size: 12px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="bottom-wrap">
                <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
                    :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import { useRoute } from 'vue-router';

export default {
    data() {

        return {
            postListSearch: {
                currentPage: 1,
                perPage: 10,
                searchType: 'all',
                searchText: null,
                ctgry_nm: null,
                bbs_id: '0',
                sort: 'dt'
            },
            page_nm: '자료집',
            postList: [],
            postNoticeList: [],
            postListCount: 0,
            postIdx: 0,
            categoryName: '전체',
            route: useRoute(),
            // 최신순 조회순
            sorts: [{ name: '최신순', value: 'dt' },
            { name: '조회수순', value: 'view' }],
            activeIndex: 0,

            // 자료실 버튼
            buttons: Array(3).fill(),
            activeButton: null,

            buttons: [
                {
                    name: '정책자료', content: '· 개발 지원 정책 문서', class: 'data-bos-btn1',
                    content2: '· 법·제도 문서 등 ', defaultColor: '#a5abb4',
                    color: '#dfecfc', clicked: false, value: 'policy'
                },
                {
                    name: '연구자료', content: '서비스 모델, 프로토타입 연구·보고서 등', class: 'data-bos-btn2',
                    defaultColor: '#87b099', color: '#e6fff1', clicked: false, value: 'research'
                },
                { name: '가이드라인', content: '', class: 'data-bos-btn3', defaultColor: '#c1a984', color: '#f8e7cd', clicked: false, value: 'guide' },
            ],

            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();
        },

        clickButton(index) {
            this.buttons[index].clicked = !this.buttons[index].clicked;
            this.buttons.forEach((button, idx) => {
                if (idx === index) {
                    if (button.clicked) {
                        this.postListSearch.ctgry_nm = button.value;
                        this.postSelectList();
                    } else {  
                        this.postListSearch.ctgry_nm = null;
                        this.postSelectList();
                    }
                } else {
                    button.clicked = false;
                }
            });

            switch (index) {
                case 0:
                    this.categoryName = this.buttons[index].clicked ? '정책자료' : '전체';
                    break;
                case 1:
                    this.categoryName = this.buttons[index].clicked ? '연구자료' : '전체';
                    break;
                default:
                    this.categoryName = this.buttons[index].clicked ? '가이드라인' : '전체';
                    break;
            }
            this.scrollToBottom();
        },
        scrollToBottom() {
            window.scrollTo({
                top: document.documentElement.scrollHeight,
                behavior: 'smooth'
            });
        },

        postSelectList: function () {
            const vm = this;
            console.log("0000", vm.postListSearch.ctgry_nm);
            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: '/DataDtali.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,
    },
    created() {
        if (this.route.query.type != undefined) {
            this.buttons[2].clicked = true;
            this.categoryName = '가이드라인'
            this.postListSearch.ctgry_nm = 'guide'
        }
    },
    mounted() {
        console.log('Data mounted');
        this.pageLogInsert();
        this.postSelectList();
    }
}
</script>


