<template>
    <main class="landing-page">
       <div class="container-fluid episode-intro app-discovery-bg">

                <Header></Header>

        <!-- menu wrapper -->
      <div class="intro-startup">
          <div class="spot-light-top">
              <img src="../assets/images/spot-light-top.svg" />
              <div class="app-discovery">
                  <div class="top-user">

                     <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/>
                    <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/>
                    <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/>
                    <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/>
                      <!-- <img src="../assets/images/app-photo.svg" /> -->

                      </div><!-- top user -->

                      <h1>{{currentSlideData.payload.metaData.title}}</h1>
                        <h2>{{currentSlideData.payload.metaData.count}}</h2>
                        <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" />

                  </div><!-- app Disovery -->
                 
          </div><!-- spot light top -->

   <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" />
          <div class="footer-nav">

          <div class="footer-top">

                <ul class="top-intro-bt ps_right">
              <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
               <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>

            </ul>
            </div><!-- footer top -->
          <div class="footer-bottom">
            <ul>

              <li></li>

               <li></li>
            </ul>
            </div><!-- footer top -->
          </div><!-- footer -->
      
      </div>
        <!-- body wrapper -->
      </div>
      <!-- main wrapper -->
    </main>
  </template>
  
  <script>
  import Vue from "vue";
  import router from "../router";

  import Header from "./Header";

  
  export default {

  components: {
      Header: Header,
    },

    name: "AuthorReadingNow",
  
    data() {

      
      return {
        allSlide:[],
        currentSlideIndex:null,
        currentSlideData:null,
      };
    },
    mounted() {
      var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);

       if (allSlideData) {

        this.allSlide = JSON.parse(allSlideData);
        this.getCurrentSlideData();

      }else{
        this.$router.push("/login");

      }

    },

    methods: {

      getCurrentSlideData(){
        var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
        this.currentSlideIndex = i; 
        this.currentSlideData = this.allSlide[i]
        console.log( this.allSlide[0],"currentSlideData",this.currentSlideData)
  
      },
      goNext(){
        this.currentSlideIndex++
        this.$router.push({
          name: this.allSlide[this.currentSlideIndex].ur,
          params: {
            caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
            slideId: this.allSlide[this.currentSlideIndex].slideId,
          },
        });
  
      },
      goBack(){
         this.currentSlideIndex--
        this.$router.push({
          name: this.allSlide[this.currentSlideIndex].ur,
          params: {
            caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
            slideId: this.allSlide[this.currentSlideIndex].slideId,
          },
        });
  
      },

      goToLogin() {

        this.$router.push("/login");

      },
      goToSignUp() {

        this.$router.push("/");

      },

      goToProfile() {
        this.$router.push("/profile");
      },

      
    },
  };

  </script>