<template>
	<div class="page products--page">
		<Hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title">{{staticData.s1.t1}}</h2>
					<p>{{staticData.s1.t2}}</p>
				</div>
			</div>
		</section>
		<section class="s2">
			<div class="container">
				<div class="filters">
					<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
					<ul>
						<li @click="filtering(false)">
							<p class="active">همه</p>
						</li>
						<li
							v-for="item in productCategories"
							:key="item._id"
							@click="filtering(item._id)">
							<p>{{item.category_details[$route.params.lang].name}}</p>
						</li>
					</ul>
				</div>
				<div class="row" v-if="filtered_products.length">
					
					<div class="col-3 mb-5" v-for="item in filtered_products" :key="item._id">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
							<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
							<h4>{{item.product_details[$route.params.lang].name}}</h4>
							<p>{{item.product_details[$route.params.lang].short_description}}</p>
						</nuxt-link>
					</div>
				
				</div>
				<div class="row" v-else>
					<div class="col-12">
						<p class="no-product">هیچ محصولی در این دسته بندی موجود نمیباشد.</p>
					</div>
				</div>
			</div>
		</section>
		<section class="s3">
			<div class="container">
				<div class="panel">
					<h2 class="title title-shape-center">
						{{staticData.s3.t1}}
						<span class="subtitle">{{staticData.s3.t2}}</span>
					</h2>
					<p>{{staticData.s3.t3}}</p>
					<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s3.t4}}</a>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   export default {
      data() {
         return {
            products: null,
            productCategories: null,
            catalog: null,
            filter: false
         }
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.products[this.$route.params.lang]
         },
         filtered_products() {
            if (!this.filter) return this.products
            else return this.products.filter(item => item.category === this.filter)
         }
      },
      methods: {
         filtering(key) {
            this.filter = key
            $('.products--page .filters p').removeClass('active')
            $(event.target).addClass('active')
         }
      },
      async asyncData({$axios, store}) {
         const products = await $axios.get(`/api/public/products`)
         const productCategories = await $axios.get(`/api/public/productCategories`)
         const catalog = await $axios.get('/api/public/catalog')

         return {
            products: products.data,
            productCategories: productCategories.data,
            catalog: catalog.data
         }
      }
   }
</script>
