<template>
  <section class="video-details">
    <div class="container">
      <div class="row">
        <div class="view-date">
          <p class="date">{{ jalali(info.customDate || info.created_at) }}</p>
          <p class="date">{{ jDate(info.customDate || info.created_at) }}</p>
        </div>
        <div v-if="info.summaryTitle" class="col-12 col-md-6">
          <h2 class="summry-title mt-3">
            {{ info.summaryTitle }}
          </h2>
        </div>
        <div class="col-12">
          <h1 class="title">
            {{ info.title }}
          </h1>
        </div>

        <div v-if="info.leadTitle" class="col-12">
          <p class="summry-title mb-4">
            {{ info.leadTitle }}
          </p>
        </div>
        <div class="row mb-4">
          <div class="col-12 img-video">
            <div v-html="info.embeddedCode" v-if="info.isEmbedded"></div>
            <video width="100%" controls :src="info.video" :poster="info.cover" v-else></video>
          </div>
        </div>
      </div>
    </div>


    <div class="s2" v-if="related.length">
      <h3>مطالب مرتبط</h3>

      <div id="slides">
        <div class="slide" v-for="item in related" :key="item._id">
          <div class="view-txt">
            <div>
              <p class="h3">{{ item.title }}</p>
              <p>{{ item.summaryTitle }}</p>
              <div class="date">
                <span>{{ jalali(item.customDate || item.created_at) }}</span>
                <span>توسط {{ item._creator.firstName + ' ' + item._creator.lastName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import moment from 'moment-jalaali'

if (process.client) require("slick-carousel")

export default {
  data() {
    return {
      info: [],
      galleryShown: false,
      initialIndex: 0,
      related: []
    }
  },
  mounted() {
    // $(document).ready(() => {
    $("#slides").slick({
      dots: true,
      slidesToShow: this.related.length === 1 ? 1 : 2,
      rtl: true,
      responsive: [
        {
          breakpoint: 960,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 720,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 540,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    })
    // })
  },
  methods: {
    jalali(date) {
      return moment(date).locale('fa').fromNow()
    },
    jDate(date) {
      return moment(date).locale('fa').format('LL')
    }
  },
  head() {
    return {
      title: 'جزئیات فیلم',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.info.summaryTitle
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.info.keywords
        }
      ]
    }
  },
  async asyncData({params, error, $axios}) {
    try {
      let data = await $axios.get(`/api/public/getGallery/${encodeURIComponent(params.video)}`)
      let related = await $axios.get(`/api/public/getRelatedGallery`, {
        params: {
          type: 'video',
          title: params.video
        }
      })
      return {
        info: data.data,
        related: related.data
      }
    } catch (err) {
      error({status: 404, message: 'دریافت اطلاعات با مشکل مواجه شده است!'})
    }
  }

}
</script>

