<template>
  <div class="order-section" id="orderSectionTerms">
    <div style="display: flex">
      <div class="order-checkbox" :class="{ error: showAgreeTermsError }">
        <input
          type="checkbox"
          v-model="agreeTerms"
          id="orderTermCheckbox"
          @click="onAgreeTerms"
        />
        <label
          for="orderTermCheckbox"
          class="order-term-text"
          style="width: 100%"
        >
          <div class="order-checkbox-img">
            <div v-if="!isRentalPage">
              <span>결제 정보 확인 및</span>
              <div>
                <span>아래 내용에 동의합니다.</span
                ><span class="order-term-span"> 필수</span>
              </div>
            </div>
            <div v-else>
              <span
                >상담받으실 상품의 정보를 확인하였으며, 무료상담 신청에
                동의합니다.</span
              >
              <span class="order-term-span"> 필수</span>
            </div>
          </div>
        </label>
      </div>
    </div>
    <button
      v-if="!isRentalPage"
      class="order-term-link"
      @click="onClickTermContents"
    >
      상품 공급사 개인정보 제공 동의
    </button>
    <div class="order-term-contents" v-if="showTermContents">
      <h1 class="order-term-contents-title">상품 공급사 개인정보 제공 동의</h1>
      <ul class="order-term-contents-ul">
        <li>- 제공받는 자 : 주식회사 제이코스 공급사</li>
        <li>
          - 이용목적 : 상품 및 경품(서비스) 배송(전송), 반품, 환불, 고객상담 등
          정보통신서비스제공계약 및 전자상거래(통신판매)계약의 이행을 위해
          필요한 업무의 처리
        </li>
        <li>
          - 수집항목 : 구매자정보(닉네임, 이름, 휴대전화 번호, 이메일주소),
          수령인정보(이름, 휴대전화 번호, 수령인 주소), 상품 구매, 취소, 반품,
          교환정보, 송장정보
        </li>
        <li>- 보유 / 이용기간 : 상품 제공 완료 후 3개월</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderTerm",
  props: {
    isRentalPage: Boolean,
  },
  data() {
    return {
      showTermContents: false,
    };
  },
  computed: {
    agreeTerms: {
      get() {
        return this.$store.state.agreeTerms;
      },
      set(value) {
        this.$store.commit("updateAgreeTerms", value);
      },
    },
    showAgreeTermsError: {
      get() {
        return this.$store.state.showAgreeTermsError;
      },
    },
  },
  methods: {
    onClickTermContents() {
      this.showTermContents = !this.showTermContents;
    },
    onAgreeTerms() {
      this.$store.commit("updateAgreeTermsError", false);
    },
  },
};
</script>

<style></style>
