<template>
  <div
    style="max-width: 800px; margin: 0 24px"
    v-bind:style="{ display: success ? 'inherit' : 'none' }"
  >
    <div v-if="success">
      <!-- item images -->
      <div
        v-if="isPCDevice && !imgLoaded"
        class="skeleton-img-wrapper"
        v-bind:style="{ height: getImageWidth + 'px' }"
      >
        <div
          class="skeleton-img"
          v-bind:style="{ height: getImageWidth + 'px' }"
        ></div>
      </div>
      <img
        v-if="isPCDevice"
        class="item-summary-image"
        v-bind:src="itemImageUrl"
        @load="onImgLoad"
      />

      <div
        v-if="!isPCDevice && !imgsLoaded"
        class="skeleton-img-wrapper"
        v-bind:style="{ height: getImageWidth + 'px' }"
      >
        <div
          class="skeleton-img"
          v-bind:style="{ height: getImageWidth + 'px' }"
        ></div>
      </div>
      <item-image-slider
        v-if="!isPCDevice"
        v-bind:itemImageUrls="itemImageUrls"
        v-bind:onImgsLoad="onImgsLoad"
      ></item-image-slider>
      <!-- title -->
      <div
        class="item-title-wrapper"
        v-bind:style="{
          'grid-template-columns': showSnsShareButton ? 'auto 50px' : 'auto',
        }"
      >
        <div class="item-names">
          <span class="item-brand-text">{{ brandName }}</span>
          <h3 class="item-name-text">
            {{ goodsName }}
          </h3>
        </div>
        <div
          class="item-share-button"
          v-on:click="showSnsShare"
          v-bind:style="{ display: showSnsShareButton ? '' : 'none' }"
        >
          <img
            src="https://nosearch.com/static/images/share_footer.png"
            style="width: 24px; display: block; margin-bottom: 2px"
            alt="item-share-button"
          />
          <div style="color: #404040; font-size: 10px">공유</div>
        </div>
      </div>
      <!-- rating -->
      <div v-if="countOfReviews > 0" class="item-review-rating">
        <star-rating v-bind:rating="rating" />
        <div href="#" class="item-review-link" v-on:click="goDetailReview">
          <div class="item-review-link-text">
            {{ countOfReviews }}개의 구매후기
          </div>
          <img
            src="https://nosearch.com/static/images/arrow_dark_grey_right_2.png"
            style="width: 6px; margin-left: 5px"
            alt="go-item-review-button"
            class="item-review-link-img"
          />
        </div>
      </div>
      <!-- price -->
      <div class="item-price-wrapper">
        <div v-if="discountPercetage > 0" class="item-fixed-price-text">
          {{ numberWithCommas(fixedPrice) }}원
        </div>
        <div
          v-if="isMemberItem"
          class="item-price-member"
          @click="onClickMemberItem"
        >
          로그인하고 시크릿 특가를 확인하세요
          <img
            src="https://d21x3meyyr2jva.cloudfront.net/godo/ns-icon-arrow-orange.png"
            style="width: 8px; margin-left: 7px"
          />
        </div>
        <div v-else style="display: flex; align-items: center">
          <div
            v-if="discountPercetage > 0"
            class="item-discount-percentage-text"
          >
            {{ discountPercetage }}%
          </div>
          <div class="item-price-text">
            {{ numberWithCommas(goodsPrice) }}원
          </div>
          <div style="display: flex; align-items: center; margin-left: 10px">
            <div
              v-if="isMemberItem"
              class="item-summary-badge member-price-badge"
            >
              회원 전용 특가 상품
            </div>
            <div
              v-if="!isMemberItem && hasSpecialPrice"
              class="item-summary-badge specail-price-badge"
            >
              특가
            </div>
            <div
              v-if="!isMemberItem && hasInstantDiscount"
              class="item-summary-badge instant-discount-badge"
            >
              즉시할인특가
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { BASE_URL } from "../../shared";
import StarRating from "./starRating.vue";
import ItemImageSlider from "./itemImageSlider.vue";

export default {
  name: "itemSummary",
  components: {
    "star-rating": StarRating,
    "item-image-slider": ItemImageSlider,
  },
  props: {
    rating: String,
    countOfReviews: Number,
    fixedPrice: Number,
    goodsPrice: Number,
    goodsName: String,
    brandName: String,
    hasSpecialPrice: Boolean,
    hasInstantDiscount: Boolean,
    itemImageUrl: String,
    itemImageUrls: Array,
    goDetailReview: Function,
    onSuccess: Function,
    onFail: Function,
    showSnsShare: Function,
    goodsNo: String,
    isLogin: Boolean,
    onClickMemberItem: Function,
  },
  data() {
    return {
      success: false,
      showSnsShareButton: false,
      imgLoaded: false,
      imgsLoaded: false,
      isMemberItem: false,
    };
  },
  created: function () {
    if (
      this.fixedPrice &&
      this.goodsPrice &&
      this.brandName &&
      this.itemImageUrl &&
      this.goodsNo
    ) {
      this.checkGoodsAccess();

      // app + navigator.share 또는 web인 경우에만 공유 버튼 노출
      if (
        (window.LoginChannel && navigator.share) ||
        window.LoginChannel === undefined
      ) {
        this.showSnsShareButton = true;
      }
    } else {
      console.log("fixedPrice", this.fixedPrice);
      console.log("goodsPrice", this.goodsPrice);
      console.log("brandName", this.brandName);
      console.log("itemImageUrl", this.itemImageUrl);
      console.log("goodsNo", this.goodsNo);
    }
  },
  computed: {
    discountPercetage: function () {
      if (this.fixedPrice > this.goodsPrice) {
        return Math.round(
          ((this.fixedPrice - this.goodsPrice) / this.fixedPrice) * 100
        );
      }
      return 0;
    },
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },
    getImageWidth: () => {
      const screenWidth = window.screen.width;
      if (screenWidth > 500) return 500;
      else {
        return screenWidth - 48;
      }
    },
  },
  methods: {
    async checkGoodsAccess() {
      try {
        const res = await axios.get(
          BASE_URL + "/ns_api/v1/store/getGoodsOne?goodsNo=" + this.goodsNo
        );
        if (res.data) {
          const goodsAccess = res.data.resultBody.goodsAccess;
          if (goodsAccess === "member" && !this.isLogin)
            this.isMemberItem = true;
          this.success = true;
          if (this.onSuccess) this.onSuccess();
        } else {
          this.success = false;
        }
      } catch (e) {
        console.log(e);
        this.success = false;
        if (this.onFail) this.onFail();
        return null;
      }
    },
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    onImgLoad() {
      console.log("onImgLoad");
      this.imgLoaded = true;
    },
    onImgsLoad() {
      console.log("onImgsLoad");
      this.imgsLoaded = true;
    },
  },
};
</script>

<style></style>
