var VPImport = (function () {
    let vp_template = `
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        Download Excel <a :href="excelLink">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 Zip <a :href="zipLink">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 p-3">
    <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" @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>`;
    return {
        name: "import",
        template: vp_template,

        data() {
            return {

                errMsg: '',
                succMsg: '',
                loading: false,
                file: null,
                percent: 0,
                cancelToken: axios.CancelToken,
                source: null,
            }
        },
        mounted() {

            this.source = this.cancelToken.source()
        },
        computed: {
            bg() {
                let percent = 100 - this.percent;
                let sty = `background-position:0 -${percent}%`;
                return sty;
            },
            excelLink() {
                return window.location.href + '/example/excel';
            },
            zipLink() {
                return window.location.href + '/example/zip';
            }
        },
        methods: {
            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);
                axios({
                    method: 'POST',
                    data: formData,
                    url: window.location.href,
                    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';
                }, (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)
            },
        },
    }
})();
