<template>
	<div class="page blog--page">
		<Hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title">{{staticData.t1}}</h2>
					<p>{{staticData.t2}}</p>
				</div>
			</div>
		</section>
		<section class="s2">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<div class="filters anim-fadeIn">
							<h2 class="title">{{staticData.t3}}</h2>
							<ul>
								<li @click="filtering(false)">
									<p class="active">{{staticData.t7}}</p>
								</li>
								<li v-for="item in blogCategories" :key="item._id" @click="filtering(item._id)">
									<p>{{item.blogCategory_details[$route.params.lang].name}}</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<section class="s3">
			<div class="container">
				<div class="row posts-container" v-if="filtered_posts.length">
					
					<div class="col-12 col-sm-6 col-lg-12 clearfix post anim-fadeIn" v-for="item in filtered_posts" :key="item._id">
						<div class="panel">
							<div class="imgBox imgBox-reverse">
								<div class="img">
									<img :src="item.thumb" :alt="item.post_details[$route.params.lang].title">
								</div>
							</div>
							<div class="txtBox">
								<div class="date-category">
									<span class="category">
										<span>{{staticData.t4}}</span>
										<span>{{categoryName(item.category)}}</span>
									</span>
									<span class="date">{{jDate(item.created_at)}}</span>
								</div>
								<h4>{{item.post_details[$route.params.lang].title}}</h4>
								<p>{{item.post_details[$route.params.lang].short_description}}</p>
								<nuxt-link :to="{name: 'lang-blog-post',params: {lang: $route.params.lang,post: item._id}}" class="btn btn-primary">{{staticData.t5}}</nuxt-link>
							</div>
						</div>
					</div>
				
				</div>
				<div class="row" v-else>
					<div class="col-12">
						<p class="no-post posts-container anim-fadeIn">{{staticData.t6}}</p>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   import moment from 'moment-jalaali'
   import {fadeInAnimation} from "~/mixins/animations"

   export default {
      data() {
         return {
            posts: null,
            blogCategories: null,
            filter: false
         }
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.blog[this.$route.params.lang]
         },
         filtered_posts() {
            if (!this.filter) return this.posts
            else return this.posts.filter(item => item.category === this.filter)
         }
      },
      methods: {
         categoryName(id) {
            return this.blogCategories.filter(item => item._id === id)[0].blogCategory_details[this.$route.params.lang].name
         },
         jDate(date) {
            if (this.$route.params.lang === 'fa') return moment(date).format('jYYYY/jMM/jDD')
            else return date.split(' ')[0]
         },
         filtering(key) {
            $('.blog--page .filters p').removeClass('active')
            $(event.target).addClass('active')

            this.$gsap.timeline({
               yoyo: true,
               repeat: 1
            })
               .to($('.blog--page .posts-container'),
                  {
                     opacity: 0,
                     duration: 0.3,
                     onComplete: () => {
                        this.filter = key
                     }
                  })
         }
      },
      mixins: [fadeInAnimation],
      head() {
         return {
            title: this.staticData.hero
         }
      },
      async asyncData({$axios, store}) {
         let posts = await $axios.get(`/api/public/blog`)
         const blogCategories = await $axios.get(`/api/public/blogCategories`)
         return {
            posts: posts.data,
            blogCategories: blogCategories.data
         }
      }
   }
</script>
