<template>
    <div class="content">
        <div class="sub-title-area mb-30">
            <h2>통합검색</h2>
            <div class="breadcrumb-list">
                <ul>
                    <!-- Bind the image source dynamically for homeicon -->
                    <li><img :src="homeicon" alt="Home Icon"><p></p></li>
                    <li><img :src="righticon" alt=""></li>
                    <li>통합검색</li>
                </ul>
            </div>
        </div>
        <form action="search" class="search-form mb-40">
            <dl>
                <dd class="mb-15">
                    <p>기록유형</p>
                    <ul>
                        <li v-for="(option, index) in checkOptions" :key="index">
                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
                            <label :for="'check_button_' + index">{{ option }}</label>
                        </li>
                    </ul>
                </dd>
                <dd class="mb-15">
                    <p>검색범위</p>
                    <ul>
                        <li v-for="(option, index) in checkOptions2" :key="index">
                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
                            <label :for="'check_button_' + index">{{ option }}</label>
                        </li>
                    </ul>
                </dd>
                <dd class="mb-15">
                    <p>검색어</p>
                    <div class="wfull"><input type="text"></div>
                </dd>
                <dd class="mb-15">
                    <p>생산연도</p>
                    <input type="date">
                    <p class="mark">~</p>
                    <input type="date">
                </dd>
                <dd class="mb-20">
                    <p>카테고리</p>
                    <ul>
                        <li v-for="(option, index) in checkOptions3" :key="index">
                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
                            <label :for="'check_button_' + index">{{ option }}</label>
                        </li>
                    </ul>
                </dd>
                <dd class="mb-15">
                    <p>정렬</p>
                    <ul>
                        <li v-for="(option, index) in checkOptions4" :key="index">
                            <input type="radio" :id="'radio_button_' + index" :name="'radio_button_' + index" />
                            <label :for="'radio_button_' + index">{{ option }}</label>
                        </li>
                    </ul>
                </dd>
                <div class="btn-group">
                    <button class="reset"><img :src="reseticon" alt="">
                        <p>초기화</p>
                    </button>
                    <button class="search"><img :src="searchicon" alt="">
                        <p>검색</p>
                    </button>
                </div>

            </dl>

        </form>
        <div class="search-result">
            <ul>
                <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30">
                    <div class="flex-sp-bw mb-20">
                        <div class="resultext">
                            <img :src="resulticon" alt="">
                            <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p>
                        </div>
                        <router-link :to="{ path: '/' + resultitem.id }" class="gopage">모두보기</router-link>
                    </div>
                    <div class="result-box">
                        <div class="main-img"><img :src="resultitem.img" alt=""></div>
                        <div class="text-box">
                            <h5>{{ resultitem.title }}</h5>
                            <p class="address">{{ resultitem.address }}</p>
                            <p class="text">{{ resultitem.content }}</p>
                            <div class="mb-20">
                                <ul class="category">
                                    <li v-if="resultitem.category1" class="category1">카테고리1</li>
            <li v-if="resultitem.category2" class="category2">카테고리2</li>
                                </ul>
                            </div>
                            <div class="date">
                                <ul>
                                    <li>생산연도 <b>{{ resultitem.year }}</b></li>
                                    <li>|</li>
                                    <li>등록 <b>{{ resultitem.date }}</b></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            resulticon: "client/resources/images/icon/r-check.png",
            homeicon: 'client/resources/images/icon/home.png',
            searchicon: 'client/resources/images/icon/search.png',
            reseticon: 'client/resources/images/icon/reset.png',
            righticon: 'client/resources/images/icon/right.png',
            checkOptions: [
                '전체',
                '사진',
                '영상',
                '미디어 영상',
                '보도자료',
            ],
            checkOptions2: [
                '전체',
                '제목',
                '내용',
                '주소',
            ],
            checkOptions3: [
                '카테고리1',
                '카테고리2',
                '카테고리3',
                '카테고리4',
                '카테고리5',
            ],
            checkOptions4: [
                '최신',
                '인기',
            ],
            resultitems: [
                {
                    count: 5,
                    img: 'client/resources/images/img6.png',
                    title: '사진 기록물 제목',
                    address: '경상북도 구미시 송정대로 55',
                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
                    category1: true,
                    category2: true,
                    year: 2020,
                    date: '2021-01-01',
                    id: 'PicHistorySearch.page'
                },
                {
                    count: 3,
                    img: 'client/resources/images/img6.png',
                    title: '영상 기록물 제목',
                    address: '경상북도 구미시 송정대로 55',
                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
                    category1: true,
                    category2: false,
                    year: 2021,
                    date: '2022-01-01'
                },
                {
                    count: 3,
                    img: 'client/resources/images/img6.png',
                    title: '미디어 영상 제목',
                    address: '경상북도 구미시 송정대로 55',
                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
                    category1: true,
                    category2: false,
                    year: 2021,
                    date: '2022-01-01'
                },
                {
                    count: 3,
                    img: 'client/resources/images/img6.png',
                    title: '보도자료 제목',
                    address: '경상북도 구미시 송정대로 55',
                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
                    category1: true,
                    category2: false,
                    year: 2021,
                    date: '2022-01-01'
                },
            ]
        };
    }
};
</script>
