<template>
  <div
    style="display: none; max-width: 800px"
    v-bind:style="{
      display: success ? '' : 'none',
      margin: isPCDevice ? '0 auto' : '',
    }"
  >
    <div
      style="
        width: 100%;
        max-width: 800px;
        height: 5px;
        background-color: #f5f5f5;
        margin-bottom: 24px;
      "
    ></div>
    <div
      v-bind:style="
        isPCDevice
          ? 'margin-top: 24px; margin-bottom: 30px'
          : 'margin: 24px 24px 50px 24px'
      "
    >
      <a
        v-if="isPCDevice"
        v-bind:href="`https://nosearch.com/store/best?cateCd=${cateCd}`"
        class="ns-title"
        :class="{ pc: isPCDevice }"
      >
        <div style="font-size: 20px; font-weight: bold; color: #404040">
          이번주 인기 🛒
        </div>
        <div style="display: flex; align-items: center">
          <span class="ns-moreText-pc">더보기</span>
          <img
            src="https://nosearch.com/static/webp/images/caret_blue_right.webp"
            width="8px"
          />
        </div>
      </a>
      <a
        v-else
        v-bind:href="`https://nosearch.com/store/best?cateCd=${cateCd}`"
        class="ns-title"
      >
        <div style="font-size: 20px; font-weight: bold; color: #404040">
          이번주 인기 🛒
        </div>
        <img
          src="https://nosearch.com/static/webp/images/caret_grey_right.webp"
          width="8px"
          style="margin-left: 7px"
        />
      </a>
      <div class="best-items">
        <div
          v-for="(bestItem, index) in bestItems"
          v-bind:key="bestItem.index"
          style="margin-bottom: 24px"
        >
          <a
            class="best-item-wrapper"
            :class="{ pc: isPCDevice }"
            v-bind:href="itemUrl(bestItem.goodsNo)"
          >
            <img
              class="best-item-image"
              :class="{ pc: isPCDevice }"
              v-bind:src="`https://api.nosearch.com/ns_api/v1/product/storeImage?imageUrl=${bestItem.imageUrl}`"
            />
            <div
              v-if="index < 3"
              class="best-item-rank-box"
              :class="
                index === 0
                  ? isPCDevice
                    ? 'rank1 pc'
                    : 'rank1'
                  : index === 1
                  ? isPCDevice
                    ? 'rank2 pc'
                    : 'rank2'
                  : isPCDevice
                  ? 'rank3 pc'
                  : 'rank3'
              "
            >
              {{ index + 1 }}
            </div>

            <div
              class="best-item-pick-box"
              :class="`${bestItem.pickType} ${isPCDevice && 'pc'}`"
            ></div>

            <span class="best-item-brand" :class="{ pc: isPCDevice }">{{
              bestItem.brandName
            }}</span>
            <span class="best-item-title" :class="{ pc: isPCDevice }">{{
              showTwoLineTitle(bestItem.goodsNm)
            }}</span>
            <div class="best-item-price-info" :class="{ pc: isPCDevice }">
              <div
                v-if="bestItem.goodsAccess === 'member' && !isLogin"
                class="best-item-price-member"
                :class="{ pc: isPCDevice }"
              >
                회원전용 시크릿 특가
              </div>
              <div v-else style="display: flex; align-items: center">
                <span
                  class="best-item-percentage"
                  :class="{ pc: isPCDevice }"
                  v-if="
                    discountPercetage(
                      bestItem.fixedPrice,
                      bestItem.goodsPrice
                    ) !== 0
                  "
                  >{{
                    discountPercetage(bestItem.fixedPrice, bestItem.goodsPrice)
                  }}%</span
                >
                <div style="white-space: nowrap; overflow-x: hidden">
                  <span class="best-item-price-num" :class="{ pc: isPCDevice }">
                    {{ numberWithCommas(bestItem.goodsPrice) }}
                  </span>
                  <span
                    class="best-item-price-text"
                    :class="{ pc: isPCDevice }"
                  >
                    원</span
                  >
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <a
        v-if="!isPCDevice"
        v-bind:href="`https://nosearch.com/store/best?cateCd=${cateCd}`"
        class="best-item-page-button"
        >스토어 제품 더보기</a
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { BASE_URL } from "../shared";

export default {
  name: "bestItems",
  props: {
    cateCd: String,
    onBestItemsExist: Function,
    isLogin: Boolean,
  },
  data() {
    return {
      success: false,
      bestItems: [],
    };
  },
  created: function () {
    this.loadData();
  },
  computed: {
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },
  },
  methods: {
    itemUrl(goodsNo) {
      if (this.isPCDevice)
        return `https://store.nosearch.com/goods/goods_view.php?goodsNo=${goodsNo}`;
      else
        return `https://m.store.nosearch.com/goods/goods_view.php?goodsNo=${goodsNo}`;
    },
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    discountPercetage: function (fixedPrice, goodsPrice) {
      if (fixedPrice > goodsPrice) {
        return Math.round(((fixedPrice - goodsPrice) / fixedPrice) * 100);
      }
      return 0;
    },
    showTwoLineTitle(title) {
      if (this.isPCDevice) {
        if (title.length > 40) {
          return title.substr(0, 40) + "...";
        }
        return title;
      } else {
        if (title.length > 18) {
          return title.substr(0, 18) + "...";
        }
        return title;
      }
    },
    async loadData() {
      try {
        const godoCategoryId = this.cateCd;
        this.loading = true;
        const res = await axios.get(
          BASE_URL +
            "/ns_api/v1/store/getBestGoodsPreview?relationViewType=storeDetail&size=6&relationCateCd=" +
            godoCategoryId
        );
        if (res.data && res.data.length > 0) {
          this.bestItems = res.data;
          this.success = true;
          if (this.onBestItemsExist) this.onBestItemsExist();
        } else {
          this.success = false;
        }
      } catch (e) {
        this.success = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>
