<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 href="https://nosearch.com/store/exhibition" class="exhibition-header">
        <decorated-title title="놓치면 후회! 기획전"></decorated-title>
      </a>
      <div
        id="exhibition_iframe_wrapper"
        class="exhibition_iframe_wrapper mobile"
        :style="{ justifyContent: numOfExhibition === 1 ? 'center' : '' }"
      >
        <a
          v-for="exhibitionData in exhibitionDatas"
          :key="exhibitionData.index"
          class="exhibition-wrapper"
          v-bind:href="`https://nosearch.com/store/exhibition/detail/${exhibitionData.id}`"
        >
          <img :src="exhibitionData.mImageUrl" class="exhibition-img" />
          <div style="margin: 10px 10px 20px 10px">
            <div class="exhibition-title">
              {{ exhibitionData.title }}
            </div>
            <div class="exhibition-duration">
              {{ getFormatDate(exhibitionData.startAt) }} ~
              {{ getFormatDate(exhibitionData.endAt) }}
            </div>
          </div>
        </a>
      </div>
      <a
        v-bind:href="`https://nosearch.com/store/exhibition`"
        class="best-item-page-button"
        >기획전 더보기</a
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { BASE_URL } from "../../shared";
import DecoratedTitle from "../../elements/decoratedTitle.vue";

export default {
  name: "exhibitionComponent",
  components: {
    "decorated-title": DecoratedTitle,
  },
  props: {
    cateCd: String,
  },
  data() {
    return {
      loading: false,
      success: false,
      numOfExhibition: 0,
      exhibitionDatas: [],
    };
  },
  created: function () {
    this.onLoadExhibition();
  },
  methods: {
    getFormatDate(date) {
      return date.substr(0, 10).replaceAll("-", ".");
    },
    async onLoadExhibition() {
      try {
        this.loading = true;
        let res;
        res = await axios.get(
          BASE_URL +
            "/ns_api/v1/exhibitions/preview?relationViewType=storeDetail&cateCd=" +
            this.cateCd
        );
        if (res.data) {
          if (res.data.length === 0) {
            res = await axios.get(
              BASE_URL +
                "/ns_api/v1/exhibitions/preview?relationViewType=storeDetail"
            );
          }
          this.numOfExhibition = res.data.length;
          this.exhibitionDatas = res.data;
          this.success = true;

          if (res.data.length === 0) {
            this.success = false;
            return;
          }
        }
      } catch (e) {
        console.log(e);
        this.success = false;
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>
