<!--
  Program: Terms and Conditions
  Author: SDL
  Brief: Use Terms and Conditions Consent Page
-->
<template>
  <div class="ui--wrapper fluid-width">
    <!-- GNB -->
    <header id="header-design" class="container-fluid fixed-top ui--header bg-ctrl">
      <span class="scroll-bg"></span>
      <nav class="navbar navbar-expand-lg ui--top">
        <img :src="$CONTEXT + '/static/image/main/simbol.png'" class="ui--brand-simbol" :alt="$t('sdl.common.projectName')" />
        <span class="brand-text">{{ $t('sdl.common.projectName') }}</span>
      </nav>
    </header>
    <!-- SUB Layout -->
    <section class="ui--section-container">
      <!-- SUB Contents -->
      <div class="ui--content-wrapper">
        <div class="ui--content-heading">
          <strong>{{ $t('sdl.privacyPolicy.consentCollectTermsNPersonalInfo') }}</strong>
          <small>{{ $t('sdl.privacyPolicy.consentMsg1') }}</small>
          <!--<small class="text-danger"
            >[빨간색 문구 반드시 삭제] 제공되는 내용은 모두 샘플로 제공되는 것이오니 시스템에 맞게 수정하시기
            바랍니다.</small
          >-->
        </div>
        <!--Contents Area -->

        <div class="agree-container">
          <div class="card mb-4" v-for="item in terms" :key="item.termsId">
            <div class="card-header">
              <div class="card-title">
                <template v-if="item.agreePage">
                  {{ item.agreeReq ? `[${$t('sdl.privacyPolicy.mandatory')}]` : `[${$t('sdl.privacyPolicy.choice')}]` }}
                </template>
                <!-- 아래 partId 값은 initial.sql 에 공통코드 부분에 들어간 값으로 필요할 경우 프로젝트 별로 수정하여 사용하시기 바랍니다 -->
                <!-- The partId value below is included in the common code part of initial.sql, and if necessary, please modify it for each project -->
                {{ item.partId === 'AU4ASjv6AAFlNm02' ? `${$t('sdl.privacyPolicy.systemlegal')}` : `${$t('sdl.privacyPolicy.guideCollectNUsePersonalInfo')}` }}
              </div>
            </div>
            <div class="card-body" style="height: 150px; overflow-y: auto" v-html="item.content"></div>
            <div class="card-footer" v-if="item.agreePage">
              <div class="form-check">
                <input type="checkbox" class="form-check-input" v-model="item.agree" :id="item.termsId" />
                <label class="form-check-label text-primary" :for="item.termsId">
                  {{ item.agreeReq ? `[${$t('sdl.privacyPolicy.mandatory')}]` : `[${$t('sdl.privacyPolicy.choice')}]` }}
                  {{ item.checkLabel }}
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="ui--button-container">
          <router-link :to="$CONTEXT + '/logout'">
            <button class="btn btn-secondary btn-lg" type="submit">
              {{ $t('sdl.common.label.cancel') }}
            </button>
          </router-link>
          <button class="btn btn-primary btn-lg" type="submit" @click="confirm">
            {{ $t('sdl.common.label.confirm') }}
          </button>
        </div>

        <!--//Contents Area -->
      </div>
    </section>
    <!-- Footer -->
    <footer class="ui--footer-container">
      <div class="ui--footer-in">
        <span>&copy; Samsung</span>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';
import _ from 'lodash';
import { SDLUtil } from '@/utils';

export default {
  data() {
    return {
      terms: [],
      termSystem: false,
      termUser: false,
    };
  },
  created() {
    if (document.querySelector('body').classList.contains('ui--login-wrap')) document.querySelector('body').classList.remove('ui--login-wrap');
    if (document.querySelector('body').classList.contains('sdl-wrap')) document.querySelector('body').classList.remove('sdl-wrap');
    document.querySelector('body').classList.add('register-wrap');

    this.getTerms();
  },
  methods: {
    getTerms() {
      // langType fallback
      const langType = this.$i18n.fallbackLocale[this.$i18n.locale] ? this.$i18n.fallbackLocale[this.$i18n.locale][0] : this.$i18n.locale;
      // console.info('langType', langType);
      axios.get(`${SDLUtil.API_URL}/privacypolicy/terms/valid?langType=${langType}`).then(({ data }) => {
        this.terms = data.map(term => {
          term.agree = false;
          return term;
        });
      });
    },
    confirm() {
      // validation
      const reqTerms = this.terms.filter(item => item.agreePage && item.agreeReq);

      const notAgree = _.find(reqTerms, ['agree', false]);
      if (notAgree) {
        SDLUtil.alert(notAgree.checkMsg);
        return;
      }

      const params = this.terms.map(item => ({
        termsId: item.termsId,
        agree: item.agree,
      }));

      axios.post(`${SDLUtil.API_URL}/privacypolicy/terms-agree`, params).then(() => {
        // Forced page movement processing because it skipped router information
        window.location.href = `${SDLUtil.WEB_CONTEXT_PATH}/`;
      });
    },
  },
};
</script>

<style scoped></style>
