<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 href="https://nosearch.com/store/exhibition" class="exhibition-header">
        <decorated-title title="놓치면 후회! 기획전"></decorated-title>
        <img
          src="https://d21x3meyyr2jva.cloudfront.net/godo/ns-icon-arrow-black.png"
          width="8px"
          style="margin-left: 7px"
        />
      </a>
      <div
        id="exhibition_iframe_wrapper"
        class="exhibition_iframe_wrapper pc"
        :style="{ justifyContent: numOfExhibition === 1 ? 'center' : '' }"
      >
        <div class="exhibition-list" style="display: flex">
          <a
            v-for="exhibitionData in exhibitionDatas"
            :key="exhibitionData.index"
            class="exhibition-wrapper pc"
            :class="{ one: numOfExhibition === 1 }"
            v-bind:href="`https://nosearch.com/store/exhibition/detail/${exhibitionData.id}`"
          >
            <img
              :src="exhibitionData.pcImageUrl"
              class="exhibition-img pc"
              :class="{ one: numOfExhibition === 1 }"
            />
            <div style="margin: 10px 10px 0px 10px">
              <div class="exhibition-title">
                {{ exhibitionData.title }}
              </div>
              <div class="exhibition-duration">
                {{ getFormatDate(exhibitionData.startAt) }} ~
                {{ getFormatDate(exhibitionData.endAt) }}
              </div>
            </div>
          </a>
        </div>
        <button
          v-if="counter > 0"
          @click="onPreviousItem"
          class="exhibition-btn previous"
        >
          <img
            src="https://d21x3meyyr2jva.cloudfront.net/godo/ns-icon-arrow-black.png"
            width="8px"
          />
        </button>
        <button
          v-if="counter < numOfExhibition - 2"
          @click="onNextItem"
          class="exhibition-btn next"
        >
          <img
            src="https://d21x3meyyr2jva.cloudfront.net/godo/ns-icon-arrow-black.png"
            width="8px"
          />
        </button>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "exhibitionPcComponent",
  components: {
    "decorated-title": DecoratedTitle,
  },
  props: {
    cateCd: String,
  },
  data() {
    return {
      loading: false,
      success: false,
      numOfExhibition: 4,
      exhibitionDatas: [],
      counter: 0,
    };
  },
  created: function () {
    this.onLoadExhibition();
  },
  computed: {
    exhibitionSize: () => {
      return (
        document.querySelectorAll(".exhibition-wrapper")[0].clientWidth + 15
      );
    },
  },
  methods: {
    onNextItem() {
      const exhibitionList = document.querySelector(".exhibition-list");
      exhibitionList.style.transition = "transform 0.3s ease-in-out";
      this.counter++;
      exhibitionList.style.transform =
        "translateX(" + -this.exhibitionSize * this.counter + "px)";
    },
    onPreviousItem() {
      const exhibitionList = document.querySelector(".exhibition-list");
      exhibitionList.style.transition = "transform 0.3s ease-in-out";
      this.counter--;
      exhibitionList.style.transform =
        "translateX(" + -this.exhibitionSize * this.counter + "px)";
    },
    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=store&DetailcateCd=" +
            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>
