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

      <!-- menu wrapper -->
      <div class="intro-startup">


        <div class="single-author-comments">
          <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
          <div class="ct-l-400">
            <!-- <div class="single-author-li-comments" > -->
              <div class="right-corner font-style">
                <p>
                  {{ currentSlideData.payload.metaData.description }}
                </p>
               
              </div>
              <!-- comments box -->
            <!-- </div> -->
          </div>
          <img
            class="s-user-comments m-0"
            :src="currentSlideData.payload.metaData.authorImage"
          />
          <div class="comments-a-wrp ct-width">
            <div class="single-author-li-comments" >
              <div class="a-intro-comments">
                <p>
                  {{ currentSlideData.payload.comments[0].comment }}
                </p>
                <ul class="rly-comment-set">
                  
                </ul>
              </div>
              <!-- comments box -->
            </div>
            <!-- single author comments -->
            <div class="single-author-li-comments" >
              <div class="a-intro-comments">
                <p>
                  {{ currentSlideData.payload.comments[1].comment }}
                </p>
                <ul class="rly-comment-set">
                 
                </ul>
              </div>
            </div>
          </div>
        </div>

        <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: "AuthorReadingBreak",

  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( "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>
<style >
.font-style{
  color:#35338C;
  font-size:2rem;
}

</style>