<template>
	<!-- <div id="target" ref="target"></div> -->
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-end text-center">
				<Breadcrumbs :rootPage="rootRouteName" :currentPage="currentRouteName" />
			</div>
          	<div class="flex flex-wrap justify-center text-center mb-12 pt-8">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-4xl font-semibold">{{choiceTestimonial.s}}</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						{{choiceRootTestimonial}}
					</p>
				</div>
			</div>

			<div v-if="choiceTestimonial.link==='/testimonial/1/1'"><testimonial_1_1></testimonial_1_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/1/2'"><testimonial_1_2></testimonial_1_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/1/3'"><testimonial_1_3></testimonial_1_3></div>
			<div v-if="choiceTestimonial.link==='/testimonial/1/4'"><testimonial_1_4></testimonial_1_4></div>
			<div v-if="choiceTestimonial.link==='/testimonial/1/5'"><testimonial_1_5></testimonial_1_5></div>
			<div v-if="choiceTestimonial.link==='/testimonial/1/6'"><testimonial_1_6></testimonial_1_6></div>
			<div v-if="choiceTestimonial.link==='/testimonial/2/1'"><testimonial_2_1></testimonial_2_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/3/1'"><testimonial_3_1></testimonial_3_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/3/2'"><testimonial_3_2></testimonial_3_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/4/1'"><testimonial_4_1></testimonial_4_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/4/2'"><testimonial_4_2></testimonial_4_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/4/3'"><testimonial_4_3></testimonial_4_3></div>
			<div v-if="choiceTestimonial.link==='/testimonial/5/1'"><testimonial_5_1></testimonial_5_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/5/2'"><testimonial_5_2></testimonial_5_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/6/1'"><testimonial_6_1></testimonial_6_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/6/2'"><testimonial_6_2></testimonial_6_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/1'"><testimonial_7_1></testimonial_7_1></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/2'"><testimonial_7_2></testimonial_7_2></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/3'"><testimonial_7_3></testimonial_7_3></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/4'"><testimonial_7_4></testimonial_7_4></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/5'"><testimonial_7_5></testimonial_7_5></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/6'"><testimonial_7_6></testimonial_7_6></div>
			<div v-if="choiceTestimonial.link==='/testimonial/7/7'"><testimonial_7_7></testimonial_7_7></div>

		</div>
	</section><!-- End About Us Section -->

</template>

<script>
import testimonial_1_1 from "@/views/landing/testimonial/testimonial_1_1.vue";
import testimonial_1_2 from "@/views/landing/testimonial/testimonial_1_2.vue";
import testimonial_1_3 from "@/views/landing/testimonial/testimonial_1_3.vue";
import testimonial_1_4 from "@/views/landing/testimonial/testimonial_1_4.vue";
import testimonial_1_5 from "@/views/landing/testimonial/testimonial_1_5.vue";
import testimonial_1_6 from "@/views/landing/testimonial/testimonial_1_6.vue";
import testimonial_2_1 from "@/views/landing/testimonial/testimonial_2_1.vue";
import testimonial_3_1 from "@/views/landing/testimonial/testimonial_3_1.vue";
import testimonial_3_2 from "@/views/landing/testimonial/testimonial_3_2.vue";
import testimonial_4_1 from "@/views/landing/testimonial/testimonial_4_1.vue";
import testimonial_4_2 from "@/views/landing/testimonial/testimonial_4_2.vue";
import testimonial_4_3 from "@/views/landing/testimonial/testimonial_4_3.vue";
import testimonial_5_1 from "@/views/landing/testimonial/testimonial_5_1.vue";
import testimonial_5_2 from "@/views/landing/testimonial/testimonial_5_2.vue";
import testimonial_6_1 from "@/views/landing/testimonial/testimonial_6_1.vue";
import testimonial_6_2 from "@/views/landing/testimonial/testimonial_6_2.vue";
import testimonial_7_1 from "@/views/landing/testimonial/testimonial_7_1.vue";
import testimonial_7_2 from "@/views/landing/testimonial/testimonial_7_2.vue";
import testimonial_7_3 from "@/views/landing/testimonial/testimonial_7_3.vue";
import testimonial_7_4 from "@/views/landing/testimonial/testimonial_7_4.vue";
import testimonial_7_5 from "@/views/landing/testimonial/testimonial_7_5.vue";
import testimonial_7_6 from "@/views/landing/testimonial/testimonial_7_6.vue";
import testimonial_7_7 from "@/views/landing/testimonial/testimonial_7_7.vue";

import UserService from "@/services/user.service";
import * as constant from '@/assets/js/constant.js'

import Breadcrumbs from "@/components/utils/Breadcrumbs.vue";
import AOS from "aos";
import { mapState } from "vuex";

export default {
  name: "TestimonialDetail",
  data() {
    return {
	  content: "",
	  choiceRootTestimonial: {},
	  choiceTestimonial: {},
	  
    };
  },
//   computed: {
//     ...mapState(["isRTL"]),
//   },
  mounted() {
	AOS.init();
	this.$nextTick(function () {
		window.scrollTo(0, 0);
		// this.$refs.target?.scrollIntoView();
	});
    UserService.getPublicContent().then(
      (response) => {
        this.content = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
  },
  methods: {
  },
  components: {
	Breadcrumbs,
	// 'testimonial_1_1': () => import("@/components/landing/testimonial/testimonial_1_1.vue"),
	// 'testimonial_1_2': () => import("@/components/landing/testimonial/testimonial_1_2.vue"),

	testimonial_1_1,
	testimonial_1_2,
	testimonial_1_3,
	testimonial_1_4,
	testimonial_1_5,
	testimonial_1_6,
	testimonial_2_1,
	testimonial_3_1,
	testimonial_3_2,
	testimonial_4_1,
	testimonial_4_2,
	testimonial_4_3,
	testimonial_5_1,
	testimonial_5_2,
	testimonial_6_1,
	testimonial_6_2,
	testimonial_7_1,
	testimonial_7_2,
	testimonial_7_3,
	testimonial_7_4,
	testimonial_7_5,
	testimonial_7_6,
	testimonial_7_7,
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),
    rootRouteName() {
      	return { name: this.$route.path.split("/")[1], link: this.$route.path.split("/")[1] };
    },
	// subRootRouteName() {
    //   	return { name: constant.TESTIMONIAL_ITEMS[Number(this.$route.params.id)-1].title, link: "testimonial/" + this.$route.params.id };
    // },
	currentRouteName() {
		// this.choiceTestimonial = constant.TESTIMONIAL_ITEMS.find(x => x.id === this.$route.params.id).contents.find(x => x.linkid === this.$route.params.titleId);
		this.choiceRootTestimonial = constant.TESTIMONIAL_ITEMS[Number(this.$route.params.id)-1].title;
		this.choiceTestimonial = constant.TESTIMONIAL_ITEMS[Number(this.$route.params.id)-1].contents[Number(this.$route.params.titleId)-1]
      	return this.choiceTestimonial.s;
    },
  },

};
</script>
