<template>
  <div>
    <div class="dashboard-panel-element rounded-0 col-md-10 eshop">
      <section class="py-2 px-3">
        <div v-if="!isLoading('enrolTaiwanFilesLoading')">
          <div v-if="getEnrolTaiwanFiles !== null">
            <h4>{{ $t('Enrolment.DownloadFiles.Title') }}</h4>
            <div class="row" v-for="(link, index) in getEnrolTaiwanFiles.links" :key="index">
              <b-col xl="4" lg="6" md="8" class="px-lg-0 offset-lg-3 offset-0">
                <span class="font-weight-bold small text-primary">
                  {{ link.name }}
                </span>
                <div class="py-1">
                  <b-form-input
                    type="text"
                    readonly
                    :value="
                      link.link
                        .split('\\')
                        .pop()
                        .split('/')
                        .pop()
                    "
                  />
                </div>
              </b-col>
              <b-col class="col-1">
                <span class="font-weight-bold small text-primary">
                  &nbsp;
                </span>
                <div class="py-1">
                  <b-btn @click="openFile(link.link)" variant="primary" :disabled="link.link === ''">
                    {{ $t('Common.OpenFile') }}
                  </b-btn>
                </div>
              </b-col>
            </div>
          </div>
          <div v-else class="vh-25 d-flex justify-content-center align-items-center">
            <span class="h4 text-danger">
              {{ getErrors('enrol_taiwan_files_loading') }}
            </span>
          </div>
        </div>
        <div v-else class="vh-25 d-flex justify-content-center align-items-center">
          <icon class="fa fa-4x" name="spinner" pulse />
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'EnrolmentUpgradeSponsor',
  props: {
    token: {
      type: String,
      default: null,
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getErrors']),
    ...mapGetters('enrolment', ['getEnrolTaiwanFiles']),
  },
  mounted() {
    if (this.token !== null) {
      this.loadEnrolmentTaiwanFiles(this.token)
    }
  },
  methods: {
    ...mapActions('enrolment', ['loadEnrolmentTaiwanFiles']),
    openFile(url) {
      window.open(url, '_blank')
    },
  },
}
</script>
