<template>
	<div class="about-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 s1-title anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">
					{{ content.s1.t1 }}
				</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 img paddingCol">
						<img src="/img/AboutPage/_MG_9506.png" alt="" />
					</div>
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 d-flex align-items-center descImg">
						<div class="container anim-fadeInStagger">
							<div class="descContainer section">
								<h2 class="h2 staggerItem">{{ content.s2.t1 }}</h2>
								<p class="description staggerItem">
									{{ content.s2.t2 }}
								</p>
								<h6 class="h6 staggerItem">{{ content.s2.t3 }}</h6>
								<div class="col-12 staggerItem">
									<div class="row">
										<!--                    <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
										<div class="features col-12 col-lg-6">
											<i class="fas fa-check-circle"></i>
											<p>{{ content.s2.t4 }}</p>
										</div>
										<div class="features col-12 col-lg-6">
											<i class="fas fa-check-circle"></i>
											<p>{{ content.s2.t5 }}</p>
										</div>
										<div class="features col-12 col-lg-6">
											<i class="fas fa-check-circle"></i>
											<p>{{ content.s2.t6 }}</p>
										</div>
										<!--                    </div>-->
										<!--                    <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 paddingCol">-->
										<div class="features col-12 col-lg-6">
											<i class="fas fa-check-circle"></i>
											<p>{{ content.s2.t7 }}</p>
										</div>
										<div class="features col-12 col-lg-6">
											<i class="fas fa-check-circle"></i>
											<p>{{ content.s2.t8 }}</p>
										</div>
										<!--                    </div>-->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 3 ------------------------------------->
		<section class="s3-BG">
			<div class="parallax">
				<!--        <div class="container-fluid">-->
				<div class="row align-items-center">
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s3-col1 paddingCol">
						<div class="container anim-fadeInStagger">
							<h2 class="h2 staggerItem">{{ content.s3.t1 }}</h2>
							<p class="description staggerItem">
								{{ content.s3.t2 }}
							</p>
							<nuxt-link
								:to="{
									name: 'lang-activities',
									params: { lang: $route.params.lang }
								}"
								class="staggerItem"
								>{{ content.s3.t3 }}</nuxt-link
							>
						</div>
					</div>
					<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12 s3-col2 paddingCol">
						<div class="container-fluid anim-fadeInStagger">
							<div class="col-12 features-body">
								<nuxt-link
									:to="{
										name: 'lang-activities-piping',
										params: { lang: $route.params.lang }
									}"
								>
									<div class="features staggerItem">
										<img src="/img/AboutPage/piping.png" alt="" />
										<div>
											<h6 class="h6">{{ content.s3.t6 }}</h6>
											<span>
												{{ content.s3.t7 }}
											</span>
										</div>
									</div>
								</nuxt-link>
								<nuxt-link
									:to="{
										name: 'lang-activities-drilling',
										params: { lang: $route.params.lang }
									}"
								>
									<div class="features staggerItem">
										<img src="/img/AboutPage/1111.png" alt="" />
										<div>
											<h6 class="h6">{{ content.s3.t12 }}</h6>
											<span>
												{{ content.s3.t13 }}
											</span>
										</div>
									</div>
								</nuxt-link>
								<nuxt-link
									:to="{
										name: 'lang-activities-ward',
										params: { lang: $route.params.lang }
									}"
								>
									<div class="features staggerItem">
										<img src="/img/AboutPage/petrochemical.png" alt="" />
										<div>
											<h6 class="h6">{{ content.s3.t4 }}</h6>
											<span>
												{{ content.s3.t5 }}
											</span>
										</div>
									</div>
								</nuxt-link>
								<nuxt-link
									:to="{
										name: 'lang-activities-sm',
										params: { lang: $route.params.lang }
									}"
								>
									<div class="features staggerItem">
										<img src="/img/AboutPage/2222.png" alt="" />
										<div>
											<h6 class="h6">{{ content.s3.t10 }}</h6>
											<span>
												{{ content.s3.t11 }}
											</span>
										</div>
									</div>
								</nuxt-link>
								<nuxt-link
									:to="{
										name: 'lang-activities-srp',
										params: { lang: $route.params.lang }
									}"
								>
									<div class="features staggerItem">
										<img src="/img/AboutPage/excavation.png" alt="" />
										<div>
											<h6 class="h6">{{ content.s3.t8 }}</h6>
											<span>
												{{ content.s3.t9 }}
											</span>
										</div>
									</div>
								</nuxt-link>
							</div>
						</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 4 -&#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="s4-BG">-->
		<!--      <div class="parallax section">-->
		<!--        <div class="container">-->
		<!--          <div class="row">-->
		<!--            <div class="col-12 col-md-12 col-lg-6 s4-col1 anim-fadeInStagger">-->
		<!--              <h2 class="h2 staggerItem">{{ content.s4.t1 }}</h2>-->
		<!--              <span class="staggerItem">-->
		<!--              {{ content.s4.t2 }}-->
		<!--            </span>-->
		<!--            </div>-->
		<!--            <div class="col-12 col-md-12 col-lg-6 s4-col2" v-if="projectCat.length > 0">-->
		<!--              <div class="progress"-->
		<!--                   v-for="item in projectCat"-->
		<!--                   :key="item._id"-->
		<!--              >-->
		<!--                <div class="d-flex justify-content-between">-->
		<!--                  <span>{{ item.locale[$route.params.lang].name }}</span>-->
		<!--                  <span>{{ getPercentage(item) }}%</span>-->
		<!--                </div>-->

		<!--                <div class="progress-Parent">-->
		<!--                  <div class="progress-Child anim-progress"-->
		<!--                       :style="{width: `${projects.filter(e =>  e.category._id === item.id).length * 100 / projects.length}%`}"></div>-->
		<!--                </div>-->
		<!--              </div>-->
		<!--            </div>-->

		<!--            <div class="col-12 col-md-12 col-lg-6 s4-col3" v-else>-->
		<!--              <h6 class="h6 notFound">{{ content.s4.t3 }}</h6>-->
		<!--            </div>-->

		<!--          </div>-->
		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->

		<!---------------------------------- Section 5 ------------------------------------->
		<!--    <section class="s5-Img-BG">-->
		<!--      <div class="parallax section">-->
		<!--        <div class="container">-->
		<!--          <div class="title anim-fadeIn">-->
		<!--            <h1 class="h2">{{ content.s5.t1 }}</h1>-->
		<!--            <h1 class="h2">{{ content.s5.t2 }}</h1>-->
		<!--          </div>-->
		<!--          <div class="row anim-fadeIn" v-if="projectCat.length > 0">-->
		<!--            <div class="col-12 col-lg-4 mb-3" v-for="cat in projectCat" :key="cat._id">-->
		<!--              <h1 class="h1 s5-num1 anim-number">{{-->
		<!--                  projects.filter(item => {-->
		<!--                    if (item.category._id) return item.category._id === cat._id-->
		<!--                  }).length-->
		<!--                }}</h1>-->
		<!--              <span>{{ cat.locale[$route.params.lang].name }}</span>-->
		<!--            </div>-->
		<!--          </div>-->

		<!--          <div class="row" v-else>-->
		<!--            <div class="col-12">-->
		<!--              <h6 class="h4 notFound1">{{ content.s5.t3 }}</h6>-->
		<!--            </div>-->
		<!--          </div>-->

		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->

		<!---------------------------------- Section 6 ------------------------------------->
		<section class="s6-BG">
			<div class="parallax section">
				<div class="container">
					<h2 class="h2 s6-h1-title anim-fadeIn">{{ content.s6.t1 }}</h2>
					<div class="row s6-team" v-if="team.length > 0">
						<div class="col-12 col-sm-6 col-lg-3 mb-3 anim-fadeIn" v-for="item in team" :key="item._id">
							<div class="team-View">
								<img
									:src="item.image"
									:alt="item.locale[$route.params.lang].first_name + ' ' + item.locale[$route.params.lang].last_name"
								/>
								<div class="title-Img">
									<p>
										{{ item.locale[$route.params.lang].first_name + ' ' + item.locale[$route.params.lang].last_name }}
									</p>
									<span>{{ item.locale[$route.params.lang].position }}</span>
								</div>
							</div>
						</div>
					</div>

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

		<!---------------------------------- Section 6 ------------------------------------->
		<section class="s11-BG">
			<div class="parallax section">
				<div class="container-fluid">
					<h2 class="h2 s11-h1-title anim-fadeIn">{{ content.s11.t1 }}</h2>
					<div class="row s11-chart">
						<div class="col-12 mb-3 anim-fadeIn">
							<img src="/img/chart.jpg" alt="" v-if="$route.params.lang === 'fa'" />
							<img src="/img/Chart-Latin.jpg" alt="" v-if="$route.params.lang === 'en'" />
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 7 ------------------------------------->
		<section class="s7-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 s7-view-title">
						<h2 class="h2 s7-title anim-fadeIn">{{ content.s7.t3 }}</h2>
					</div>
					<div class="col-12 col-lg-6 order-1 order-lg-0 s7-Body paddingCol">
						<div class="container s7-body-row anim-fadeInStagger">
							<div class="s7-Title staggerItem">
								<h6 class="h6">{{ content.s7.t1 }}</h6>
							</div>
							<div class="s7-desc staggerItem">
								<span>{{ content.s7.t2 }}</span>
							</div>
							<img src="/img/LogoCompany/5.png" alt="" />
							<el-button type="text" @click="dialogVisible1 = true" class="staggerItemSeeBTN">
								{{ content.s7.t4 }}
							</el-button>

							<el-dialog title="" :visible.sync="dialogVisible1" width="23%" center>
								<div class="row">
									<div class="col-12">
										<img src="/img/AboutPage/GTC.png" :alt="content.s7.t1" width="100%" />
									</div>
								</div>
								<el-button @click="dialogVisible1 = false">{{ content.s7.t5 }}</el-button>
							</el-dialog>
						</div>
					</div>
					<div class="col-12 col-lg-6 order-0 order-lg-1 paddingCol">
						<div class="s7-Img">
							<img src="/img/AboutPage/gtc.jpg" alt="" />
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 8 ------------------------------------->
		<section class="s8-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-lg-6 paddingCol">
						<div class="s8-Img">
							<img src="/img/AboutPage/npa.jpg" alt="" />
						</div>
					</div>
					<div class="col-12 col-lg-6 s8-Body paddingCol">
						<div class="container s8-body-row anim-fadeInStagger">
							<div class="s8-Title staggerItem">
								<h6 class="h6">{{ content.s8.t1 }}</h6>
							</div>
							<div class="s8-desc staggerItem">
								<span>{{ content.s8.t2 }}</span>
							</div>

							<!--              <div class="s8-Title staggerItem">-->
							<!--                <h6 class="h6">{{ content.s8.t3 }}</h6>-->
							<!--              </div>-->
							<!--              <div class="s8-desc staggerItem">-->
							<!--                <span>{{ content.s8.t4 }}</span>-->
							<!--              </div>-->
							<img src="/img/LogoCompany/4.png" alt="" />
							<el-button type="text" @click="dialogVisible2 = true" class="staggerItemSeeBTN">
								{{ content.s7.t4 }}
							</el-button>

							<el-dialog title="" :visible.sync="dialogVisible2" width="50%" center>
								<div class="row">
									<div class="col-12 col-md-6">
										<img src="/img/AboutPage/Engemasa1.png" :alt="content.s7.t1" width="100%" />
									</div>
									<div class="col-12 col-md-6">
										<img src="/img/AboutPage/Engemasa2.png" :alt="content.s7.t1" width="100%" />
									</div>
								</div>
								<el-button @click="dialogVisible2 = false">{{ content.s7.t5 }}</el-button>
							</el-dialog>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 9 ------------------------------------->
		<section class="s9-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-lg-6 order-1 order-lg-0 s9-Body paddingCol">
						<div class="container s9-body-row anim-fadeInStagger">
							<div class="s9-Title staggerItem">
								<h6 class="h6">{{ content.s9.t1 }}</h6>
							</div>
							<div class="s9-desc staggerItem">
								<span>{{ content.s9.t2 }}</span>
							</div>
							<img src="/img/LogoCompany/3.png" alt="" />
							<el-button type="text" @click="dialogVisible3 = true" class="staggerItemSeeBTN">
								{{ content.s7.t4 }}
							</el-button>

							<el-dialog title="" :visible.sync="dialogVisible3" width="23%" center>
								<div class="row">
									<div class="col-12">
										<img src="/img/AboutPage/Hj.png" :alt="content.s7.t1" width="100%" />
									</div>
								</div>
								<el-button @click="dialogVisible3 = false">{{ content.s7.t5 }}</el-button>
							</el-dialog>
						</div>
					</div>
					<div class="col-12 col-lg-6 order-0 order-lg-1 paddingCol">
						<div class="s9-Img">
							<img src="/img/AboutPage/metal.jpg" alt="" />
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 10 ------------------------------------->
		<section class="s10-BG">
			<div class="parallax">
				<div class="row">
					<div class="col-12 col-lg-6 paddingCol">
						<div class="s10-Img">
							<img src="/img/AboutPage/wonjin.jpeg" alt="" />
						</div>
					</div>
					<div class="col-12 col-lg-6 s10-Body paddingCol">
						<div class="container s10-body-row anim-fadeInStagger">
							<div class="s10-Title staggerItem">
								<h6 class="h6">{{ content.s10.t1 }}</h6>
							</div>
							<div class="s10-desc staggerItem">
								<span>{{ content.s10.t2 }}</span>
							</div>
							<img src="/img/LogoCompany/2.png" alt="" />
							<el-button type="text" @click="dialogVisible4 = true" class="staggerItemSeeBTN">
								{{ content.s7.t4 }}
							</el-button>

							<el-dialog title="" :visible.sync="dialogVisible4" width="23%" center>
								<div class="row">
									<div class="col-12">
										<img src="/img/AboutPage/WONJIN.png" :alt="content.s7.t1" width="100%" />
									</div>
								</div>
								<el-button @click="dialogVisible4 = false">{{ content.s7.t5 }}</el-button>
							</el-dialog>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 12 logo company ------------------------------------->
		<!--    <section class="s12-BG">-->
		<!--      <div class="parallax">-->
		<!--        <h2>مشتریان ما</h2>-->
		<!--        <div class="row">-->
		<!--          <div class="col-12 col-md-4">-->
		<!--            <img src="/img/LogoCompany/logo1.png" alt="">-->
		<!--          </div>-->
		<!--          <div class="col-12 col-md-4">-->
		<!--            <img src="/img/LogoCompany/logo2.png" alt="">-->
		<!--          </div>-->
		<!--          <div class="col-12 col-md-4">-->
		<!--            <img src="/img/LogoCompany/logo3.png" alt="">-->
		<!--          </div>-->
		<!--          <div class="col-12 col-md-4">-->
		<!--            <img src="/img/LogoCompany/logo4.png" alt="">-->
		<!--          </div>-->
		<!--          <div class="col-12 col-md-4">-->
		<!--            <img src="/img/LogoCompany/logo5.png" alt="">-->
		<!--          </div>-->
		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->
	</div>
