<template>
	<div class="project-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 Categories ------------------------------------->
		<section class="categories">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<nav>
							<ul>
								<nuxt-link
									class="all-categories"
									:to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: 'all' } }"
									tag="li"
								>
									<a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t9 }}</a>
								</nuxt-link>
								<nuxt-link
									v-for="item in projectCat"
									:key="item.id"
									class="all-categories"
									:to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: item._id } }"
									tag="li"
								>
									<a :class="$route.query.category === item.id ? 'active' : null">{{ categoryName(item._id) }}</a>
								</nuxt-link>
								<!--                <pre>{{ projectCat }}</pre>-->
								<!--                    :class="filter === false ? 'active' : null"-->
								<!--                >{{ content.s2.t9 }}</p>-->
								<!--              </li>-->
								<!--              <li-->
								<!--                  class="all-categories"-->
								<!--                  v-for="item in projectCat"-->
								<!--                  :key="item.id"-->
								<!--                  @click="filter = item.id"-->
								<!--              >-->
								<!--                <p-->
								<!--                    :class="filter === item.id ? 'active' : null">-->
								<!--                  {{-->
								<!--                    categoryName(item.id)-->
								<!--                  }}-->
								<!--                </p>-->
								<!--              </li>-->
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-BG section">
			<div class="parallax">
				<div class="container">
					<!--                    <pre>{{projects}}</pre>-->

					<!--          <div class="row" v-if="projects.length > 0">-->
					<!--            <div class="col-12 mb-2 anim-fadeIn paddingCol" v-for="(item , index) in projects" :key="item._id">-->
					<!--              <div class="row" :class="index%2 ? 'reverse' : null">-->
					<!--                <div class="col-12 col-sm-12 col-md-12 col-lg-6 paddingCol ">-->
					<!--                  <div class="s2-img">-->
					<!--                    <img :src="item.thumb" :alt="item.locale[$route.params.lang].title"/>-->
					<!--                  </div>-->
					<!--                </div>-->

					<!--                <div class="col-12 col-sm-12 col-md-12 col-lg-4 d-flex align-items-center paddingCol">-->
					<!--                  <div class="s2-item">-->
					<!--                    <h6 class="h6">{{ item.locale[$route.params.lang].title }}</h6>-->
					<!--                    <p>{{ item.category.locale[$route.params.lang].title }}</p>-->
					<!--                    <span>{{ item.locale[$route.params.lang].short_description }}</span>-->
					<!--                    <nuxt-link :to="{name: 'lang-projects-project',params: {lang: $route.params.lang,project: item.locale[$route.params.lang].title}}" class="s2-reading">-->
					<!--                      <p>{{ content.s2.t1 }}</p>-->
					<!--                      <i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>-->
					<!--                    </nuxt-link>-->
					<!--                  </div>-->
					<!--                </div>-->
					<!--              </div>-->
					<!--            </div>-->
					<!--          </div>-->

					<div class="filterTableByTags" v-if="currentCategory">
						<div class="tag" :class="activeTag === 'all' && 'active'" @click="activeTag = 'all'">
							<span>{{ $route.params.lang === 'en' ? 'All' : 'همه' }}</span>
						</div>
						<div
							class="tag"
							v-for="tag in currentCategory.tags"
							:key="tag._id"
							:class="activeTag === tag._id && 'active'"
							@click="activeTag = tag._id"
						>
							<span>{{ tag.locale[$route.params.lang].name }}</span>
						</div>
					</div>
					<el-table :data="filteredProjects" class="s2-table">
						<el-table-column type="index" width="80" label="#"> </el-table-column>
						<el-table-column :label="content.s2.t3" :prop="`locale[${$route.params.lang}].title`" width="500">
						</el-table-column>

						<el-table-column :label="content.s2.t4" width="200">
							<template slot-scope="scope">
								{{ scope.row.locale[$route.params.lang].client || '-' }}
							</template>
						</el-table-column>
						<el-table-column :label="content.s2.t5">
							<template slot-scope="scope">
								{{ jDate(scope.row.project_date) }}
							</template>
						</el-table-column>
						<el-table-column :label="content.s2.t10">
							<template slot-scope="scope">
								{{ scope.row.locale[$route.params.lang].size || '-' }}
							</template>
						</el-table-column>
						<el-table-column :label="content.s2.t11">
							<template slot-scope="scope">
								{{ scope.row.locale[$route.params.lang].area || '-' }}
							</template>
						</el-table-column>
						<el-table-column :label="content.s2.t6" width="140">
							<template slot-scope="scope">
								<nuxt-link
									v-if="scope.row.has_details"
									class="btn btn-primary s2-table-btn"
									:to="{ name: 'lang-projects-project', params: { lang: $route.params.lang, project: scope.row._id } }"
								>
									{{ content.s2.t7 }}
								</nuxt-link>
								<a class="btn btn-primary s2-table-disable" :title="content.s2.t8" v-else>{{ content.s2.t7 }}</a>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</section>
	</div>
</template>

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

	import moment from 'moment-jalaali'

	export default {
		data() {
			return {
				projects: null,
				projectCat: null,
				activeTag: 'all',
				cover: null,
				defaultCover: '/img/GalleryPage/page-title.png'
				// filter: this.$route.query.category
			}
		},
		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 .parallax'), {
						duration: 9,
						opacity: 0,
						y: '50%'
					})
			})
		},
		async asyncData({ $axios, error }) {
			try {
				const projects = await $axios.get(`/api/public/projects`)
				const projectCat = await $axios.get('/api/public/projectCategories')
				const cover = await $axios.get('/api/public/cover')

				return {
					projects: projects.data,
					projectCat: projectCat.data,
					cover: cover.data.contact
				}
			} catch (e) {
				error({ status: 500, message: 'there is a problem here' })
			}
		},

		computed: {
			content() {
				return this.$store.state.content.projects[this.$route.params.lang]
			},

			currentCategory() {
				return this.projectCat.find(item => item._id === this.categoryId)
			},

			categoryId() {
				return this.$route.query?.category
			},

			filteredProjects() {
				if (this.categoryId === 'all') return this.projects
				const projectsByCat = this.projects.filter(item => item.category._id === this.categoryId)
				// check tag
				if (this.activeTag === 'all') return projectsByCat
				return projectsByCat.filter(item => item.tag === this.activeTag)
			}
		},

		watch: {
			categoryId(newVal, oldVal) {
				this.activeTag = 'all'
				// this.$nuxt.refresh()
			}
		},

		methods: {
			categoryName(id) {
				return this.projectCat.filter(item => item._id === id)[0].locale[this.$route.params.lang].name
			},
			jDate(date) {
				let m = moment(date, 'jYYYY')
				if (this.$route.params.lang === 'fa') return date
				else return m.format('YYYY')
			}
		}
	}
</script>

<style scoped>
	.reverse {
		flex-direction: row-reverse;
	}
</style>
