<template>
  <div class="homepage-overflow-x-hidden white" v-if="landingPageContent && data">
   
     <div class="h3 my-5 py-5 body-font1">{{ data.contentHeading }}</div>
      <div v-html="data.content"></div>
    </div>
  
</template>
<script>
export default {
  name: "LandingComponent",
  components: {},
 data: () => ({
    data: null
    
  }),
  computed: {
    isMobileDevice: function() {
      return this.$vuetify.breakpoint.xsOnly ? true : false;
    },
     landingPageContent: function() {
     return this.$store.state.layout.pageContent;
     },
     pageId: function(){
      return this.$route.meta.pid
     }
  },
   watch: {
      landingPageContent(){
        this.getPageContent();
     }
   },
  /* eslint-disable no-alert, no-console ,  no-debugger */

  methods: {
     imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
    },
    getPageContent() {
      if (this.landingPageContent.length) {
      this.data = this.landingPageContent.filter(element=>{
      return element.id === this.pageId})[0];


      /*       if(data.length > 0){
        let path = data[0].content;
        var div = document.createElement("div");
        div.innerHTML = path;
        let imgSrcUrls = div.getElementsByTagName("img");
        for (let i = 0; i < imgSrcUrls.length; i++) {
          let urlValue = imgSrcUrls[i].getAttribute("src");
          if (urlValue) {
            imgSrcUrls[i].setAttribute(
              "src",

              this.imageBasePathUrl() +
                "/media/" +
                imgSrcUrls[i].src
                  .replace(window.location.href, "")
                  .replace(window.location.origin, "")
                  .replace(/%22%7D%7D/g, "")
                  .replace(/%7B%7B/g, "")
                  .replace(/%20url=%22/g, "")
                  .replace("media", "")
                  
            );
          }
        }
        return div.innerHTML 
      }*/
      }
    },
     pushRoute() {    
          this.$router
            .push({
              name: "LandingPage",
            }) .catch(error => {
          error;
        });
    },
  },

 created() {
  // this.$store.dispatch("block/fetchLandingPage", this.pageUrlKey);
  }
};
</script>
<style lang="scss">
html {
  scroll-behavior: smooth;
}
.arrow-top-margin-130 {
    margin-top: 130px;
}
.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 18px;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.hero-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.landing-page-hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
.landing-page-hero-image{
  height:62.5%;
  width:100%;
}
.landing-page-image{
  height:auto;
  width:100%;
}
.landing-page-top-row{
  display:flex;
}
.landing-page-row{
  display:flex;
}
.landing-page-col-6{
  width: 50%;
  display: block;
  margin-top:auto;
  margin-bottom:auto;
}
.landing-page-content-maxwidth-750{
    max-width:750px;
}
/*.landing-page-link{
    color: #2E5D86 !important;
    & .landing-page-icon{
    background-image: url('../../../assets/landing-page-arrow.png'); 
    max-width:22px;
    height:16px;
    background-position: right center;
    background-size:contain;
}
}
.landing-page-link:hover{
    color: #CCB7FF !important;
    & .landing-page-icon{
    background-image: url('../../../assets/landing-page-hover-arrow.png');
    max-width:22px;
   height:16px;
   background-position: right center;
   background-size:contain;
}
}*/
@media screen and (min-width: 601px) {
    .landing-page-bottom-margin-150 {
        margin-bottom: 150px;
    }
    .landing-page-top-margin-150 {
        margin-top: 150px;
    }
}
@media screen and (max-width: 601px) {
  .arrow{
    display: none;
  }
  .landing-page-hero-text {
  display: none;
  }
 .landing-page-hero-image{
  height:62.5%;
  width:100%;
}
   .landing-page-row{
  display:block;
  text-align: center;
}
.landing-page-top-row{
  display:flex;
  flex-direction:column-reverse;
  text-align: center;
}
.landing-page-col-6{
  width: 100%;
  display: block;
  margin-top:auto;
  margin-bottom:auto;
}
.landing-page-link{
  justify-content: center;
}
}

</style>
<style src="./LandingComponent.scss" lang="scss" scoped /> 