<template>
    <div class="content">
        <div :class="{ 'top-banner banner': true, [bannerId]: true }" v-if="this.$route.path.startsWith('/aidt')">
            <div class="flex-column align-center justify-center content">
                <h1 class="banner-title text-ct white" aria-live="assertive">통합검색</h1>
                <p class="box-title text-ct white"></p>
            </div>
        </div>
        <PageNavigationBar :navi="naviData"  v-if="this.$route.path.startsWith('/aidt')" />
        <div class="pt100 pb100">
            <div class="w1280">
                <div class="search-input-zone mb30">
                    <div class="relative">
                        <input type="text" class="full-input pl20" placeholder="검색어를 입력해주세요."
                            v-model="inputSearchText" @keyup.enter="fnSearch"
                            style="border-radius: 3rem; height: 6rem;" />
                        <button class="icon-btn  pd0 search-btn" aria-label="searchButton" id="searchButton" title="검색"
                            @click="fnSearch"><svg-icon type="mdi" :path="searchPath" role="img"
                                aria-labelledby="searchButton"></svg-icon></button>
                    </div>
                </div>
                <div class="search-result-zone mb30">
                    <p class="middle-title">'<span class="blue">{{ searchText }}</span>'에 대한 결과가 <span class="blue">{{
                            totalCnt }}</span>개 있습니다.</p>
                </div>
                <div class="search-content-zone">
                    <ul class="edu-tab flex justify-between align-center pd10 border radius mb30">
                        <template v-for="(row, idx) in tabList" :key="idx">
                            <li :class="{
                                'radius text-ct cursor pd10': true,
                                'active': viewTab === row.id,
                                ['gd-' + getClassIndex()]: true
                            }" @click="showTab(row.id)">
                                {{ row.tabName }}({{ row.count }})
                            </li>
                        </template>
                    </ul>
                    <div>
                        <div v-show="viewTab === 1">
                            <div>
                                <div class="pd30 border radius mb30">
                                    <div class="pb10 border-b mb30">
                                        <div class="flex justify-between align-center">
                                            <h2 class="box-bold-title ">공지사항({{ announcementCnt }})</h2>
                                            <button @click="fnList('announcement')" title="더보기">더보기 +</button>
                                        </div>
                                    </div>
                                    <div v-if="announcementList.length !== 0">
                                        <ul>
                                            <li class="pd30 border radius mb10 cursor"
                                                v-for="(announce, index) in announcementList.slice(0, 5)" :key="index"
                                                @click="fnView(announce, 'bbs')">
                                                <p class="box-bold-title  mb5 line2-ellipsis">{{ announce.bbsTtl }}</p>
                                                <p class="ellipsis mb5">{{ removeTag(announce.bbsCn) }}</p>
                                                <p class="detail-text gray"><span>등록일: {{ announce.frstRegDt
                                                        }}</span><span class="ml10">조회수: {{ announce.inqCnt }}</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="gd-12 " v-else>
                                        <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                    </div>
                                </div>
                                <div class="pd30 border radius mb30">
                                    <div class="pb10 border-b mb30">
                                        <div class="flex justify-between align-center">
                                            <h2 class="box-bold-title ">연구자료 ・ 기타자료({{ researchCnt }})</h2>
                                            <button @click="fnList('research')" title="더보기">더보기 +</button>
                                        </div>
                                    </div>
                                    <div v-if="researchList.length !== 0">
                                        <ul>
                                            <li class="pd30 border radius mb10 cursor"
                                                v-for="(research, index) in researchList.slice(0, 5)" :key="index"
                                                @click="fnView(research, 'bbs')">
                                                <p class="box-bold-title line2-ellipsis mb5">{{ research.bbsTtl }}</p>
                                                <p class="ellipsis mb5">{{ removeTag(research.bbsCn) }}</p>
                                                <p class="detail-text gray"><span>등록일: {{ research.frstRegDt
                                                        }}</span><span class="ml10">조회수: {{ research.inqCnt }}</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="gd-12" v-else>
                                        <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                    </div>
                                </div>
                                <div class="pd30 border radius mb30">
                                    <div class="pb10 border-b mb30">
                                        <div class="flex justify-between align-center">
                                            <h2 class="box-bold-title ">콘텐츠 ・ 뉴스룸({{ newsRoomCnt }})</h2>
                                            <button @click="fnList('newsRoom')" title="더보기">더보기 +</button>
                                        </div>
                                    </div>
                                    <div v-if="newsRoomList.length !== 0">
                                        <ul>
                                            <li class="pd30 border radius mb10 cursor"
                                                v-for="(newsRoom, index) in newsRoomList.slice(0, 5)" :key="index"
                                                @click="fnView(newsRoom, 'bbs')">
                                                <p class="box-bold-title line2-ellipsis  mb5">{{ newsRoom.bbsTtl }}</p>
                                                <p class="ellipsis mb5">{{ removeTag(newsRoom.bbsCn) }}</p>
                                                <p class="detail-text gray"><span>등록일: {{ newsRoom.frstRegDt
                                                        }}</span><span class="ml10">조회수: {{ newsRoom.inqCnt }}</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="gd-12" v-else>
                                        <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                    </div>
                                </div>
                                <div class="pd30 border radius mb30" v-if="!isCommonOrNotLoginUser()">
                                    <div class="pb10 border-b mb30">
                                        <div class="flex justify-between align-center">
                                            <h2 class="box-bold-title ">기술문서({{ techDocCnt }})</h2>
                                            <button @click="fnList('techDoc')" title="더보기">더보기 +</button>
                                        </div>
                                    </div>
                                    <div v-if="techDocList.length !== 0">
                                        <ul>
                                            <li class="pd30 border radius mb10 cursor"
                                                v-for="(techDoc, index) in techDocList.slice(0, 5)" :key="index"
                                                @click="fnView(techDoc, 'techDoc')">
                                                <p class="box-bold-title line2-ellipsis mb5">{{ techDoc.techDocNm }}</p>
                                                <p class="ellipsis mb5">{{ techDoc.bbsMainCn }}</p>
                                                <p class="detail-text gray"><span>등록일: {{ techDoc.bbsCrltnDt
                                                        }}</span><span class="ml10">조회수: {{ techDoc.inqCnt }}</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="gd-12 " v-else>
                                        <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                    </div>
                                </div>
                                <div class="pd30 border radius mb30" v-if="!isCommonOrNotLoginUser()">
                                    <div class="pb10 border-b mb30">
                                        <div class="flex justify-between align-center">
                                            <h2 class="box-bold-title ">교육 ・ 컨설팅({{ eduCnsltCnt }})</h2>
                                            <button @click="fnList('eduCnslt')" title="더보기">더보기 +</button>
                                        </div>
                                    </div>
                                    <div v-if="eduCnsltList.length !== 0">
                                        <ul>
                                            <li class="pd30 border radius mb10 cursor"
                                                v-for="(eduCnslt, index) in eduCnsltList.slice(0, 5)" :key="index"
                                                @click="fnView(eduCnslt, 'eduCnslt')">
                                                <p class="box-bold-title line2-ellipsis mb5">{{ eduCnslt.edu_cnslt_ttl
                                                    }}</p>
                                                <p class="ellipsis mb5">{{ removeTag(eduCnslt.edu_cnslt_cn) }}</p>
                                                <p class="detail-text gray"><span>등록일: {{
                                                        $formatUnixToDate(eduCnslt.frst_reg_dt)
                                                        }}</span><span class="ml10">조회수: {{ $comma(eduCnslt.inq_cnt) }}</span></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="gd-12 " v-else>
                                        <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="viewTab === 2">
                            <div class="pd30 border radius">
                                <div class="pb10 border-b mb30">
                                    <div class="flex justify-between align-center">
                                        <h2 class="box-bold-title ">공지사항({{ announcementCnt }})</h2>
                                        <button @click="fnList('announcement')" title="더보기">더보기 +</button>
                                    </div>
                                </div>
                                <div v-if="announcementList.length !== 0">
                                    <ul>
                                        <li class="pd30 border radius mb10 cursor"
                                            v-for="(announce, index) in announcementList" :key="index"
                                            @click="fnView(announce, 'bbs')">
                                            <p class="box-bold-title line2-ellipsis mb5">{{ announce.bbsTtl }}</p>
                                            <p class="ellipsis mb5">{{ removeTag(announce.bbsCn) }}</p>
                                            <p class="detail-text gray"><span>등록일: {{ announce.frstRegDt }}</span><span
                                                    class="ml10">조회수:
                                                    {{ announce.inqCnt }}</span></p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="gd-12 " v-else>
                                    <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                </div>
                            </div>
                        </div>
                        <div v-show="viewTab === 3">
                            <div class="pd30 border radius">
                                <div class="pb10  mb30">
                                    <div class="flex justify-between align-center">
                                        <h2 class="box-bold-title ">연구자료 ・ 기타자료({{ researchCnt }})</h2>
                                        <button @click="fnList('research')" title="더보기">더보기 +</button>
                                    </div>
                                </div>
                                <div v-if="researchList.length !== 0">
                                    <ul>
                                        <li class="pd30 border radius mb10 cursor"
                                            v-for="(research, index) in researchList" :key="index"
                                            @click="fnView(research, 'bbs')">
                                            <p class="box-bold-title line2-ellipsis mb5">{{ research.bbsTtl }}</p>
                                            <p class="ellipsis mb5">{{ removeTag(research.bbsCn) }}</p>
                                            <p class="detail-text gray"><span>등록일: {{ research.frstRegDt }}</span><span
                                                    class="ml10">조회수:
                                                    {{ research.inqCnt }}</span></p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="gd-12 " v-else>
                                    <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                </div>
                            </div>
                        </div>
                        <div v-show="viewTab === 4">
                            <div class="pd30 border radius">
                                <div class="pb10 border-b mb30">
                                    <div class="flex justify-between align-center">
                                        <h2 class="box-bold-title ">콘텐츠 ・ 뉴스룸({{ newsRoomCnt }})</h2>
                                        <button @click="fnList('newsRoom')" title="더보기">더보기 +</button>
                                    </div>
                                </div>
                                <div v-if="newsRoomList.length !== 0">
                                    <ul>
                                        <li class="pd30 border radius mb10 cursor"
                                            v-for="(newsRoom, index) in newsRoomList" :key="index"
                                            @click="fnView(newsRoom, 'bbs')">
                                            <p class="box-bold-title line2-ellipsis mb5">{{ newsRoom.bbsTtl }}</p>
                                            <p class="ellipsis mb5">{{ removeTag(newsRoom.bbsCn) }}</p>
                                            <p class="detail-text gray"><span>등록일: {{ newsRoom.frstRegDt }}</span><span
                                                    class="ml10">조회수:
                                                    {{ newsRoom.inqCnt }}</span></p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="gd-12" v-else>
                                    <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                </div>
                            </div>
                        </div>
                        <div v-show="viewTab === 5">
                            <div class="pd30 border radius">
                                <div class="pb10 border-b mb30">
                                    <div class="flex justify-between align-center">
                                        <h2 class="box-bold-title ">기술문서({{ techDocCnt }})</h2>
                                        <button @click="fnList('techDoc')" title="더보기">더보기 +</button>
                                    </div>
                                </div>
                                <div v-if="techDocList.length !== 0">
                                    <ul>
                                        <li class="pd30 border radius mb10 cursor"
                                            v-for="(techDoc, index) in techDocList" :key="index"
                                            @click="fnView(techDoc, 'techDoc')">
                                            <p class="box-bold-title line2-ellipsis mb5">{{ techDoc.techDocNm }}</p>
                                            <p class="ellipsis mb5">{{ techDoc.bbsMainCn }}</p>
                                            <p class="detail-text gray"><span>등록일: {{ techDoc.bbsCrltnDt }}</span><span
                                                    class="ml10">조회수:
                                                    {{ techDoc.inqCnt }}</span></p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="gd-12 " v-else>
                                    <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                </div>
                            </div>
                        </div>
                        <div v-show="viewTab === 6">
                            <div class="pd30 border radius">
                                <div class="pb10 border-b mb30">
                                    <div class="flex justify-between align-center">
                                        <h2 class="box-bold-title ">교육 ・ 컨설팅({{ eduCnsltCnt }})</h2>
                                        <button @click="fnList('eduCnslt')" title="더보기">더보기 +</button>
                                    </div>
                                </div>
                                <div v-if="eduCnsltList.length !== 0">
                                    <ul>
                                        <li class="pd30 border radius mb10 cursor"
                                            v-for="(eduCnslt, index) in eduCnsltList" :key="index"
                                            @click="fnView(eduCnslt, 'eduCnslt')">
                                            <p class="box-bold-title line2-ellipsis mb5">{{ eduCnslt.edu_cnslt_ttl }}
                                            </p>
                                            <p class="ellipsis mb5">{{ removeTag(eduCnslt.edu_cnslt_cn) }}</p>
                                            <p class="detail-text gray"><span>등록일: {{
                                                    $formatUnixToDate(eduCnslt.frst_reg_dt) }}</span><span
                                                    class="ml10">조회수: {{ $comma(eduCnslt.inq_cnt) }}</span></p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="gd-12" v-else>
                                    <p class="text-ct pd10">검색 결과가 없습니다.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import { mdiPause, mdiFileDownloadOutline, mdiFileSearchOutline, mdiMagnify } from '@mdi/js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import { toRaw } from 'vue'
