<template>
  <div class="FAQ--page page">
    <hero title="سوالات متداول">
      <!--      <button class="btn btn-primary" @click.prevent="faqModal = true">سوال خود را بپرسید</button>-->
    </hero>
    <section class="s1">
      <div class="container">
        <div class="row">
          <div v-for="(item, index) in faqs" :key="item._id" class="col-12 mb-3">
            <div
              :id="`q${item._id}`"
              class="q-a fadeInAnim"
              :class="index === 0 ? 'first' : null"
              @click="toggle(item._id)"
            >
              <i class="fas fa-chevron-down"></i>
              <h3>{{ item.question }}</h3>
              <div class="answer">
                <b>پاسخ</b>
                <p>{{ item.answer }}</p>
              </div>
            </div>
          </div>

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

    <!--    <el-dialog title="سوال خودرا بپرسید" :visible.sync="faqModal">-->
    <!--      <el-input type="textarea" autocomplete="off"></el-input>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--			 <el-button @click="faqModal = false">لغو</el-button>-->
    <!--			 <el-button class="submit" type="success" @click="faqModal = false">ثبت</el-button>-->
    <!--		  </span>-->
    <!--    </el-dialog>-->
  </div>
</template>

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

export default {
  name: 'FAQPage',
  mixins: [FadeInAnimation],
  async asyncData({ $axios, error }) {
    try {
      const faqs = await $axios.get(`/api/public/faq`)
      return {
        faqs: faqs.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      faqs: null,
      faqModal: false
    }
  },
  head() {
    return {
      title: 'آسان سرویس | سوالات متداول'
    }
  },
  mounted() {
    $('.FAQ--page .q-a:not(.first)').addClass('collapsed')
    $('.FAQ--page .q-a.collapsed .answer').slideUp()
  },
  methods: {
    toggle(id) {
      $(`#q${id}`).toggleClass('collapsed')
      $(`#q${id} .answer`).slideToggle()
    }
  }
}
</script>
