<template>
	<div class="gallery-page 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 3 ------------------------------------->
		<section class="s3-BG section">
			<div class="container">
				<template v-if="images.length">
					<div class="row">
						<div class="col-12 col-md-3" v-for="item in images" :key="item._id">
							<div class="imgBox">
								<a :href="item.image">
									<img :src="item.thumb" :alt="item.locale[$route.params.lang].title" />
								</a>
							</div>
						</div>
					</div>
				</template>

				<div class="row" v-else>
					<div class="col-12 s3-notFound">
						<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				images: null,
				cover: null,
				defaultCover: '/img/GalleryPage/page-title.png'
			}
		},

		mounted() {
			this.$nextTick(() => {
				new SimpleLightbox('.gallery-page .s3-BG .imgBox a')
			})

			//--------------------------------------------------------- Section 1
			// this.$gsap.timeline({
			//   scrollTrigger: {
			//     trigger: ".s2-BG",
			//     scrub: true,
			//     start: "top top",
			//   }
			// })
			//     .to($('.s1-Img-BG .parallax'), {
			//       duration: 9,
			//       opacity: 0,
			//       y: '50%'
			//     })
		},
		computed: {
			content() {
				return this.$store.state.content.gallery[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.gallery
			}
		},

		async asyncData({ $axios, params }) {
			try {
				const images = await $axios.get(`/api/public/gallery/${params.images}`)
				return {
					images: images.data
				}
			} catch (e) {
				console.log('e', e.message)
			}
		}
	}
</script>

<style scoped></style>
