<template>
  <div
    style="max-width: 800px; padding: 10px 0; max-width: 780px; margin: 0 auto"
    v-if="hasSpecIframe"
  >
    <div style="margin: 24px 0">
      <div
        v-if="!iframe.loaded"
        v-bind:style="{ display: hasSpecIframe ? '' : 'none' }"
      >
        <decorated-title title="노써치 스펙분석"></decorated-title>
        <skeleton-iframe></skeleton-iframe>
      </div>
      <div
        id="spec_analysis_iframe_wrapper"
        style="padding: 10px 0; max-width: 780px; margin: 0 auto"
        v-if="hasSpecIframe"
      >
        <div style="margin-bottom: 60px; position: relative">
          <div class="spec-iframe-close" style="height: 800px">
            <div
              style="
                width: 100%;
                max-width: 800px;
                height: 5px;
                background-color: #f5f5f5;
                margin-bottom: 24px;
              "
            ></div>
            <iframe
              id="spec_analysis_iframe_close"
              v-bind:src="iframe.src"
              max-width="800px"
              frameborder="0"
              scrolling="no"
              style="
                overflow-x: hidden;
                overflow: auto;
                width: 100%;
                min-height: 700px;
              "
              @load="loadIframe"
              v-show="iframe.loaded"
            >
            </iframe>
          </div>
          <div class="spec-iframe-open" style="display: none">
            <div
              style="
                width: 100%;
                max-width: 800px;
                height: 5px;
                background-color: #f5f5f5;
                margin-bottom: 24px;
              "
            ></div>
            <iframe
              id="spec_analysis_iframe_open"
              v-bind: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>
          <div class="spec-iframe-dim"></div>
          <button class="spec-iframe-open-button" v-on:click="onClickOpenBtn">
            <span class="spec-iframe-open-button-text">펼치기</span>
            <img
              class="spec-iframe-open-button-img"
              src="https://nosearch.com/static/images/caret_white_up.png"
              style="width: 18px; height: 9px"
            />
          </button>
        </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: "nsSpecIframe",
  components: {
    "decorated-title": DecoratedTitle,
    "skeleton-iframe": SkeletonIframe,
  },
  props: {
    goodsNo: String,
    goodsCd: String,
    cateCd: String,
    onClickSpecIframeBtn: Function,
  },
  data() {
    return {
      hasSpecIframe: false,
      iframe: {
        src: `https://nosearch.com/iframe/productReview/${this.cateCd}/${this.goodsCd}`,
        loaded: false,
      },
      isOpendSpecIframePage: 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) {
          const _hasNsDealReviewIframe = res.data.resultBody.hasNosearchReview;
          const _hasSpec = res.data.resultBody.hasSpec;

          if (_hasNsDealReviewIframe) {
            this.hasSpecIframe = false;
          }
          if (!_hasNsDealReviewIframe && _hasSpec) this.hasSpecIframe = true;
        } else {
          this.hasSpecIframe = false;
        }
      } catch (e) {
        this.hasSpecIframe = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    loadIframe() {
      this.iframe.loaded = true;
    },
    onClickOpenBtn() {
      if (this.onClickSpecIframeBtn) this.onClickSpecIframeBtn();
    },
  },
};
</script>

<style></style>
