<template>
  <div class="homepage-overflow-x-hidden white">
    <!--<v-container v-show="callOutsBlock.length" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
      <v-col class="px-md-5 px-0">
        <div v-html="getBlockContent()"></div>
      </v-col>ImageBlock-01
    </v-container>-->
   <div class="homepage-overflow-x-hidden white" v-if="pageContent.length">
      <div v-html="getPageContent()"></div>
    </div>
       
  </div>
</template>
<script>
import {
  goToCategoryPageRouting,
  getCategoryOne,
} from "@/services/util.service";
export default {
  name: "GiftGuideComponent",
  components: {},
  computed: {
    pageContent: function () {
      return this.$store.state.layout.pageContent;
    },
    imgHeadTextFirst: function () {
      return "Downton Abbey stationery".replace(/(S+s*){1,2}/g, "$&</br>");
    },
    imgHeadTextSecond: function () {
      return "Vera Wang Papers".replace(/(S+s*){1,2}/g, "$&</br>");
    },
    blockOne() {
      return this.$store.state.block.footerBlock;
    },
    callOutsBlock: function () {
      return this.$store.state.layout.cmsBlockContent;
    },
    categoryDetailsList: function () {
      return this.$store.state.headerCategoryList.categoryDetails;
    },
    /* pageId: function(){
      return this.$route.meta.pid
     }*/
  },
  data: () => ({
    categoryId: 10,
    calloutsblockId: 9,
    pageUrlKey: "home-page-content",
    //pageId:150
  }),
  methods: {
    /* goToLink(link) {
      window.open(link, "_self");
    },*/
    getPageContent() {
      if (this.pageContent.length) {
        let data = this.pageContent.filter((element) => {
          return element.identifier === "gift-guide";
        });
        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;
        }
      }
    },
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
    },
    getBlockContent() {
      if (this.callOutsBlock.length) {
        let data = this.callOutsBlock.filter((element) => {
          return element.id === this.calloutsblockId;
        });
        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;
      }
    },
    routeToPage(pageName) {
      if (pageName == "CategoryPage") {
        let vm = this;
        goToCategoryPageRouting(vm, { n: "Stationery", id: 10 });
      }
    },
    goToPageRoutePage(pageName) {
      this.$router
        .push({
          name: pageName,
        })
        .catch((error) => {
          error;
        });
    },
    initialLink() {
      return process.env.VUE_APP_HOME_PAGE_URL;
    },
    async goToPage(main, sub, child, categoryId) {
      let categoryOne = await getCategoryOne(
        this.categoryDetailsList,
        categoryId
      );
      let vm = this;
      goToCategoryPageRouting(vm, categoryOne);
    },
    goToLink(pageLink) {
      window.location.replace(pageLink);
      //} else {
      //window.open(routeSecond, "_self");
      //}
    },
  },

  created() {
    // this.$store.dispatch("block/fetchOne",10)
    //this.$store.dispatch("block/fetchCalloutsBlock", this.calloutsblockId);
    //this.$store.dispatch("block/fetchPageContent", this.pageUrlKey);
  },
};
</script>
<style  lang="scss">
.gift-guide-hero-image {
  height: 62.5%;
  width: 100%;
}
.gift-guide-featured-img-height-500 {
  width: 100%;
}
.gift-guide-content-maxwidth-750 {
  max-width: 750px;
}

.gift-guide-row {
  display: flex;
  height: 100%;
  //width:100%;
}
.gift-guide-block {
  display: block;
  height: 100%;
  //width:100%;
}

.gift-guide-col-6 {
  width: 50%;
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

.gift-guide-moss-red-block {
  background-color: #C53C44;
}
.gift-guide-pink-text-block {
  background-color: #FFEAEA;
}
.gift-guide-text {
  color: #FFEAEA;
  font-weight: 100;
}
.gift-guide-red-text {
  color: #C53C44;
}
.gift-guide-blue-link {
  color: #2544dd;
}
@media screen and (max-width: 600px) {
  .gift-guide-col-6 {
    width: 100%;
    display: block;
    height: 100%;
  }

  .gift-guide-row {
    display: block;
    height: 100%;
    width: 100%;
  }
}

.gift-guide-link {
  color: #2544dd !important;
  & .home-page-icon {
    background-image: url("../../../assets/blue-arrow.png");
    max-width: 22px;
    height: 14px;
    background-position: right center;
    background-size: contain;
  }
}
.gift-guide-link:hover {
  color: #ccb7ff !important;
  & .home-page-icon {
    background-image: url("../../../assets/hover-arrow.png");
    max-width: 22px;
    height: 14px;
    background-position: right center;
    background-size: contain;
  }
}
</style>