<template>
	<div class="details-project-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section
			class="s1-Img-BG"
			:style="{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${project.cover})` }"
		>
			<div class="parallax">
				<h1 class="h1 anim-fadeIn">{{ project.locale[$route.params.lang].title }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-Img-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-img">
						<img :src="project.s2_image" :alt="project.locale[$route.params.lang].title" />
					</div>
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s2-desc-row">
						<div class="s2-body d-flex align-items-center">
							<div class="container anim-fadeInStagger">
								<div class="row">
									<h2 class="h2 staggerItem">{{ content.s2.t1 }}</h2>
									<div class="s2-body-desc staggerItem">
										<span>{{ project.locale[$route.params.lang].description }}</span>
									</div>
									<div class="s2-Desc-View staggerItem">
										<div class="row align-items-stretch s2-list-row">
											<div class="col-12 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].client">
												<h6 class="h6">{{ content.s2.t2 + ' : ' }}</h6>
											</div>
											<div
												class="col-12 col-md-10 mb-3 mb-md-0 s2-Desc"
												v-if="project.locale[$route.params.lang].client"
											>
												<p>{{ project.locale[$route.params.lang].client || '******' }}</p>
											</div>
											<div class="col-6 col-md-2 s2-Desc" v-if="project.locale[$route.params.lang].skills">
												<h6 class="h6">{{ content.s2.t3 + ' : ' }}</h6>
											</div>
											<div
												class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
												v-if="project.locale[$route.params.lang].skills"
											>
												<p>{{ project.locale[$route.params.lang].size || '******' }}</p>
											</div>
											<div class="col-6 col-md-2 s2-Desc">
												<h6 class="h6" v-if="project.locale[$route.params.lang].area">{{ content.s2.t4 + ' : ' }}</h6>
											</div>
											<div
												class="col-6 col-md-10 mb-3 mb-md-0 s2-Desc"
												v-if="project.locale[$route.params.lang].website"
											>
												<p>{{ project.locale[$route.params.lang].area || '******' }}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 3 ------------------------------------->
		<section class="s3-BG">
			<div class="parallax">
				<div class="container">
					<div class="s3-body anim-fadeInStagger">
						<h6 class="h6 staggerItem">{{ project.locale[$route.params.lang].s3_title }}</h6>
						<div class="s3-desc staggerItem">
							<span>{{ project.locale[$route.params.lang].s3_description }}</span>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 4 ------------------------------------->
		<section class="s4-Img-BG">
			<div class="parallax">
				<div id="slides">
					<div class="slide" v-if="project.s4_image">
						<div class="content">
							<img :src="project.s4_image" :alt="project.locale[$route.params.lang].title" />
						</div>
					</div>

					<div class="slide" v-for="item in project.images" :key="item._id">
						<div class="content">
							<img :src="item.thumb" :alt="project.locale[$route.params.lang].title" />
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section lightBox ------------------------------------->
		<section class="lightBoxImages">
			<div class="images">
				<a
					v-for="(item, index) in project.images"
					:key="item._id + 1"
					:class="index === 0 ? 'btn' : 'hidden'"
					:href="item.image"
					>{{ content.s5.t1 }}</a
				>
			</div>
		</section>

		<!--    &lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; Section 5 -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
		<!--    <section class="s5-BG">-->
		<!--      <div class="parallax">-->
		<!--        <div class="row">-->
		<!--          <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
		<!--            <div class="s5-Img">-->
		<!--              <img :src="project.s5_image" :alt="project.locale[$route.params.lang].title"-->
		<!--              />-->
		<!--            </div>-->
		<!--          </div>-->

		<!--          <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s5-Body paddingCol">-->
		<!--            <div class="container anim-fadeInStagger">-->
		<!--              <div class="s5-Title staggerItem">-->
		<!--                <h6 class="h6">{{ project.locale[$route.params.lang].s5_title }}</h6>-->
		<!--              </div>-->
		<!--              <div class="s5-desc staggerItem">-->
		<!--                <span>{{ project.locale[$route.params.lang].s5_description }}</span>-->
		<!--              </div>-->
		<!--            </div>-->
		<!--          </div>-->
		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->

		<!--    &lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; Section 6 -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
		<!--    <section class="s6-BG">-->
		<!--      <div class="parallax">-->
		<!--        <div class="row">-->
		<!--          <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s6-Body paddingCol">-->
		<!--            <div class="container s6-body-row anim-fadeInStagger">-->
		<!--              <div class="s6-Title staggerItem">-->
		<!--                <h6 class="h6">{{ project.locale[$route.params.lang].s6_title }}</h6>-->
		<!--              </div>-->
		<!--              <div class="s6-desc staggerItem">-->
		<!--                <span>{{ project.locale[$route.params.lang].s6_description }}</span>-->
		<!--              </div>-->
		<!--            </div>-->
		<!--          </div>-->
		<!--          <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
		<!--            <div class="s6-Img">-->
		<!--              <img :src="project.s6_image" :alt="project.locale[$route.params.lang].title"-->
		<!--              />-->
		<!--            </div>-->
		<!--          </div>-->
		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->

		<!---------------------------------- Section 7 ------------------------------------->
		<section class="s7-BG">
			<div class="parallax">
				<div class="container">
					<div class="s7-body">
						<h6 class="h6">{{ content.s7.t1 }}</h6>
						<div class="s7-desc">
							<span>{{ content.s7.t2 }}</span>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	if (process.client) require('slick-carousel')

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

	export default {
		data() {
			return {
				project: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				rightToLeftAnimation(this.$gsap)
				// 
				new SimpleLightbox('.details-project-page .lightBoxImages a')

				$('#slides').slick({
					autoplay: true,
					accessibility: false,
					arrows: false,
					dots: false,
					rtl: this.$route.params.lang === 'fa'
					//   infinite: true,
					//   speed: 500,
					//   fade: true,
					//   cssEase: "linear",
				})

				//--------------------------------------------------------- Section 1
				this.$gsap
					.timeline({
						scrollTrigger: {
							trigger: '.s2-Img-BG',
							scrub: true,
							start: 'top top'
						}
					})
					.to($('.s1-Img-BG .parallax'), {
						duration: 9,
						opacity: 0,
						y: '50%'
					})
			})
		},
		async asyncData({ $axios, params, error }) {
			try {
				const project = await $axios.get(`/api/public/project/${params.project}`)

				return {
					project: project.data
				}
			} catch (e) {
				error({ status: 404, message: 'page not found' })
			}
		},
		computed: {
			content() {
				return this.$store.state.content.detailsProject[this.$route.params.lang]
			}
		}
	}
</script>
