<template>
  <div style="max-width: 780px; padding: 10px 0; margin: 0 auto">
    <div style="margin: 24px 0">
      <div
        v-if="!iframe.loaded"
        v-bind:style="{ display: hasNsDealReviewIframe ? '' : 'none' }"
      >
        <decorated-title title="노써치 리뷰"></decorated-title>
        <skeleton-iframe></skeleton-iframe>
      </div>
      <div v-if="hasNsDealReviewIframe">
        <iframe
          id="nosearch_deal_iframe"
          :src="iframe.src"
          max-width="800px"
          frameborder="0"
          scrolling="no"
          style="
            overflow-x: hidden;
            overflow: auto;
            width: 100%;
            min-height: 2000px;
          "
          @load="loadIframe"
          v-show="iframe.loaded"
        >
        </iframe>
        <div
          style="
            width: 100%;
            max-width: 800px;
            height: 5px;
            background-color: #f5f5f5;
            margin-bottom: 24px;
          "
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { BASE_URL } from "../shared";
import DecoratedTitle from "../elements/decoratedTitle.vue";
import SkeletonIframe from "../elements/skeletonIframe.vue";
export default {
  name: "nsDealReviewIframe",
  components: {
    "decorated-title": DecoratedTitle,
    "skeleton-iframe": SkeletonIframe,
  },
  props: {
    goodsNo: String,
    goodsCd: String,
    cateCd: String,
    onNsReviewIframe: Function,
  },
  data() {
    return {
      hasNsDealReviewIframe: false,
      iframe: {
        src: `https://nosearch.com/iframe/nosearchReview/${this.cateCd}/${this.goodsCd}`,
        loaded: false,
      },
    };
  },
  created: function () {
    this.onIframeExisted();
  },
  methods: {
    async onIframeExisted() {
      try {
        this.loading = true;
        const res = await axios.get(
          BASE_URL +
            "/ns_api/v1/store/hasNosearchReviewAndSpec?goodsNo=" +
            this.goodsNo
        );
        if (res.data) {
          if (res.data.resultBody.hasNosearchReview)
            this.hasNsDealReviewIframe = true;
        } else {
          this.hasNsDealReviewIframe = false;
        }
      } catch (e) {
        this.hasNsDealReviewIframe = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    loadIframe() {
      this.iframe.loaded = true;
      if (this.onNsReviewIframe) this.onNsReviewIframe();
    },
  },
};
</script>
<style></style>