</template>

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

	export default {
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				//--------------------------------------------------------- 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%'
					})
			})
		},
		methods: {
			lineRed() {
				this.projects.length
			},
			getPercentage(item) {
				return Math.floor(
					(this.projects.filter(e => {
						if (e.category._id) return e.category._id === item.id
					}).length *
						100) /
						this.projects.length
				)
			}
		},
		data() {
			return {
				team: null,
				projects: null,
				projectCat: null,
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisible3: false,
				dialogVisible4: false,
				defaultCover: '/img/AboutPage/page-title.png'
			}
		},
		async asyncData({ $axios, error }) {
			try {
				const allData = await Promise.all([
					// fetch team [0]
					$axios.get('/api/public/teams'),
					// fetch projects [1]
					$axios.get('/api/public/projects'),
					// fetch project categories [2]
					$axios.get('/api/public/projectCategories')
				])
				const team = allData[0]
				const projects = allData[1]
				const projectCat = allData[2]

				return {
					team: team.data,
					projects: projects.data,
					projectCat: projectCat.data
				}
			} catch (e) {
				error({ status: 500, message: 'there is a problem here' })
			}
		},
		computed: {
			content() {
				return this.$store.state.content.about[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.aboutUS
			}
		}
	}
</script>
<style scoped>
	.about-page span {
		display: block;
		text-align: justify;
	}
</style>
