<template>
	<div class="search_page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<div class="s2">
			<div class="container">
				<div class="row">
					<div class="col-12 view-items" v-if="blogs.length">
						<h2>{{ content.s2.t1 }}</h2>
						<nuxt-link
							:to="{
								name: 'lang-blog-post',
								params: { lang: $route.params.lang, post: item.locale[$route.params.lang].title }
							}"
							class="view-item"
							v-for="item in blogs"
							:key="item._id"
						>
							<i class="fa-solid fa-circle-check"></i>
							<p>{{ item.locale[$route.params.lang].title }}</p>
						</nuxt-link>
					</div>

					<div class="col-12 view-items" v-if="categoryGallery.length">
						<h2>{{ content.s2.t2 }}</h2>
						<nuxt-link
							:to="{ name: 'lang-gallery-images', params: { lang: $route.params.lang, images: item._id } }"
							class="view-item"
							v-for="item in categoryGallery"
							:key="item._id"
						>
							<i class="fa-solid fa-circle-check"></i>
							<p>{{ item.locale[$route.params.lang].title }}</p>
						</nuxt-link>
					</div>

					<div class="col-12 view-items" v-if="projects.length">
						<h2>{{ content.s2.t3 }}</h2>
						<nuxt-link
							:to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: 'all' } }"
							class="view-item"
							v-for="item in projects"
							:key="item._id"
						>
							<i class="fas fa-circle-check"></i>
							<p>{{ item.locale[$route.params.lang].title }}</p>
						</nuxt-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				blogs: [],
				categoryGallery: [],
				projects: [],
				defaultCover: '/img/GalleryPage/page-title.png'
			}
		},

		computed: {
			content() {
				return this.$store.state.content.search[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.contact
			}
		},

		async asyncData({ $axios, query }) {
			console.log('query', query)
			try {
				const search = await $axios.post(`/api/public/search?terms=${query.terms}`)

				return {
					blogs: search.data.blogs,
					categoryGallery: search.data.categoryGallery,
					projects: search.data.projects
				}
			} catch (e) {
				console.log('------e', e)
			}
		}
	}
</script>

<style scoped></style>
