<template>
  <section class="s4">
    <div class="row">
      <div class="col-12 gallery-btn">
        <div class="mt-2 view-link">
          <button
              @click="setChangeInPage({...$route.query,galleryType: 'image',page: 1})"
              class="btn bigBtn btn-primary"
              :class="galleryType === 'image' && 'btn-active'"
          >
            <span>عکس</span>
          </button>
        </div>
        <div class="mt-2 view-link">
          <button
              @click="setChangeInPage({...$route.query, galleryType: 'video',page: 1})"
              class="btn bigBtn btn-primary"
              :class="galleryType === 'video' && 'btn-active'"
          >
            <span>فیلم</span>
          </button>
        </div>
        <div class="mt-2 view-link">
          <button
              @click="setChangeInPage({...$route.query,galleryType: 'graphic',page: 1})"
              class="btn bigBtn btn-primary"
              :class="galleryType === 'graphic' && 'btn-active'"
          >
            <span>گرافیک</span>
          </button>
        </div>
      </div>
    </div>
<!--    <div class="favorites view-gallery" v-if="media.favorites.length">-->
    <div class="favorites view-gallery">
      <LineTxt label="چندرسانه ای"/>
      <div class="sectionStyle" v-if="media.favorites.length">
        <div id="mediaFavorites">
          <div class="slide" v-for="(item,index) in media.favorites" :key="item._id + 1" :class="index && 'hide'">
            <nuxt-link :to="url(item._id)" :title="item.title" class="view-item">
              <img :src="item.cover" :alt="item.title">
              <div class="title">
                <h3>{{ item.title }}</h3>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    <div class="items">
<!--      <LineTxt v-if="galleryType === 'image'" :label="` تصاویر ${category.category.title}`"/>-->
<!--      <LineTxt v-if="galleryType === 'video'" :label="` فیلم های ${category.category.title}`"/>-->
<!--      <LineTxt v-if="galleryType === 'graphic'" :label="` گرافیک های ${category.category.title}`"/>-->

      <div class="sectionStyle" v-if="media.all.docs.length">
        <div class="view-gallery">
          <div class="row">
            <div class="col-12 col-md-3 mb-3" v-for="item in media.all.docs" :key="item._id">
              <nuxt-link class="view-item" :to="url(item._id)" :title="item.title">
                <img :src="item.thumbCover" :alt="item.title">
                <div class="title">
                  <h5>{{ item.title }}</h5>
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="not-found" v-else>
        <p>موردی وجود ندارد!</p>
      </div>
    </div>
    <div class="paginate">
      <div class="row">
        <div class="col-12">
          <el-pagination
              layout="next, pager, prev"
              v-if="media.all.totalPages > 1"
              class="el-pagination"
              @current-change="pageNumber"
              :current-page="Number($route.query.page)"
              :page-count="Number(media.all.totalPages)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
if (process.client) require("slick-carousel")

export default {
  props: ['setChangeInPage', 'galleryType', 'media', 'category', 'pageNumber', 'url'],
  mounted() {
    $(document).ready(() => {
      $("#mediaFavorites").on('init', function () {
        $('#mediaFavorites .slide').removeClass('hide')
      })
      $("#mediaFavorites").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 1000,
        arrows: false,
        infinite: false,
        pauseOnHover: true
      })
    })
  }
}
</script>
