<template>
  <main class="landing-page">
    <div class="container-fluid episode-intro">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="#"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="user-profile-photo insights-profile">
          <a href="#"><img src="../assets/images/user.png" /></a>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="intro-startup">
       


         <!-- chat box -->
        <div class="bounce-board-wrp" id="cht_box_close">
          <div class="inner-wrp-bc">
            <div class="bc-top-head">
              <span class="bc-head">
                <img src="../assets/images/bounce-icon.svg" /> Bounce Board
              </span>
              <div class="action-sort">
                <span class="sort-by">SORT BY</span>
                <div class="btn-group">
                  <button
                    type="button"
                    class="bc-sort-list dropdown-toggle"
                 
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    BEST
                  </button>
                  <div class="dropdown-menu short_by">
                    <a class="dropdown-item" href="#">BEST 1</a>
                    <a class="dropdown-item" href="#">BEST 2</a>
                    <a class="dropdown-item" href="#">BEST 3</a>
                  </div>
                </div>
                <a
                  href="javasript:void(0);"
                  @click="chtbox_close"
                  class="close_chat_bx"
                  ><img src="../assets/images/close.png" alt="close" /></a
                ><!-- close -->
              </div>
              <!-- action sort -->
            </div>
            <!-- top head -->
            <div class="bounce-board-body">
              <!-- <ul class="bounced-user-comments">
                <li class="bc_border">
                  <div class="lbord"></div>
                  <div class="parent-full-width parent_bg">
                    <div class="full-width">
                      <div class="b-user-head">
                        <img src="../assets/images/b-user1.png" />
                        <span class="head-content">wanderingirl </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />6pts
                          </li>
                          <li><span></span>3days ago</li>
                          <li><span class="au">Author</span></li>
                        </ul>
                      </div>
                      <p>
                        I wonder what the difference between “Dunzo Assistant”
                        and “Pickup and Drop” are. If they are the same, there
                        are two “call to actions” for the same workflow...
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="#"> 4</a></li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li><a href="#"> 6</a></li>
                        </ul>
                        <div class="add_rply">
                          <input type="text" placeholder="Add your reply" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="child-full-width">
                    <div class="full-width">
                      <div class="b-user-head">
                        <img src="../assets/images/b-user1.png" />
                        <span class="head-content">Onenoisyboi </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />6pts
                          </li>
                          <li><span></span>3days ago</li>
                          <li><span class="red">Mod</span></li>
                        </ul>
                      </div>
                      <p>
                        I really liked the palette of the icons dunzo has they
                        dont match with my jeans
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="#"> 4</a></li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li><a href="#"> 6</a></li>
                        </ul>
                        <div class="add_rply">
                          <input type="text" placeholder="Add your reply" />
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul> -->
              <!-- all user comments -->
              <ul class="bounced-user-comments">
                <li class="bc_border" v-for="(cmnt, j) in currentSlideData.payload.comments" :key="j">
                  <div class="bc_brd_l"></div>
                  <!-- border -->
                  <div class="parent-full-width">
                    <div class="full-width">
                      <div class="b-user-head">
                        <img src="../assets/images/b-user1.png" />
                        <span class="head-content">wanderingirl </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />6pts
                          </li>
                          <li><span></span>3days ago</li>
                        </ul>
                      </div>
                      <!-- header -->
                      <p>
                        {{cmnt.comment}}
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="#"> 0</a></li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li><a href="#"> 0</a></li>
                        </ul>
                        <div class="add_rply">
                          <input type="text" placeholder="Add your reply" />
                        </div>
                        <!-- rly form -->
                      </div>
                      <!-- joined wrapper -->
                    </div>
                    <!-- full width -->
                  </div>
                  <!-- parent -->
                  <!-- <div class="child-full-width">
                    <div class="full-width">
                      <div class="b-user-head">
                        <img src="../assets/images/b-user1.png" />
                        <span class="head-content">Onenoisyboi </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />6pts
                          </li>
                          <li><span></span>3days ago</li>
                        </ul>
                      </div>
                      <p>
                        I really liked the palette of the icons dunzo has they
                        dont match with my jeans
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="#"> 4</a></li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li><a href="#"> 6</a></li>
                        </ul>
                        <div class="add_rply">
                          <input type="text" placeholder="Add your reply" />
                        </div>
                      </div>
                    </div>
                  </div> -->
                  
                </li>
              </ul>
            </div>
            <!-- bounce board body -->
            <div class="comments-footer">
              <textarea></textarea>
              <div class="comments-footer-wrp">
                <a href="#" class="add_comments_chat"
                  ><img src="../assets/images/add-comment.svg" /> Comment</a
                >
              </div>
            </div>
            <!-- comments footer -->
          </div>
        </div>
        <!-- bounceboard wrp -->
        <!-- chat box -->


        <div class="single-mobileInsight">
          <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
          <img :src="currentSlideData.payload.metaData.mobileImage" class="slide-img" />
          <div class="single-left-Insight-comments">
            <div class="author-thoughts">
              
            <img
              src="../assets/images/thoughts-upper.svg"
              class="upper-th"
            />
              <img
              :src="currentSlideData.payload.metaData.authorImage"
              class="dynamic-thoughts"
            /> 
              </div><!-- user thoughts -->
         
            <div class="single-author-li-comments">
              <div class="a-intro-comments custom-c-style">
                <!-- <p>
                  I wonder what the difference between “
                  <strong>Dunzo Assistant </strong>” and “<strong
                    >Pickup and Drop </strong
                  >” are. If they are the same, there are two “call to actions”
                  for the same workflow
                </p> -->
              <p>  {{currentSlideData.payload.comments[0].comment}} </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);">Reply</a>
                  </li>
                </ul>
              </div>
              <!-- comments box -->
            </div>
            <!-- single author comments -->
            <div class="single-author-li-comments">
              <div class="a-intro-comments custom-c-style">
                <p>
                 {{currentSlideData.payload.comments[1].comment}}
                </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                  </li>
                </ul>
              </div>
              <!-- comments box -->
            </div>
            <!-- single author comments -->
          </div>
          <!-- single mobile Left insight  -->
          <div class="c-product-insight-wrp two-screen-spc-top">
               <div class="single-author-li-comments">
              <div class="a-intro-comments ">
                <p>
                  {{currentSlideData.payload.comments[2].comment}}
                </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                  </li>
                </ul>
              </div>
              <!-- comments box -->
            </div>
               <div class="single-author-li-comments">
              <div class="a-intro-comments">
                <p>
                  {{currentSlideData.payload.comments[3].comment}}
                </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                  </li>
                </ul>
              </div>
              <!-- comments box -->
            </div>
            <!-- single author comments -->
          </div>
          <!-- single mobile Right insight  -->
        </div>
        <!-- Single Mobile Insight -->
            <div class="footer-nav">
          <div class="footer-top white-bg">
            <div class="row">
              <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
                <div class="row h-100p">
                 
                  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r ">
                       <div class="ft-comments-group no-comment-count">
                      <div class="row">
                        <div class="col-12">
                          <img
                            src="../assets/images/u-comments.svg"
                            class="no-comments-img"
                          />
                          <div class="comments-detail">
                            <!-- <span class="no-c-yet">No comments yet</span> -->
                            <p>
                              <!-- Be the first one to post a comment to start a
                              discussion -->
                              {{currentSlideData.payload.comments.length - 1}}+ Comments
                            </p>
                          </div>
                          <!-- comments detail -->
                        </div>
                      </div>
                    </div>
                    <!-- comments Group -->
                  </div>
                </div>
              </div>
              <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
                <div class="comment-frm no-c-frm">
                  <div class="row">
                    <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
                      <div class="form-group frm-wdth addfrm-spc">
                        
                        <input
                          type="text"
                          class="form-control"
                           placeholder="Kathy, Something on your mind?" id="open_ct_box"
                        />
                      </div>
                    </div>
                    <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
                      <a href="javascript:void(0);" @click="open_ct_box" class="add-comment"
                        ><img src="../assets/images/add-comment.svg" />
                        Comment</a
                      >
                    </div>
                  </div>
                  <!-- comment from -->
                </div>
              </div>
               <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                    <ul class="top-intro-bt">
                      <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><!-- buttons list -->
            </div>
          </div>
          <!-- footer top -->
          <div class="footer-bottom">
            <ul>
              <li class="active"></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";

export default {
  name: "SingleMobileScreenInsightTwo",

  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();
    }
  },
  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("/");
    },
    goToSignUp() {
      this.$router.push("/signup");
    },
    chtbox_close() {
      $("#cht_box_close").removeClass("cht_close");
      $("#open_ct_box, .c_hide").show();
      $(".footer-top").addClass("white-bg");
    },
    open_ct_box() {
      $("#cht_box_close").addClass("cht_close");
      $("#open_ct_box, .c_hide").hide();
      $(".footer-top").removeClass("white-bg");
    },
  },
};
</script>
