<template>
  <div>
    <div
      class="order-grid"
      style="
        grid-template-rows: 1fr 1fr 1fr auto;
        padding: 0 24px;
        margin-bottom: 150px;
        position: relative;
      "
    >
      <label
        style="margin-bottom: 10px"
        class="order-input-label"
        for="deliveryName"
        >배송지명</label
      >
      <input
        style="margin-bottom: 10px"
        class="order-input-form"
        id="deliveryName"
        type="text"
        placeholder="ex. 회사"
        v-model="newDeliveryName"
      />
      <label
        style="margin-bottom: 10px"
        class="order-input-label"
        for="deliveryUserName"
        >받는 사람</label
      >
      <input
        style="margin-bottom: 10px"
        class="order-input-form"
        id="deliveryUserName"
        type="text"
        placeholder="이름"
        v-model="newDeliveryUserName"
      />
      <label class="order-input-label" for="deliveryPhoneNumber">연락처</label>
      <input
        class="order-input-form"
        style="height: 41px"
        id="deliveryPhoneNumber"
        type="text"
        placeholder="연락처"
        v-model="newDeliveryPhoneNumber"
      />
      <label class="order-input-label" for="userAddress">주소</label>
      <div>
        <div style="display: flex; align-items: center">
          <button class="order-address-button" @click="onOpenDaumPostcode">
            주소 찾기
          </button>
          <input
            type="text"
            id="postCode"
            style="background-color: #f5f6f9"
            class="order-input-form order-search-post-code"
            v-model="newPostalCode"
            disabled
          />
        </div>
        <input
          type="text"
          id="address"
          class="order-input-form order-search-address"
          style="background-color: #f5f6f9; margin: 8px 0"
          v-model="newMainAddress"
          disabled
        />
        <input
          type="text"
          id="detailAddress"
          class="order-input-form order-search-detail-address"
          placeholder="상세 주소 입력"
          v-model="newDetailAddress"
        />
        <div
          ref="wrap"
          class="order-search-address-wrap"
          style="margin-top: 40px"
        >
          <img
            src="//t1.daumcdn.net/postcode/resource/images/close.png"
            id="btnFoldWrap"
            class="order-search-address-close-img"
            @click="onFoldDaumPostcode"
            alt="접기 버튼"
          />
        </div>
      </div>
    </div>
    <button
      class="delivery-add-button"
      style="background-color: #3e79ff; color: #ffffff"
      @click="onSaveDeliveryList"
    >
      저장
    </button>
  </div>
</template>

<script>
export default {
  name: "deliveryAddForm",
  props: {
    onHideDeliveryPage: Function,
    onSaveDeliveryInfo: Function,
  },
  data() {
    return {
      newDeliveryName: "",
      newDeliveryUserName: "",
      newDeliveryPhoneNumber: "",
      newPostalCode: "",
      newMainAddress: "",
      newDetailAddress: "",
    };
  },
  methods: {
    async onSaveDeliveryList() {
      if (
        this.newDeliveryName === "" ||
        this.newDeliveryUserName === "" ||
        this.newDeliveryPhoneNumber === "" ||
        this.newPostalCode === "" ||
        this.newMainAddress === "" ||
        this.newDetailAddress === ""
      )
        return;

      // 고도몰에서 배송지를 저장하는 로직 실행
      const _data = {
        shippingTitle: this.newDeliveryName,
        shippingName: this.newDeliveryUserName,
        shippingCellPhone: this.newDeliveryPhoneNumber,
        shippingZonecode: this.newPostalCode,
        shippingAddress: this.newMainAddress,
        shippingAddressSub: this.newDetailAddress,
      };

      const _saveDelivery = await this.onSaveDeliveryInfo(_data);
      if (_saveDelivery) {
        this.$store.commit("updateNewDeliveryList", _saveDelivery);
        this.$store.commit("updateAddNewDeliveryInfo", true);
      } else {
        alert("배송지 추가에 실패했습니다.");
        return;
      }

      // 기본 배송지가 아닌 다른 배송지를 사용하기 위해서
      this.$store.commit("updateUseDefaultDeliveryInfo", false);
      this.deliveryName = this.newDeliveryName;
      this.deliveryUserName = this.newDeliveryUserName;
      this.deliveryPhoneNumber = this.newDeliveryPhoneNumber;
      this.postalCode = this.newPostalCode;
      this.mainAddress = this.newMainAddress;
      this.detailAddress = this.newDetailAddress;
      this.onHideDeliveryPage();
    },

    // 주소 찾기
    onOpenDaumPostcode() {
      const elementWrap = this.$refs.wrap;
      const currentScroll = Math.max(
        document.body.scrollTop,
        document.documentElement.scrollTop
      );
      new window.daum.Postcode({
        oncomplete: (data) => {
          let addr = ""; //
          if (data.userSelectedType === "R") {
            addr = data.roadAddress;
          } else {
            addr = data.jibunAddress;
          }

          this.newPostalCode = data.zonecode;
          this.newMainAddress = addr;

          document.getElementById("detailAddress").focus();

          elementWrap.style.display = "none";
          document.body.scrollTop = currentScroll;
        },
        width: "100%",
        height: "100%",
      }).embed(elementWrap);
      elementWrap.style.display = "block";
    },
    onFoldDaumPostcode() {
      const elementWrap = this.$refs.wrap;
      elementWrap.style.display = "none";
    },
  },
  computed: {
    deliveryUserName: {
      get() {
        return this.$store.state.deliveryUserName;
      },
      set(value) {
        this.$store.commit("updateDeliveryUserName", value);
      },
    },
    deliveryName: {
      get() {
        return this.$store.state.deliveryName;
      },
      set(value) {
        this.$store.commit("updateDeliveryName", 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);
      },
    },
  },
};
</script>

<style></style>
