<template>
  <div class="page blog--page latin-digits">
    <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-md-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, error}) {
    try {
      let posts = await $axios.get(`/api/public/blog`)
      const blogCategories = await $axios.get(`/api/public/blogCategories`)
      return {
        posts: posts.data,
        blogCategories: blogCategories.data
      }
    } catch (e) {
      error({status: 404, message: 'There is a problem here'})
    }
  }
}
</script>
