<template>
  <div
    style="display: none; max-width: 800px"
    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: 24px 24px 50px 24px">
      <a v-bind:href="`https://nosearch.com/store/timedeal`" 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
        v-for="(timedealItem, index) in timedealItems"
        v-bind:key="timedealItem.index"
      >
        <a
          style="
            margin: 24px 0;
            text-decoration: none;
            display: block;
            position: relative;
          "
          v-bind:href="`https://m.store.nosearch.com/goods/goods_view.php?goodsNo=${timedealItem.goodsNo}`"
        >
          <div style="display: flex">
            <img
              class="timedeal-item-image"
              v-bind:src="`https://api.nosearch.com/ns_api/v1/product/storeImage?imageUrl=${timedealItem.imageUrl}`"
            />
            <div class="timedeal-item-info">
              <span class="timedeal-item-brand">{{
                timedealItem.brandName
              }}</span>
              <span class="timedeal-item-title">{{
                timedealItem.goodsNm
              }}</span>
              <div class="timedeal-item-price-info">
                <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"
                    >{{
                      discountPercetage(
                        timedealItem.fixedPrice,
                        timedealItem.goodsPrice
                      )
                    }}%</span
                  >
                  <div>
                    <span class="timedeal-item-price-num">
                      {{ numberWithCommas(timedealItem.goodsPrice) }}
                    </span>
                    <span class="timedeal-item-price-text"> 원</span>
                  </div>
                </div>
              </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>
      <a
        v-bind:href="`https://nosearch.com/store/timedeal?cateCd=${cateCd}`"
        class="timedeal-page-button"
        >타임딜 제품 더보기</a
      >
    </div>
  </div>
</template>

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

export default {
  name: "timedealList",
  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);
    },
    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>
