<template>
    <div class="content pt50 pb50">
        <div class="w1400">
            <div class="search-bar mb30">
                <input type="text" class="full-input search-input" placeholder="검색어를 입력하세요." v-model="inputSearchText" @keyup.enter="totalSearch"/>
                <button class="icon-button search-button" @click="totalSearch">
                    <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
                </button>
            </div>
            <div class="search-content">
                <p class="mb30 box-title"><strong>{{ search.searchText }}</strong>에 대한 <strong class="red-text">총 {{ totalCount }}</strong>건의 검색결과를
                    찾았습니다.</p>
                <ul>
                    <li class="mb30" v-for="(item, idx) in pageList" :key="idx">
                        <div class="border background radius pd10">
                            <p class="chart-title">{{ item.fullMenuNm }} ({{ item.totalListCount }}건)</p>
                        </div>
                        <ul class="mb10">
                            <li class="pd10 border-b" v-for="(subItem, subIdx) in item.previewList" @click="fnView(item, subItem)" style="cursor: pointer;" :key="subIdx">
                                <div class="flex justify-start align-center mb10">
                                    <div v-if="subItem.title != null && subItem.title != ''" class="gd-10">
                                        <p class="detail-bold ">{{ subItem.title }}</p>
                                    </div>
                                    <div v-else class="gd-10">
                                        <p class="detail-bold ">Q.</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">{{ subItem.regDt }}</p>
                                    </div>
                                </div> 
                                <div class="content-warp gd-12">
                                    <p class="date-text">{{ subItem.content }}</p>
                                </div>
                            </li>
                        </ul>
                        <div v-show="item.totalListCount > 5" class="flex justify-end align-center no-gutters">
                            <div class="gd-1">
                                <button class="large-btn darkg-border-btn" @click="fnViewList(item)" style="cursor: pointer;">더보기 <svg-icon type="mdi"
                                        :path="path"></svg-icon></button>
                            </div>
                        </div>
                    </li>
                    <!-- <li class="mb30">
                        <div class="border background radius pd10">
                            <p class="chart-title">기업정보(메뉴명)</p>
                        </div>
                        <ul class="mb10">
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                        </ul>
                        <div class="flex justify-end align-center no-gutters">
                            <div class="gd-1">
                                <button class="large-btn darkg-border-btn">더보기 <svg-icon type="mdi"
                                        :path="path"></svg-icon></button>
                            </div>
                        </div>
                    </li>
                    <li class="mb30">
                        <div class="border background radius pd10">
                            <p class="chart-title">기업정보(메뉴명)</p>
                        </div>
                        <ul class="mb10">
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                            <li class="pd10 border-b">
                                <div class="flex justify-start align-center mb10">
                                    <div class="gd-10">
                                        <p class="detail-bold ">검색내용에 대한 제목</p>
                                    </div>
                                    <div class="gd-2">
                                        <p class="date-text text-rg">2024-05-02</p>
                                    </div>
                                </div>
                                <div class="content-warp gd-12">
                                    <p class="date-text">수행방법 8 2. 인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2)
                                        네이버 이슈 9 2) 네이버 블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터
                                        분석 21 1) 네이버 21 1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어수행방법 8 2.
                                        인터넷 검색어‘한옥기술’빅데이터 분석 9 1) 네이버 뉴스‘한옥기술’검색어의 주요 이슈 9 2) 네이버 이슈 9 2) 네이버
                                        블로그‘한옥기술’검색어의 주요 이슈 16 3) 한옥기술의 인식 변화 20 3. 인터넷 검색어‘한옥 건축비’빅데이터 분석 21 1) 네이버21
                                        1) 네이버 뉴스‘한옥 건축비’검색어의 주요 이슈 21 2) 네이버 블로그‘한옥 건축비’검색어</p>
                                </div>
                            </li>
                        </ul>
                        <div class="flex justify-end align-center no-gutters">
                            <div class="gd-1">
                                <button class="large-btn darkg-border-btn">더보기 <svg-icon type="mdi"
                                        :path="path"></svg-icon></button>
                            </div>
                        </div>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { toRaw } from 'vue'
import store from "../../../AppStore";
import queryParams from '../../../../../resources/js/queryParams';
import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js"
import { searchAll } from "../../../../../resources/api/search.js";

import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams.js"

export default {
    mixins: [queryParams],
    data() {
        return {
            search: { ...defaultTotalSearchParams },
            pageSearch: { ...defaultSearchParams },
            mbrId: store.state.mbrId || null, // 사용자 아이디
            roles: store.state.roles.map(auth => auth.authority) || [], // 사용자 권한
            menuType: store.state.userType || null, // 메뉴 타입
            inputSearchText: '',
            totalCount: 0,
            menuCount: 0,
            menuList: [],
            pageCount: 0,
            pageList: [],
            
        }
    },
    created() {
        this.resotreQueryParams('totalSearchQueryParams');
        this.checkSearchText();
    },
    methods: {
        // 검색어 확인
        checkSearchText() {
            if(this.search.searchText !== "") {
                this.inputSearchText = this.search.searchText;
                this.totalSearch();
            }
        },

        // 통합 검색
        async totalSearch() {
            if(this.search.searchText === "") {
                alert("검색어를 입력해주세요.");
                return;
            }
            this.search.searchText = this.inputSearchText
            this.search.mbrId = this.mbrId;
            this.search.roles = this.roles;
            this.search.menuType = this.menuType;
            this.saveQueryParams('totalSearchQueryParams', this.search); // 검색조건 저장
            try {
                const res = await searchAll(toRaw(this.search));
                this.menuCount = res.data.data.menuCount;
                this.menuList = res.data.data.menuList;
                this.pageCount = res.data.data.pageCount;
                this.pageList = res.data.data.pageList;
                this.totalCount = this.menuCount + this.pageCount;
            } catch (error) {
                alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
            }
        },

        // 메뉴 목록으로 이동
        fnViewList(item) {
            this.$router.push({
                path: item.routerUrl
            });
        },

        // 메뉴 상세 조회로 이동
        fnView(item, subItem) {
            let menuPath = null;
            if(item.routerUrl.includes('.page')) {
                const lastSlashIndex = item.routerUrl.lastIndexOf('/'); // 마지막 '/' 인덱스
                menuPath = item.routerUrl.substring(0, lastSlashIndex) ; // 마지막 '/' 이전 경로
            }

            // 페이지 검색 조건 저장
            this.pageSearch.searchText = this.search.searchText;
            this.saveQueryParams('queryParams', this.pageSearch); // 검색조건 저장
            
            // 일반 검색 결과
            if(subItem.title != null && subItem.title != '') {
                this.$router.push({
                    path: menuPath + '/view.page',
                    query: {
                        pageId: subItem.pageId
                    },
                });
            }
            // 질의형 검색 결과
            else {
                this.$router.push({
                    path: item.routerUrl
                });
            }
        },
    },
    watch: {

    },
    computed: {
        path() {
            return this.$iconPath('mdiArrowRightDropCircleOutline');
        }
    },
    components: {
    },
    mounted() {
    }
}
</script>
