<template>
  <div class="archive-page">
    <div class="container">
      <LineTxt label="آرشیو"/>
      <!--        <div class="col-12 col-md-3 mb-3 stretch" v-for="item in archive.docs" :key="item._id" v-if="archive.docs.length">-->
      <!--          <div class="news-card justifyBetween">-->
      <!--            <img :src="item.thumbCover" :alt="item.title">-->
      <!--            <h2>{{ item.title }}</h2>-->
      <!--            <nuxt-link :to="{name: 'portal-news-details',params: {portal: currentPortal,details: item.title}}">-->
      <!--              <div class="whole-wrapper">-->
      <!--                <span class="whole-wrapper-date">{{-->
      <!--                    jData2(item.customDate) + '  ' + jData(item.customDate)-->
      <!--                  }}</span>-->
      <!--                <span class="whole-wrapper-title"> ادامه مطلب<i class="fas fa-chevron-left"></i></span>-->
      <!--              </div>-->
      <!--            </nuxt-link>-->
      <!--          </div>-->
      <!--        </div>-->
      <div class="row align-items-stretch">

        <template v-if="archive.docs.length">
          <NewsBox v-for="item in archive.docs" :key="item._id" :item="item"/>
        </template>
        <div class="not-found" v-else>
          <p>موردی وجود ندارد!</p>
        </div>
      </div>

      <div class="paginate">
        <div class="row">
          <div class="col-12">
            <el-pagination
                layout="prev, pager, next"
                v-if="archive.totalPages > 1"
                class="el-pagination"
                @current-change="pageNumber"
                :current-page="Number($route.query.page)"
                :page-count="Number(archive.totalPages)"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import moment from "moment-jalaali";

export default {
  data() {
    return {
      archive: null
    }
  },
  computed: {
    currentPortal() {
      return this.$route.params.portal
    },
    pageQuery() {
      return this.$route.query.page
    },
    query() {
      return this.$route.query
    }
  },

  watch: {
    pageQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  methods: {
    jData(data) {
      return moment(data).locale('fa').format('LL')
    },
    jData2(data) {
      return moment(data).locale('fa').fromNow()
    },
    pageNumber(val) {
      if(this.query.flag === 'all')
        this.$router.push({name: 'portal-archive', params: {portal: this.currentPortal}, query: {flag: 'all' ,page: val}})
      else
        this.$router.push({name: 'portal-archive', params: {portal: this.currentPortal}, query: {flag: 'category', catId: this.query.catId  ,page: val}})

    },
  },

  async asyncData({$axios, error, params, query}) {
    const portalQuery = params.portal
    try {
      const archive = await $axios.get(`/api/public/getNews?flag=${query.flag}&catId=${query.catId || ''}&portal=${portalQuery}&page=${query.page}`)
      return {
        archive: archive.data
      }
    } catch (e) {
      error({status: 500, message: "مشکلی پیش آمده است!"})

    }
  }
}

</script>
