var VPJadwalDetailStatus = (function () {
    let vp_template = `
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="icon-card mb-30">
                <div class="icon purple">
                    <i class="lni lni-calendar"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Nama Ujian</h6>
                    <h3 class="text-bold mb-10">{{nama}}</h3>
                    <span class="text-sm text-success">
                    {{SDT}}
                    </span>
                    s/d
                    <span class="text-sm text-danger">
                    {{EDT}}
                    </span>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-6 col-lg-6">
            <div class="icon-card mb-30">
                <div class="icon success">
                    <i :class="stateIcon"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Status Ujian</h6>
                    <h2 style="font-size:20px">{{state}}</h2>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-6 col-lg-6">
            <div class="icon-card mb-30">
                <div @click="loadToken()" style="cursor:pointer" class="icon success">
                    <i class="fas fa-key"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Token</h6>
                    <h2>{{use_token?token:'-'}}</h2>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
    </div>
    <div class="row">
        <div class="col-xl-3 col-lg-3">
            <div class="icon-card mb-30">
                <div class="icon danger">
                    <i class="lni lni-users"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Belum Ujian</h6>
                    <h3 class="text-bold mb-10">{{belum_ujian}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-3 col-lg-3">
            <div class="icon-card mb-30">
                <div class="icon purple">
                    <i class="lni lni-users"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Sedang Ujian</h6>
                    <h3 class="text-bold mb-10">{{sedang_ujian}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-3 col-lg-3">
            <div class="icon-card mb-30">
                <div class="icon success">
                    <i class="lni lni-users"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Sudah Ujian</h6>
                    <h3 class="text-bold mb-10">{{sudah_ujian}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
        <div class="col-xl-3 col-lg-3">
            <div class="icon-card mb-30">
                <div class="icon success">
                    <i class="lni lni-tag"></i>
                </div>
                <div class="content">
                    <h6 class="mb-10">Jenis Ujian</h6>
                    <h3 class="text-bold mb-10">{{jenis_ujian}}</h3>
                </div>
            </div>
            <!-- End Icon Cart -->
        </div>
        <!-- End Col -->
    </div>
    `;
    return {
        template: vp_template,

        name: "jadwal-detail-status",
        data() {
            return {

                token: null,
                belum_ujian: null,
                sedang_ujian: null,
                sudah_ujian: null,
                jenis_ujian: null,
                status: null,
                state: "",
                startDateTime: null,
                endDateTime: null,
                nama: null,
                nama_draft: null,
                ready: false,
                use_token: false
            }
        },
        mounted() {

            this.eventListener();
            this.loadData();
            setInterval(this.updateStatusTimeCount, 500);
            setInterval(() => {
                if (!this.use_token) {
                    this.loadData();
                }
            }, 1000 * 60 * 4);
            // setInterval(this.loadToken, 1000 * 60 * 15);
        },
        methods: {
            eventListener() {
            },
            loadData() {
                axios({
                    method: 'get',
                    url: `${window.location.href}/status`
                }).then((response) => {
                    this.jenis_ujian = response.data.jenis_ujian;
                    this.status = response.data.status;
                    this.startDateTime = response.data.startDateTime;
                    this.endDateTime = response.data.endDateTime;
                    this.nama = response.data.nama;
                    this.nama_draft = response.data.nama_draft;
                    this.belum_ujian = response.data.belum_ujian;
                    this.sedang_ujian = response.data.sedang_ujian;
                    this.sudah_ujian = response.data.sudah_ujian;
                    this.token = response.data.token;
                    this.use_token = response.data.use_token == 1;
                    this.ready = true;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error), 'error')
                });
            },
            loadToken() {
                if (!this.use_token) return;
                axios({
                    method: 'get',
                    url: `${window.location.href}/token`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.token = response.data.token;
                }, (error) => {
                });
            },
            updateStatusTimeCount() {
                if (!this.ready) return

                let time = moment().unix() - this.startDateTime;
                if (this.status != 1) {
                    this.state = "Tidak Aktif";
                    return;
                }
                let text = ``;
                let future = false;

                let timeend = moment().unix() - this.endDateTime;
                if (time < 0) {
                    //belum mulai
                    future = true;
                    time = -time;
                }
                time = secondsToTime(time);
                time = `${parseTimeToString(time)}`;
                text += time;
                if (timeend > 0) {
                    this.state = "Selesai";
                    return;
                } else if (future) {
                    text += " Lagi";
                } else {
                    text += " Lalu";
                }
                this.state = text;
            },
            ondataload(data) {
                this.grid.data = data.data;
                this.grid.ready = true;

                return data.data;
            },
            modal(e = 'show') {
                if (!this.mdl.instance) {
                    this.mdl.instance = new bootstrap.Modal(this.$refs[this.mdl.ref]);
                }
                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: {
            SDT() {
                return mm({ unix: this.startDateTime }).format('YYYY-MM-DD HH:mm');
            },
            EDT() {
                return mm({ unix: this.endDateTime }).format('YYYY-MM-DD HH:mm');
            },
            stateIcon() {
                let state = this.state;
                switch (state) {
                    case 'Selesai':
                        return "far fa-calendar-check";
                    case 'Tidak Aktif':
                        return "far fa-calendar-times";
                    default:
                        if (state.includes('Lalu')) {
                            return "fas fa-hourglass-start fa-spin";
                        }
                        return "far fa-clock";
                }
            },
        }
    }
})();
