<template>
  <div class="page projects--page">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <h2 class="title">{{ staticData.t1 }}</h2>
          <p>{{ staticData.t2 }}</p>
          <p>{{ staticData.t3 }}</p>

          <div class="projects" v-if="projects.length">
            <div class="project anim-fadeIn" v-for="(item,index) in projects" :key="item._id">
              <div :id="`project_${index}`">
                <div class="imgBox" v-for="image in item.images" :key="image._id">
                  <img class="bg" :src="image.image" alt="">
                  <img class="img" :src="image.image" alt="">
                </div>
              </div>
              <div class="caption">
                <h4>{{ item.project_details[$route.params.lang].name }}</h4>
                <p class="description">{{ item.project_details[$route.params.lang].description }}</p>
                <p>
                  <span>{{ staticData.t6 }}</span>
                  <span>{{ jDate(item.date) }}</span>
                </p>
              </div>
            </div>
          </div>

          <div class="no-project" v-else>
            <div class="container">
              <div class="row">
                <div class="col-12">
                  <p>{{ staticData.t7 }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="s2">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2 class="title">{{ staticData.t4 }}</h2>
            <nuxt-link :to="{name: 'lang-contact',params:{lang: $route.params.lang}}" class="btn btn-reverse-fill">{{ staticData.t5 }}</nuxt-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
if (process.client) require('slick-carousel')
import moment from "moment-jalaali"
import {fadeInAnimation} from "~/mixins/animations"

export default {
  data() {
    return {
      projects: null
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.projects[this.$route.params.lang]
    }
  },
  methods: {
    jDate(date) {
      if (this.$route.params.lang === 'fa') return moment(date).jYear()
      else return moment(date).year()
    }
  },
  mixins: [fadeInAnimation],
  mounted() {
    this.projects.forEach((item, index) => {
      $(`#project_${index}`).slick({
        slidesToShow: 1,
        centerMode: true,
        centerPadding: '150px',
        infinite: true,
        arrows: true,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              centerMode: false
            }
          },
          {
            breakpoint: 575,
            settings: {
              slidesToShow: 1,
              centerMode: false
            }
          }
        ]
      })
    })
  },
  head() {
    return {
      title: this.staticData.hero
    }
  },
  async asyncData({$axios, error}) {
    try {
      const projects = await $axios.get(`/api/public/projects`)
      return {
        projects: projects.data
      }
    } catch (e) {
      error({status: 404, message: 'There is a problem here'})
    }
  }
}
</script>
