<template>
    <div class="tech-page page">
        <div class="w1400">
            <div class="tech">
                <div class="page-logo flex-start">
                    <img src="../../../../resources/jpg/tech-logo.png" alt="">
                    <h1>기술문서</h1>
                </div>
                <div class="tech-box-category">


                    <div class="tech-category">
                        <div class="category-bar flex-start">
                            <div>
                                <input type="radio" name="category" id="all" :value=null style="display:none" checked
                                    @click="ctgry($event)">
                                <label for="all" class="category">전체</label>
                            </div>
                            <div>
                                <input type="radio" name="category" id="policy" value="api" style="display:none"
                                    @click="ctgry($event)">
                                <label for="policy" class="category">API</label>
                            </div>
                            <div>
                                <input type="radio" name="category" id="research" value="tech" style="display:none"
                                    @click="ctgry($event)">
                                <label for="research" class="category">기술리포트</label>
                            </div>
                            <div>
                                <input type="radio" name="category" id="guide" value="standard" style="display:none"
                                    @click="ctgry($event)">
                                <label for="guide" class="category">기술규격문서</label>
                            </div>
                            <div>
                                <input type="radio" name="category" id="service" value="service" style="display:none"
                                    @click="ctgry($event)">
                                <label for="service" class="category">서비스</label>
                            </div>
                        </div>

                    </div>


                   

                        <div class="btn-wrap  data-btn-wrap" style="padding: 0px;">
                            <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 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>
            <ul class="tech-bos">
                <li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
                    <div class="tech-box-sec-h3">
                        <h3>{{ item.post_title }}</h3>
                    </div>
                    <div v-if="item.ctgry_nm === 'api'">
                        <img src="../../../../resources/jpg/api.png" alt="">
                    </div>
                    <div v-if="item.ctgry_nm === 'standard'">
                        <img src="../../../../resources/jpg/techdocument.png" alt="">
                    </div>
                    <div v-if="item.ctgry_nm === 'tech'">
                        <img src="../../../../resources/jpg/tech.png" alt="">
                    </div>
                    <div v-if="item.ctgry_nm === 'service'">
                        <img src="../../../../resources/jpg/service.png" alt="">
                    </div>
                    <div>
                        <div class="keyword-zone">
                            <p class="keyword-zone" v-if="item.tech_doc_keyword">
                            <span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')" :key="keywordIndex">
                                {{ keyword }}
                            </span>
                        </p>
                        </div>
                       
                        <div class="flex">
                            <p class="date">{{ item.tech_doc_dt }}</p>
                            <p>조회수 <span>{{ item.view_cnt }}</span></p>
                        </div>
                    </div>
                    <div>
                        <!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
                        <button class="blue-btn"
                            @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
                    </div>
                </li>
                <li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
                    <div class="tech-box-fillter">
                        <div class="tech-box-sec-h3">
                            <div class="flex">
                                <h3>&nbsp;</h3>
                                <p>&nbsp;</p>
                            </div>
                        </div>
                        <div class="tech-box-sec-img">
                            <!-- 이미지자리 -->
                            &nbsp;
                        </div>
                        <div>
                            <p class="content-detail">&nbsp;</p>
                            <p class="date">&nbsp;</p>
                        </div>
                        <div>
                            <button class="blue-btn" @click="showAlert">바로가기</button>
                            <!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
                        </div>
                    </div>
                    <!-- <div class="overlay-text">준비 중 입니다.</div> -->
                </li>

            </ul>
            <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';

export default {
    data() {
        return {
            postListSearch: {
                currentPage: 1,
                perPage: 9,
                searchType: 'all',
                searchText: null,
                ctgry_nm:null,
                bbs_id: '3',
                sort: 'doc_dt'
            },
            page_nm: '기술문서',
            postList: [],
            postListCount: 0,
            postIdx: 0,
            // 최신순 조회순
            sorts: [{ name: '최신순', value: 'doc_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();
        },

        postSelectOnePage(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: '/TechnologyOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id, 'tech_doc_dt': item.tech_doc_dt } });
            }).catch(function (error) {
                alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
            })

        },

        postSelectList: function () {
            const vm = this;

            axios({
                url: '/post/newsSelectList.json',
                // 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);
        },

        showAlert: function () {
            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 }
            })
        },

        serviceEvent(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) {
                axios({
                    url: '/statistics/postLogInsert.json',
                    method: 'post',
                    hearder: {
                        'Content-Type': "application/json; charset=UTF-8",
                    },
                    data: item
                }).then(function (response) {
                    window.location.href = item.link_url;
                })

            }).catch(function (error) {
                alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
            })
        },

        ctgry:function(e){
            this.postListSearch.ctgry_nm = e.target.value;
            if(this.postListSearch.ctgry_nm === 'on'){
                this.postListSearch.ctgry_nm = null
            }
            this.postSelectList();
        }
    },
    watch: {

    },
    computed: {
        emptySpaces() {
            return new Array(9 - this.postList.length).fill(0);
        }
    },
    components: {
        PaginationButton: PaginationButton,
    },
    mounted() {
        console.log('Technology mounted');
        this.pageLogInsert();
        this.postSelectList();
    }
}
</script>



