<template>
  <div class="warranty-terms--page page">
    <hero title="شرایط گارانتی" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div v-for="item in warranties.docs" :key="item._id" class="col-12 col-xl-6 mb-3">
            <div class="term fadeInAnim">
              <div class="imgBox">
                <img :src="item.image" :alt="item.title" />
              </div>
              <div class="txtBox">
                <h2>{{ item.title }}</h2>
                <p>{{ item.short_description }}</p>
                <button class="btn btn-primary" @click.prevent="showTerms(item._id)">مشاهده</button>
              </div>
            </div>
          </div>

          <div v-if="!warranties.docs.length" class="col-12 no-post">
            <h2>هیچ پستی در این صفحه وجود نداد.</h2>
          </div>
        </div>
      </div>
    </section>

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

    <el-dialog v-if="modalContent" :title="modalContent.title" :visible.sync="termModal">
      <div class="ck-content" v-html="modalContent.description"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="submit" type="primary" @click="termModal = false">بستن</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'WarrantyTermsPage',
  mixins: [FadeInAnimation],
  async asyncData({ $axios, query, error }) {
    try {
      const warranties = await $axios.get(`/api/public/warranty/page/${query.page}`)
      return {
        warranties: warranties.data
      }
    } catch (e) {
      error({ status: 404, message: 'PAGE NOT FOUND' })
    }
  },
  data() {
    return {
      termModal: false,
      warranties: null,
      modalContent: null
    }
  },
  head() {
    return {
      title: 'آسان سرویس | شرایط گارانتی'
    }
  },
  methods: {
    showTerms(id) {
      this.termModal = true
      this.modalContent = this.warranties.docs.filter(item => item._id === id)[0]
    },
    pageNumber(val) {
      this.$router.push({ name: 'warranty-terms-page', params: { page: val } })
    }
  }
}
</script>
