<template>
  <div class="learning--page page">
    <hero title="آموزش" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div v-for="(item, index) in learning.docs" :key="item._id" class="col-12">
            <div class="post fadeInAnim" :class="index % 2 ? 'reverse' : null">
              <div class="row">
                <div class="col-12 col-lg-6 align-self-center order-lg-0 order-1">
                  <div class="txtBox">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.short_description }}</p>
                    <nuxt-link :to="{ name: 'learning-post+', params: { post: item.title } }" class="btn btn-primary"
                      >مشاهده</nuxt-link
                    >
                  </div>
                </div>
                <div class="col-12 col-lg-6 align-self-center order-lg-1 order-0">
                  <nuxt-link :to="{ name: 'learning-post+', params: { post: item.title } }" class="imgBox">
                    <img :src="item.thumb" :alt="item.title" />
                    <i v-if="item.video" class="far fa-play-circle"></i>
                    <div class="imgMask"></div>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>

          <div v-if="!learning.docs.length" class="col-12 no-post">
            <h2>هیچ پستی در این صفحه وجود نداد.</h2>
          </div>
        </div>
      </div>
    </section>
    <section v-if="paginate" class="s2">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <el-pagination
              v-if="paginate"
              layout="prev, pager, next"
              :current-page="Number($route.query.page)"
              :page-count="Number(learning.totalPages)"
              @current-change="pageNumber"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import FadeInAnimation from '~/mixins/FadeInAnimation'

export default {
  name: 'LearningListPage',
  mixins: [FadeInAnimation],
  async asyncData({ $axios, query, error }) {
    if (query.page === 'all') return error({ status: 404, message: 'there is a problem here' })
    try {
      const learning = await $axios.get(`/api/public/learning/page/${query.page}`)
      return {
        learning: learning.data
      }
    } catch (e) {
      error({ status: 404, message: 'there is a problem here' })
    }
  },
  data() {
    return {
      learning: null
    }
  },
  head() {
    return {
      title: 'آسان سرویس | آموزش'
    }
  },
  computed: {
    paginate() {
      return this.learning.totalPages > 1
    }
  },
  methods: {
    pageNumber(val) {
      this.$router.push({ name: 'learning', query: { page: val } })
      this.$nuxt.refresh()
      $(window).scrollTop(0)
    }
  }
}
</script>
