<template>
	<div class="catalog-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 2 ------------------------------------->
		<section class="s2-BG section">
			<div class="parallax">
				<div class="container">
					<div class="row" v-if="catalogs.length">
						<div
							class="col-12 col-lg-3 mb-3"
							v-for="item in catalogs"
							:key="item._id"
							v-if="($route.params.lang === 'fa' && item.showInFa) || ($route.params.lang === 'en' && item.showInEn)"
						>
							<div class="s2-item">
								<img
									:src="item.cover"
									:alt="item.locale[$route.params.lang].title"
									:title="item.locale[$route.params.lang].title"
								/>
								<div class="s2-body">
									<a :href="item.file" target="_blank" :title="item.locale[$route.params.lang].title" download>{{
										content.s2.t1
									}}</a>
								</div>
							</div>
						</div>
					</div>

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

<script>
	import {
		fadeInAnimation,
		fadeInStaggerAnimation,
		leftToRightAnimation,
		leftToRightStaggerAnimation,
		numberAnimation,
		progressAnimation,
		rightToLeftAnimation
	} from '@/utils/animations'

	export default {
		data() {
			return {
				catalogs: null,
				defaultCover: '/img/BlogPage/page-title.png'
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				rightToLeftAnimation(this.$gsap),
					//--------------------------------------------------------- Section 1
					this.$gsap
						.timeline({
							scrollTrigger: {
								trigger: '.s2-BG',
								scrub: true,
								start: 'top top'
							}
						})
						.to($('.s1-Img-BG > div'), {
							duration: 9,
							opacity: 0,
							y: '50%'
						})
			})
		},
		async asyncData({ $axios, error }) {
			try {
				const catalogs = await $axios.get('/api/public/catalogs')

				return {
					catalogs: catalogs.data
				}
			} catch (e) {
				error({ status: 500, message: 'there is a problem here' })
			}
		},
		computed: {
			content() {
				return this.$store.state.content.catalog[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.catalog
			}
		}
	}
</script>
