<template>
  <div class="order-section" v-if="!isRentalPage">
    <h1 class="order-point-h1">결제수단</h1>
    <div class="order-payment-type-wrapper">
      <button
        class="order-payment-type"
        :class="{ selected: paymentType === 'kakaoPay' }"
        @click="onSelectPaymentType('kakaoPay')"
      >
        <img
          src="https://nosearch.com/static/images/icon_kakao_pay.png"
          style="
            width: 60px;
            height: auto;
            margin-bottom: 3px;
            box-sizing: border-box;
            border-radius: 8px;
          "
        />
        <span
          class="order-payment-text"
          :class="{ selected: paymentType === 'kakaoPay' }"
          >카카오페이</span
        >
      </button>

      <button
        class="order-payment-type"
        :class="{ selected: paymentType === 'card' }"
        @click="onSelectPaymentType('card')"
      >
        <img
          src="https://nosearch.com/static/images/icon_card.png"
          style="
            width: 33px;
            height: auto;
            margin-bottom: 3px;
            box-sizing: border-box;
          "
        />
        <span
          class="order-payment-text"
          :class="{ selected: paymentType === 'card' }"
          >카드결제</span
        >
      </button>

      <button
        class="order-payment-type"
        :class="{ selected: paymentType === 'escrow' }"
        @click="onSelectPaymentType('escrow')"
      >
        <span
          class="order-payment-text"
          :class="{ selected: paymentType === 'escrow' }"
          >에스크로 결제</span
        >
      </button>
      <button
        class="order-payment-type"
        :class="{ selected: paymentType === 'bank' }"
        @click="onSelectPaymentType('bank')"
      >
        <span
          class="order-payment-text"
          :class="{ selected: paymentType === 'bank' }"
          >무통장 입금</span
        >
      </button>
    </div>
    <div v-if="paymentType === 'bank'" id="orderPaymentBank">
      <div class="order-payment-notice">
        무통장 입금의 경우 <br />
        입금확인 후부터 배송단계가 진행됩니다.
      </div>
      <div style="border-bottom: 1px solid #707070; margin: 18px 0"></div>
      <div class="order-payment-bank-text">계좌정보</div>
      <div class="order-input-form" style="text-align: center; margin-top: 8px">
        <span class="order-payment-bank-text">KB국민은행</span>
        <span class="order-payment-bank-text" style="margin: 0 12px"
          >843137-04-003804</span
        >
        <span class="order-payment-bank-text" style="font-weight: 400"
          >(주) 노써치</span
        >
      </div>
      <div class="order-payment-input-wrapper">
        <span
          class="order-payment-bank-text"
          style="font-weight: 400; width: 80px"
          >입금자명</span
        >
        <input
          class="order-input-form"
          type="text"
          placeholder="입금자명을 입력하세요"
          maxlength="20"
          v-model="paymentBankInfo.paymentUserName"
        />
      </div>
      <div class="r-bar" style="margin: 24px 0 15px 0"></div>
      <h1 class="order-point-h1">영수증 발급 신청</h1>
      <div style="display: flex; margin: 18px 0">
        <button
          class="order-payment-type receipt"
          :class="{
            selected: paymentBankInfo.paymentReceiptType === 'noReceipt',
          }"
          @click="onSelectPaymentReceiptType('noReceipt')"
        >
          <span
            class="order-payment-text"
            :class="{
              selected: paymentBankInfo.paymentReceiptType === 'noReceipt',
            }"
            >신청안함</span
          >
        </button>
        <button
          class="order-payment-type receipt"
          :class="{
            selected: paymentBankInfo.paymentReceiptType === 'cashReceipt',
          }"
          style="margin: 0 10px"
          @click="onSelectPaymentReceiptType('cashReceipt')"
        >
          <span
            class="order-payment-text"
            :class="{
              selected: paymentBankInfo.paymentReceiptType === 'cashReceipt',
            }"
            >현금영수증</span
          >
        </button>
        <button
          class="order-payment-type receipt"
          :class="{
            selected: paymentBankInfo.paymentReceiptType === 'taxReceipt',
          }"
          @click="onSelectPaymentReceiptType('taxReceipt')"
        >
          <span
            class="order-payment-text"
            :class="{
              selected: paymentBankInfo.paymentReceiptType === 'taxReceipt',
            }"
            >세금계산서</span
          >
        </button>
      </div>
      <div v-if="paymentBankInfo.paymentReceiptType === 'cashReceipt'">
        <div style="display: grid; grid-template-columns: 1fr 1fr">
          <div class="order-checkbox">
            <input
              type="checkbox"
              v-model="checkedCashReceiptType1"
              id="orderCashReceipt1"
              @click="onSelectPaymentCashReceiptType('income')"
            />
            <label
              for="orderCashReceipt1"
              class="order-point-span"
              style="width: 100%; margin: 0; justify-content: flex-start"
            >
              <div class="order-checkbox-img">소득공제용</div></label
            >
          </div>
          <div class="order-checkbox">
            <input
              type="checkbox"
              v-model="checkedCashReceiptType2"
              id="orderCashReceipt2"
              @click="onSelectPaymentCashReceiptType('expenditure')"
            />
            <label
              for="orderCashReceipt2"
              class="order-point-span"
              style="width: 100%; margin: 0; justify-content: flex-start"
              ><div class="order-checkbox-img">지출증빙용</div></label
            >
          </div>
        </div>
        <div class="order-payment-input-wrapper">
          <span
            class="order-payment-bank-text"
            style="font-weight: 400; width: 100px"
            >{{
              paymentBankInfo.paymentCashReceiptType !== "expenditure"
                ? "휴대전화"
                : "사업자번호"
            }}</span
          >
          <input
            class="order-input-form"
            type="text"
            placeholder="-없이 입력하세요"
            v-model="paymentBankInfo.paymentCashNumber"
          />
        </div>
      </div>
      <div v-if="paymentBankInfo.paymentReceiptType === 'taxReceipt'">
        <div
          class="order-grid"
          style="
            grid-template-columns: 80px auto;
            grid-template-rows: repeat(5, 1fr) auto;
          "
        >
          <label
            style="margin-bottom: 10px"
            class="order-input-label"
            for="paymentCompanyNumber"
            >사업자번호</label
          >
          <div>
            <input
              class="order-input-form"
              style="margin-bottom: 10px"
              id="paymentCompanyNumber"
              type="text"
              v-model="paymentBankInfo.paymentCompanyNumber"
            />
          </div>
          <label
            style="margin-top: 10px"
            class="order-input-label"
            for="paymentCompanyName"
            >회사명</label
          >
          <div>
            <input
              class="order-input-form"
              id="paymentCompanyName"
              type="text"
              v-model="paymentBankInfo.paymentCompanyName"
            />
          </div>
          <label
            style="margin-top: 10px"
            class="order-input-label"
            for="paymentCompanyCEO"
            >대표자명</label
          >
          <div>
            <input
              class="order-input-form"
              id="paymentCompanyCEO"
              type="text"
              v-model="paymentBankInfo.paymentCompanyCEO"
            />
          </div>
          <label
            style="margin-top: 10px"
            class="order-input-label"
            for="paymentCompanyBusinessType"
            >업태</label
          >
          <div>
            <input
              class="order-input-form"
              id="paymentCompanyBusinessType"
              type="text"
              v-model="paymentBankInfo.paymentCompanyBusinessType"
            />
          </div>
          <label
            style="margin-top: 10px"
            class="order-input-label"
            for="paymentCompanyBusinessItem"
            >종목</label
          >
          <div>
            <input
              class="order-input-form"
              id="paymentCompanyBusinessItem"
              type="text"
              v-model="paymentBankInfo.paymentCompanyBusinessItem"
            />
          </div>
          <label class="order-input-label">주소</label>
          <div>
            <div style="display: flex; align-items: center">
              <button class="order-address-button" @click="onOpenDaumPostcode">
                주소 찾기
              </button>
              <input
                type="text"
                id="paymentCompanyPostalCode"
                style="background-color: #f5f6f9"
                class="order-input-form order-search-post-code"
                v-model="paymentBankInfo.paymentCompanyPostalCode"
                disabled
              />
            </div>
            <input
              type="text"
              id="paymentCompanyMainAddress"
              class="order-input-form order-search-address"
              style="background-color: #f5f6f9; margin: 8px 0"
              v-model="paymentBankInfo.paymentCompanyMainAddress"
              disabled
            />
            <input
              type="text"
              id="paymentCompanyDetailAddress"
              class="order-input-form order-search-detail-address"
              placeholder="상세 주소 입력"
              v-model="paymentBankInfo.paymentCompanyDetailAddress"
            />
            <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>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "paymentType",
  props: {
    isRentalPage: Boolean,
  },
  data() {
    return {
      paymentBankInfo: {
        paymentUserName: "",
        paymentReceiptType: "noReceipt",
        paymentCashReceiptType: "",
        paymentCashNumber: "",
        paymentCompanyName: "",
        paymentCompanyNumber: "",
        paymentCompanyCEO: "",
        paymentCompanyBusinessType: "",
        paymentCompanyBusinessItem: "",
        paymentCompanyPostalCode: "",
        paymentCompanyMainAddress: "",
        paymentCompanyDetailAddress: "",
      },
      checkedCashReceiptType1: false,
      checkedCashReceiptType2: false,
    };
  },
  watch: {
    checkedCashReceiptType1: function () {
      if (this.paymentBankInfo.paymentCashReceiptType === "income") {
        this.checkedCashReceiptType1 = true;
        this.checkedCashReceiptType2 = false;
      }
    },
    checkedCashReceiptType2: function () {
      if (this.paymentBankInfo.paymentCashReceiptType === "expenditure") {
        this.checkedCashReceiptType1 = false;
        this.checkedCashReceiptType2 = true;
      }
    },
    paymentType: function () {
      if (this.paymentType === "bank") {
        this.$store.commit("updatePaymentBankInfo", this.paymentBankInfo);
      }
    },
  },
  computed: {
    paymentType: {
      get() {
        return this.$store.state.paymentType;
      },
      set(value) {
        this.$store.commit("updatePaymentType", value);
      },
    },
  },
  methods: {
    onSelectPaymentType(type) {
      this.paymentType = type;
    },
    onSelectPaymentReceiptType(type) {
      this.paymentBankInfo.paymentReceiptType = type;
    },
    onSelectPaymentCashReceiptType(type) {
      this.paymentBankInfo.paymentCashReceiptType = type;
    },

    // 주소 찾기
    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.$store.commit("updateUseDefaultDeliveryInfo", false);
          this.paymentBankInfo.paymentCompanyPostalCode = data.zonecode;
          this.paymentBankInfo.paymentCompanyMainAddress = addr;

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

          elementWrap.style.display = "none";
          document.body.scrollTop = currentScroll;
        },
        width: "100%",
        height: "100vh",
      }).embed(elementWrap);
      elementWrap.style.display = "block";
    },
    onFoldDaumPostcode() {
      const elementWrap = this.$refs.wrap;
      elementWrap.style.display = "none";
    },
  },
};
</script>

<style></style>
