var VPImportSoal = (function () {
    let vp_template = `
    
    <div class="modal fade" ref="modal"  tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content card-style">
            <div class="modal-header px-0 border-0">
              <h5 class="text-bold">Import Soal</h5>
              <button class="border-0 bg-transparent h1" data-bs-dismiss="modal">
                <i class="lni lni-cross-circle"></i>
              </button>
            </div>
            <div class="modal-body px-0">
              <div class="content">

              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                Download template zip <a :href="$store.state.config.base_url+'/panel/bank-soal/example/zip'">Disini</a>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                Download template excel <a :href="$store.state.config.base_url+'/panel/bank-soal/example/excel'">Disini</a>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                Download template docx <a :href="$store.state.config.base_url+'/panel/bank-soal/example/docx'">Disini</a>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
              <div v-show="errMsg" class="alert-box danger-alert ">
              <div class="alert">
                  <p class="text-medium">
                      {{errMsg}}
                  </p>
              </div>
          </div>
          <div v-show="succMsg" class="alert-box success-alert ">
              <div class="alert">
                  <p class="text-medium">
                      {{succMsg}}
                  </p>
              </div>
          </div>
          
          <div class="container-wrapper text-center p-3">
          <div class="text-start">
            <tomselect id="kode" :config="{create:true}" :options="kode.options" :value="kode.value" @changed="kode.value=$event" placeholder="Pilih/Buat Kode"  eltype="select" style="width: 100%;">
            </tomselect>
          </div>
          <div v-if="loading" class="text-center m-1">
            <span v-if="percent<100" class="text-white">Mengirim {{percent}}%</span>
            <span v-else class="text-white">Memproses Data</span>
          </div>
          <div v-if="!loading" class="stady-wrapper">
              <div class="file-upload">
                <input @change="fileready" type="file" />
                <i class="fa fa-arrow-up"></i>
              </div>
            </div>
          <div v-else class="loading-wrapper">
            <div class="file-upload" :style="bg">
              <i class="fa fa-arrow-up blink_me"></i>
            </div>
          </div>
          <div class="text-center my-1">
            <button v-show="!loading&&file&&kode" @click="run" class="btn btn-sm btn-success rounded-md"><i class="lni lni-database"></i>Import</button>
            <button v-show="loading&&percent<100" @click="cancel" class="btn btn-sm btn-danger rounded-md"><i class="lni lni-close"></i>Batal</button>
          </div>
        
            </div>


              </div>
            </div>
          </div>
        </div>
    </div>
    `;
    return {
        template: vp_template,
        name: "import-soal",
        data() {
            return {
                errMsg: '',
                succMsg: '',
                loading: false,
                file: null,
                percent: 0,
                cancelToken: axios.CancelToken,
                source: null,

                kode: {
                    value: '',
                    options: []
                },
                mdl: {},
            }
        },
        mounted() {
            this.loadBankSoal();
            this.source = this.cancelToken.source()
        },
        methods: {
            loadBankSoal() {
                axios({
                    method: 'get',
                    url: window.location.href + "/all",
                }).then((response) => {
                    if (!isObject(response.data)) return setTimeout(this.loadBankSoal, 1000);
                    this.kode.options = response.data.data.map(v => {
                        return { value: v.kode, text: v.kode }
                    })
                }, (error) => {
                });
            },
            fileready(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length) return this.file = null;
                this.file = files[0];
            },
            cancel() {
                this.source.cancel();
                this.errMsg = "";
            },
            run() {
                if (this.loading) return
                let onUploadProgress = event => {
                    const percentCompleted = Math.round((event.loaded * 100) / event.total);
                    this.percent = percentCompleted;
                }
                this.succMsg = '';
                this.errMsg = '';
                this.loading = true;
                const formData = new FormData();
                formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
                formData.append('file', this.file);
                formData.append('kode', this.kode.value);
                axios({
                    method: 'POST',
                    data: formData,
                    url: window.location.href + '/import',
                    cancelToken: this.source.token,
                    onUploadProgress
                }).then((response) => {
                    if (!isObject(response.data)) return this.errMsg = gaem({ response }, response.data);
                    this.succMsg = response.data.message || 'Data Berhasil Di Import';
                    document.getElementById('refresh-btn').click()
                }, (error) => {
                    if (!error.response) return;
                    this.errMsg = gaem(error)
                    try {
                        if (typeof error.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                    } catch (error) {

                    }
                }).finally(() => this.loading = false);
            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs.modal);
                }
                switch (e) {
                    case "hide":
                        this.mdl.instance.hide();
                        break;
                    case "show":
                        this.mdl.instance.show();
                        break;
                    case "toggle":
                        this.mdl.instance.toggle();
                        break;
                    case "dispose":
                        this.mdl.instance.dispose();
                        break;
                }
            }
        },
        computed: {
            bg() {
                let percent = 100 - this.percent;
                let sty = `background-position:0 -${percent}%`;
                return sty;
            }
        },
    }
})();
