<!--
  Program: Terms and conditions
  Author: SDL
  Brief: Terms and conditions popup
-->
<template>
  <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable modal-xl ui--height-100">
    <div class="modal-content" style="min-height:100%;">
      <div class="modal-header">
        <h5 class="modal-title">{{ title }}</h5>
        <div class="row align-items-center">
            <div class="col-auto pe-0"><label class="p-2" for="termHistory">{{ $t('sdl.common.label.trialHistory') }}</label></div>
            <div class="col-auto ps-0 pe-0">
              <select class="form-select" id="termHistory" @change="changeTerm">
                <option v-for="item in list" :key="item.termsId" :value="item.termsId">{{ item.startDate }}</option>
              </select>
            </div>
          <div class="col-auto"><button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button></div>
        </div>
      </div>
      <div class="modal-body">
        <div v-html="content"></div>
        <p class="mt-4">{{ $t('sdl.common.label.enforcementDate') }} : {{ startDate }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.close') }}
        </button>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    term: {
      required: true,
      type: Object,
    },
    title: {
      required: false,
      type: String,
    },
  },
  data() {
    return {
      content: '',
      startDate: '',
      list: [],
    };
  },
  methods: {
    changeTerm(event) {
      const termsId = event.target.value;
      const term = _.find(this.list, ['termsId', termsId]);
      this.content = term.content;
      this.startDate = term.startDate;
    },
  },
  created() {
    this.startDate = this.term.startDate;
    this.content = this.term.content;

    axios
      .get(`${SDLUtil.API_URL}/privacypolicy/terms/${this.term.partId}/prev?langType=${this.term.langType}`)
      .then(({ data }) => {
        this.list = [this.term, ...data];
      })
      .catch(err => {
        console.error(err);
      });
  },
};
</script>
