<template>
  <div style="padding: 0 24px; position: relative">
    <div
      v-for="(delivery, index) in newDeliveryList"
      v-bind:key="delivery.index"
      style="margin-top: 16px"
      :style="{
        marginBottom: index + 1 === newDeliveryList.length ? '170px' : '24px',
      }"
    >
      <div
        style="
          font-size: 16px;
          font-weight: 700;
          line-height: 23.68px;
          color: #404040;
        "
      >
        {{ delivery.shippingTitle }}
        <span
          v-if="delivery.defaultFl === 'y'"
          class="order-blue-text"
          style="font-weight: 700"
          >기본배송지</span
        >
      </div>
      <div class="order-basic-text" style="color: #404040; margin: 4px 0 2px 0">
        {{
          "(" +
          delivery.shippingZonecode +
          ") " +
          delivery.shippingAddress +
          " " +
          delivery.shippingAddressSub
        }}
      </div>
      <div class="order-basic-text" style="color: #707070">
        {{ delivery.shippingName }} {{ delivery.shippingCellPhone }}
      </div>
      <div
        style="
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-top: 14px;
        "
      >
        <div style="display: none">
          <button class="delivery-button" style="margin-right: 8px">
            삭제
          </button>
          <button class="delivery-button">수정</button>
        </div>
        <button class="delivery-button select" @click="onSelectDelivery(index)">
          선택
        </button>
      </div>
      <div class="r-bar" style="margin: 15px 0"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "deliveryList",
  props: {
    onHideDeliveryPage: Function,
    deliveryList: Array,
  },
  computed: {
    newDeliveryList: {
      get() {
        if (this.$store.state.newDeliveryList.length)
          return this.$store.state.newDeliveryList;
        else return this.deliveryList;
      },
      set(value) {
        this.$store.commit("updateNewDeliveryList", value);
      },
    },
    deliveryName: {
      get() {
        return this.$store.state.deliveryName;
      },
      set(value) {
        this.$store.commit("updateDeliveryName", value);
      },
    },
    deliveryUserName: {
      get() {
        return this.$store.state.deliveryUserName;
      },
      set(value) {
        this.$store.commit("updateDeliveryUserName", value);
      },
    },
    deliveryPhoneNumber: {
      get() {
        return this.$store.state.deliveryPhoneNumber;
      },
      set(value) {
        this.$store.commit("updateDeliveryPhoneNumber", value);
      },
    },
    postalCode: {
      get() {
        return this.$store.state.postalCode;
      },
      set(value) {
        this.$store.commit("updatePostalCode", value);
      },
    },
    mainAddress: {
      get() {
        return this.$store.state.mainAddress;
      },
      set(value) {
        this.$store.commit("updateMainAddress", value);
      },
    },
    detailAddress: {
      get() {
        return this.$store.state.detailAddress;
      },
      set(value) {
        this.$store.commit("updateDetailAddress", value);
      },
    },
  },
  methods: {
    onSelectDelivery(index) {
      const deliveryInfo = this.deliveryList[index];
      this.$store.commit("updateDeliverySno", deliveryInfo.sno);
      this.deliveryName = deliveryInfo.shippingTitle;
      this.deliveryUserName = deliveryInfo.shippingName;
      this.deliveryPhoneNumber = deliveryInfo.shippingCellPhone;
      this.postalCode = deliveryInfo.shippingZonecode;
      this.mainAddress = deliveryInfo.shippingAddress;
      this.detailAddress = deliveryInfo.shippingAddressSub;

      const _defaultAddress = deliveryInfo.defaultFl === "y" ? true : false;
      this.$store.commit("updateDefaultAddress", _defaultAddress);
      this.$store.commit("updateCheckDefaultDeliveryInfo", _defaultAddress);
      this.$store.commit("updateUseDefaultDeliveryInfo", false);
      this.$store.commit("updateAddNewDeliveryInfo", false);

      this.onHideDeliveryPage();
    },
  },
};
</script>

<style></style>
