<template>
    <div class="wg-page page">
        <div class="w1400">
            <div class="page-logo">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/wgcon.png" alt="">
                    <h1>전문가 협의체</h1>
                </div>
                <div class="wg-wrap-h2">
                    <h2>개발(기술)영역별 전문가 협의체(WG)에서 AI디지털교과서 개발지원을 위한 연구에 참고한 문서를 공유합니다.</h2>
                </div>
            </div>
            <div class="wg-wrap">
                <div class="wg-wrap-search">
                    <!-- <p>※찾고자 하시는 문서의 제목을 입력하시거나 그룹또는 작성자를 입력하시면 보실 수 있습니다.</p> -->
                    <div class="wg-search-bos">
                        <div class="wg-search-grid">
                            <div class="wg-grid-1">
                                <div class="wg-title">
                                    <label for="authorSearch">워킹그룹</label>
                                    <select id="groupSelect" 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>
                                </div>
                                <div>
                                    <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>
                                <div>
                                    <input id="titleSearch" type="text" placeholder="검색어를 입력해주세요."
                                        v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
                                </div>
                                <button class="blue-btn" @click="postSelectList()"> 검색</button>

                            </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>
                    <div>
                        <table class="wg-table user-table-list">
                            <thead>
                                <tr>
                                    <th style="width:5%">no</th>
                                    <th style="width:23%">워킹그룹</th>
                                    <th style="width:45%">제목</th>
                                    <th style="width:5%">작성자</th>
                                    <th style="width:15%">작성일자</th>
                                    <th style="width:17%">조회수</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'"><span class="category-zone">(WG1)교육과정 표준체계</span>
                                    </td>
                                    <td v-else-if="item.ctgry_nm === 'WG2'"><span class="category-zone">(WG2)맞춤학습지원
                                            기능</span></td>
                                    <td v-else-if="item.ctgry_nm === 'WG3'"><span class="category-zone">(WG3)접근성/UDL</span>
                                    </td>
                                    <td v-else-if="item.ctgry_nm === 'WG4'"><span class="category-zone">(WG4)클라우드
                                            보안인증</span></td>
                                    <td v-else-if="item.ctgry_nm === 'WG5'"><span class="category-zone">(WG5)통합인증체계</span>
                                    </td>
                                    <td v-else-if="item.ctgry_nm === 'WG6'"><span
                                            class="category-zone">(WG6)학습이력데이터/통합대시보드</span></td>
                                    <td v-else-if="item.ctgry_nm === 'WG7'"><span class="category-zone">(WG7)AI 트레이닝
                                            데이터</span></td>
                                    <td v-else-if="item.ctgry_nm === 'WG8'"><span class="category-zone">(WG8)국가수준
                                            학습분석</span></td>
                                    <td v-else-if="item.ctgry_nm === 'WG9'"><span class="category-zone">(WG9)학교 인프라</span>
                                    </td>
                                    <td v-else-if="item.ctgry_nm === 'WG10'"><span class="category-zone">(WG10)서비스
                                            품질관리</span></td>
                                    <td v-else><span class="category-zone">(WG11)서비스 정책</span></td>
                                    <td class="board-title ">{{ 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>
                    <div class="bottom-wrap">
                        <PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
                            :totalCount="postListCount" :maxRange="5" :click="postSelectList" />
                    </div>
                </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
            },
            page_nm: '전문가협의체',
            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) {
            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: '/WgcommunityOne.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 }
            })
        }
    },
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('Data mounted');
        this.pageLogInsert();
        this.postSelectList();
    }
}
</script>