<template>
  <div style="margin: 24px 0 60px 0; position: relative">
    <decorated-title title="상품 정보"></decorated-title>
    <div style="display: flex; flex-direction: column; align-items: center">
      <div
        class="item-detail-images-wrapper"
        v-bind:style="
          !isOpend
            ? 'overflow:hidden;  height: 90vh;'
            : 'overflow: visible;  height: auto'
        "
      >
        <div
          v-for="itemInfoImage in itemInfoImageUrls"
          v-bind:key="itemInfoImage.index"
        >
          <img
            v-bind:src="itemInfoImage"
            style="width: 100%; max-width: 800px"
          />
        </div>
      </div>
    </div>
    <div v-if="!isOpend" class="item-detail-dim" />
    <button class="item-detail-open-button" v-on:click="handleOpenButton">
      <span class="item-detail-open-button-text">{{ buttonText }}</span>
      <img
        v-bind:style="
          !isOpend ? 'transform: rotate(180deg)' : 'transform: rotate(0deg)'
        "
        style="width: 15px; height: 9px"
        src="https://nosearch.com/static/images/caret_white_up.png"
      />
    </button>
  </div>
</template>

<script>
import DecoratedTitle from "../elements/decoratedTitle.vue";

export default {
  name: "itemDetail",
  components: {
    "decorated-title": DecoratedTitle,
  },
  props: {
    itemInfoImageUrls: Array,
  },
  data() {
    return {
      buttonText: "펼치기",
      isOpend: false,
    };
  },
  methods: {
    handleOpenButton() {
      if (!this.isOpend && this.buttonText === "펼치기") {
        this.isOpend = true;
        this.buttonText = "접기";
        return;
      }

      this.isOpend = false;
      this.buttonText = "펼치기";
    },
  },
};
</script>

<style></style>