import queryParams from '../../../../resources/js/queryParams';
import { defaultSearchParams } from '../../../../resources/js/defaultSearchParams';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';

//api
import { findAll } from '../../../../resources/api/search.js'

export default {
    mixins: [queryParams],
    data() {
        return {
            viewTab: 1,
            downloadPath: mdiFileDownloadOutline,
            pdfPath: mdiFileSearchOutline,
            bannerId: 'search-banner',
            path: this.$store.state.path,
            isPlaying: true,
            playPath: mdiPause,
            tabList: [],
            searchPath: mdiMagnify,
            search: { ...defaultSearchParams },
            path: this.$store.state.path,
            pageAuth: this.$store.state.pageAuth,
            role: this.$store.state.roles,
            pageId: this.$route.query.pageId,
            searchText: this.$route.query.searchText,
            pagination: {},
            inputSearchText: null,


            totalCnt: null,
            //공지사항
            announcementList: [],
            announcementCnt: null,
            //콘텐츠뉴스룸
            newsRoomList: [],
            newsRoomCnt: null,
            //연구자료
            researchList: [],
            researchCnt: null,
            //기술문서
            techDocList: [],
            techDocCnt: null,
            //교육컨설팅
            eduCnsltList: [],
            eduCnsltCnt: null,
             // 네비데이터 초기화
             naviData: {},
        }
    },
    methods: {
        showTab(tabId) {
            this.viewTab = tabId
        },
        getClassIndex() {
            const totalGrids = 12;
            const numTabs = this.tabList.length;
            return Math.floor(totalGrids / numTabs);
        },

        // 목록 조회
        async findAll() {
            this.search.recordSize = 10;
            this.saveQueryParams('queryParams', this.search); // 검색조건 저장
            try {
                this.$setLoading(true);
                const res = await findAll(toRaw(this.search));
                this.initList(res)
            } catch (error) {
                // alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
                alert(this.$getCmmnMessage('err005'));
            } finally {
                this.$setLoading(false);
            }
        },

        //
        initList(res) {
            const data = res.data.data;
            this.announcementList = data.announcement.list
            this.announcementCnt = data.announcement.cnt
            this.newsRoomList = data.newsRoom.list
            this.newsRoomCnt = data.newsRoom.cnt
            this.researchList = data.research.list
            this.researchCnt = data.research.cnt
            if (!this.isCommonOrNotLoginUser()) {
                this.techDocList = data.techDoc.list
                this.techDocCnt = data.techDoc.cnt
                this.eduCnsltList = data.eduCnslt.list
                this.eduCnsltCnt = data.eduCnslt.listCnt
            }

            if (this.isCommonOrNotLoginUser()) {
                this.totalCnt = this.announcementCnt + this.newsRoomCnt + this.researchCnt;
                this.tabList = [
                    { id: 1, tabName: "전체", count: this.totalCnt },
                    { id: 2, tabName: "공지사항", count: this.announcementCnt },
                    { id: 3, tabName: "연구자료 ・ 기타자료", count: this.researchCnt },
                    { id: 4, tabName: "콘텐츠 ・ 뉴스룸", count: this.newsRoomCnt }
                ];
            } else {
                this.totalCnt = this.announcementCnt + this.newsRoomCnt + this.researchCnt + this.techDocCnt + this.eduCnsltCnt;
                this.tabList = [
                    { id: 1, tabName: "전체", count: this.totalCnt },
                    { id: 2, tabName: "공지사항", count: this.announcementCnt },
                    { id: 3, tabName: "연구자료 ・ 기타자료", count: this.researchCnt },
                    { id: 4, tabName: "콘텐츠 ・ 뉴스룸", count: this.newsRoomCnt },
                    { id: 5, tabName: "기술문서", count: this.techDocCnt },
                    { id: 6, tabName: "교육 ・ 컨설팅", count: this.eduCnsltCnt }
                ];
            }
        },

        //일반회원 또는 비회원 유무
        isCommonOrNotLoginUser() {
            return this.role.some(role => role.authority === 'ROLE_NONE' || role.authority === 'ROLE_USER');
        },

        //상세페이지 이동
        fnView(item, type) {
            this.search.searchText = this.searchText;
            // this.saveQueryParams('queryParams', this.search); // 검색조건 저장

            if (type === 'bbs') {
                this.$router.push({
                    path: '/aidt/' + item.bbsMngId + '/view.page',
                    query: {
                        pageId: item.bbsId,
                    },
                });
            } else if (type === 'techDoc') {
                this.$router.push({
                    path: '/aidt/technicalSupport/technicaldocument/view.page',
                    query: {
                        pageId: item.bbsId,
                    },
                });
            } else if (type === 'eduCnslt') {
                this.$router.push({
                    path: '/aidt/tech/edu/view.page',
                    query: {
                        pageId: item.edu_cnslt_id,
                    },
                });
            }
        },
        //목록 페이지 이동
        fnList(type) {
            this.search.searchText = this.searchText;

            if (type === 'announcement') {
                this.$router.push({
                    path: '/aidt/BBS_MNG_0000000001/list.page',
                    query: {
                        searchText: this.searchText
                    },
                });
            } else if (type === 'research') {
                this.$router.push({
                    path: '/aidt/BBS_MNG_0000000002/list.page',
                    query: {
                        searchText: this.searchText
                    },
                });
            } else if (type === 'newsRoom') {
                this.$router.push({
                    path: '/aidt/BBS_MNG_0000000003/list.page',
                    query: {
                        searchText: this.searchText
                    },
                });
            } else if (type === 'techDoc') {
                this.$router.push({
                    path: '/aidt/technicalSupport/technicaldocument/list.page',
                    query: {
                        searchText: this.searchText
                    },
                });
            } else if (type === 'eduCnslt') {
                this.$router.push({
                    path: '/aidt/tech/edu/list.page',
                    query: {
                        searchText: this.searchText
                    },
                });
            }
        },
        //페이지 내 검색
        fnSearch() {
            this.searchText = this.inputSearchText
            this.search.searchText = this.inputSearchText
            this.findAll()
            this.$router.replace({
                name: 'search',
                query: { 'searchText': this.inputSearchText }
            });
        },

        // 내용 태그
        removeTag(data) {
            return COMMON_UTIL.removeTag(data);
        }

    },

    watch: {

    },
    computed: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,
        'PaginationButton': PaginationButton

    },
    created() {
        if (this.searchText != null) {
            this.resotreQueryParams('queryParams');
            this.search.searchType = 'bbsTtl';
            this.search.searchText = this.searchText;
            this.inputSearchText = this.searchText;
            this.findAll();
        } else {
            this.resotreQueryParams('queryParams');
            this.search.searchType = 'bbsTtl';
            this.findAll();
        }

    },
    mounted() {
        this.naviData = { 'main': '통합검색', 'sub': '' };
    }
}
</script>
