<template>
    <div class="data-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/wgcon.png" alt="전문가협의체 아이콘" class="title-icon">
                    <h2 class="main-title">전문가 협의체</h2>
                </div>
            </div>
            <div class="content-wrap">
                <div class="top-bar">
                    <div class="flex-end">
                        <div class="data-select">
                            <select name="" id="" v-model="postListSearch.ctgry_nm">
                                <option value=null>워킹그룹</option>
                                <option value="WG1">교육과정 표준체계</option>
                                <option value="WG2">맞춤학습지원 기능</option>
                                <option value="WG3">접근성/UDL</option>
                                <option value="WG4">클라우드 보안인증</option>
                                <option value="WG5">통합인증체계</option>
                                <option value="WG6">학습이력데이터/통합대시보드</option>
                                <option value="WG7">AI 트레이닝 데이터</option>
                                <option value="WG8">국가수준 학습분석</option>
                                <option value="WG9">학교 인프라</option>
                                <option value="WG10">서비스 품질관리</option>
                                <option value="WG11">서비스 정책</option>
                            </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>
                <!-- 최신순 조회순 -->
                <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>
                <table class="select-category-table">
                    <thead>
                        <tr>
                            <th style="width:5%">no</th>
                            <th style="width:20%">워킹그룹</th>
                            <th style="width:43%">제목</th>
                            <th style="width:10%">작성자</th>
                            <th style="width:15%">작성일자</th>
                            <th style="width:7%">조회수</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
                            <td>{{ postIdx - idx }}</td>
                            <td v-if="item.ctgry_nm === 'WG1'" style="text-align: left;"><span
                                    class="category-zone">(WG1)교육과정 표준체계</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG2'" style="text-align: left;"><span
                                    class="category-zone">(WG2)맞춤학습지원 기능</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG3'" style="text-align: left;"><span
                                    class="category-zone">(WG3)접근성/UDL</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG4'" style="text-align: left;"><span
                                    class="category-zone">(WG4)클라우드 보안인증</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG5'" style="text-align: left;"><span
                                    class="category-zone">(WG5)통합인증체계</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG6'" style="text-align: left;"><span
                                    class="category-zone">(WG6)학습이력데이터/통합대시보드</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG7'" style="text-align: left;"><span
                                    class="category-zone">(WG7)AI 트레이닝 데이터</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG8'" style="text-align: left;"><span
                                    class="category-zone">(WG8)국가수준 학습분석</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG9'" style="text-align: left;"><span
                                    class="category-zone">(WG9)학교 인프라</span></td>
                            <td v-else-if="item.ctgry_nm === 'WG10'" style="text-align: left;"><span
                                    class="category-zone">(WG10)서비스 품질관리</span></td>
                            <td v-else style="text-align: left;"><span class="category-zone">(WG11)서비스 정책</span></td>
                            <td style="text-align: left;">
                                {{ 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="6">검색조건에 해당하는 데이터가 없습니다.</td>
                        </tr>
                    </tbody>
                </table>
                <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: '4',
                ctgry_nm: null,
                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;

            if (vm.postListSearch.ctgry_nm === 'null') {
                vm.postListSearch.ctgry_nm = null
            }

            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: '/adm/wgSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
        },

        postInsertPage: function () {
            this.$router.push({ path: '/adm/wgInsert.page', query: {} })
        },
    },
    watch: {},
    computed: {},
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('Data mounted');
        this.postSelectList();
    }
};
</script>
