<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>