<template>
  <div
    style="display: none; max-width: 800px; margin: 0 auto"
    v-bind:style="{ display: success ? '' : 'none' }"
  >
    <div
      style="
        width: 100%;
        max-width: 800px;
        height: 5px;
        background-color: #f5f5f5;
        margin-bottom: 24px;
      "
    ></div>
    <div style="margin-top: 24px; margin-bottom: 50px">
      <a
        v-bind:href="`https://nosearch.com/store/timedeal?cateCd=${cateCd}`"
        class="ns-title pc"
      >
        <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>
      <div class="best-items">
        <div
          v-for="(timedealItem, index) in timedealItems"
          v-bind:key="timedealItem.index"
        >
          <a
            class="best-item-wrapper pc"
            v-bind:href="`https://store.nosearch.com/goods/goods_view.php?goodsNo=${timedealItem.goodsNo}`"
          >
            <img
              class="best-item-image pc"
              v-bind:src="`https://api.nosearch.com/ns_api/v1/product/storeImage?imageUrl=${timedealItem.imageUrl}`"
            />
            <span class="best-item-brand pc">{{ timedealItem.brandName }}</span>
            <span class="best-item-title pc">{{
              showTwoLineTitle(timedealItem.goodsNm)
            }}</span>
            <div class="best-item-price-info pc">
              <div v-if="timedealItem.goodsAccess === 'member' && !isLogin">
                <div class="item-fixed-price-text">
                  {{ numberWithCommas(timedealItem.fixedPrice) }}원
                </div>
                <div class="timedeal-item-price-member">
                  회원전용 시크릿 특가
                </div>
              </div>
              <div v-else style="display: flex; align-items: center">
                <span
                  class="timedeal-item-percentage pc"
                  v-if="
                    discountPercetage(
                      timedealItem.fixedPrice,
                      timedealItem.goodsPrice
                    ) !== 0
                  "
                  >{{
                    discountPercetage(
                      timedealItem.fixedPrice,
                      timedealItem.goodsPrice
                    )
                  }}%</span
                >
                <div>
                  <span class="best-item-price-num pc">
                    {{ numberWithCommas(timedealItem.goodsPrice) }}
                  </span>
                  <span class="best-item-price-text pc"> 원</span>
                </div>
              </div>
            </div>
            <timedeal-list-timer
              v-bind:index="index"
              v-bind:benefitUseType="timedealItem.benefitUseType"
              v-bind:periodDiscountEnd="timedealItem.periodDiscountEnd"
            ></timedeal-list-timer>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "timedealListPc",
  components: {
    "timedeal-list-timer": TimedealListTimer,
  },
  props: {
    cateCd: String,
    onTimedealListExist: Function,
    isLogin: Boolean,
  },
  data() {
    return {
      success: false,
      timedealItems: [],
    };
  },
  created: function () {
    this.loadData();
  },
  methods: {
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    discountPercetage: function (fixedPrice, goodsPrice) {
      return Math.round(((fixedPrice - goodsPrice) / fixedPrice) * 100);
    },
    showTwoLineTitle(title) {
      if (title.length > 40) {
        return title.substr(0, 40) + "...";
      }
      return title;
    },
    async loadData() {
      try {
        const godoCategoryId = this.cateCd;
        this.loading = true;
        const res = await axios.get(
          BASE_URL +
            "/ns_api/v1/store/getDealGoodsPreview?relationViewType=storeDetail&isFillItem=true&size=3&relationCateCd=" +
            godoCategoryId
        );
        if (res.data && res.data.length > 0) {
          this.timedealItems = res.data;
          this.success = true;
          if (this.onTimedealListExist) this.onTimedealListExist();
        } else {
          this.success = false;
        }
      } catch (e) {
        this.success = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>
