<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">{{clinicChoice.title}}</h2>
				</div>
			</div>
      <div class="flex flex-wrap items-center mt-16">
				<div class="w-full md:w-12/12 px-4 mr-auto ml-auto">
          <div v-if="clinicChoice.id==='1'"><HerbalMedicine></HerbalMedicine></div>
          <div v-if="clinicChoice.id==='2'"><KoreanAcupuncture></KoreanAcupuncture></div>
          <div v-if="clinicChoice.id==='3'"><BabiesKidsAcupuncture></BabiesKidsAcupuncture></div>
          <div v-if="clinicChoice.id==='4'"><MentalHealth></MentalHealth></div>
        </div>
      </div>
		</div>
	</section><!-- End About Us Section -->
</template>

<script>
import HerbalMedicine from "@/views/landing/clinic/HerbalMedicine.vue";
import KoreanAcupuncture from "@/views/landing/clinic/KoreanAcupuncture.vue";
import BabiesKidsAcupuncture from "@/views/landing/clinic/BabiesKidsAcupuncture.vue";
import MentalHealth from "@/views/landing/clinic/MentalHealth.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: "ClinicDetail",
  data() {
    return {
	  content: "",
	  clinicChoice: {},
	  
    };
  },
//   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,
    HerbalMedicine,
    KoreanAcupuncture,
    BabiesKidsAcupuncture,
    MentalHealth,
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

    rootRouteName() {
		  return { name: this.$route.path.split("/")[1], link: this.$route.path.split("/")[1] };
    },
    currentRouteName() {
      this.clinicChoice = constant.CLINIC_ITEMS[Number(this.$route.params.id)-1]
          return this.clinicChoice.title;
      },
    },
};
</script>
