var VPRekapKelas = (function () {
    let gridConf = {
        ready: false,
        data: [],
        id: "kelas-table",
        ref: "kelas-table",
        columns: [{ id: 'kode_tingkat', name: 'Tingkat Kelas' }, { id: 'nama_kelas', name: 'Nama Kelas' },
        { id: 'hadir', name: 'Hadir' }, { id: 'alpa', name: 'Alpa' }, { id: 'sakit', name: 'Sakit' },
        { id: 'izin', name: 'Izin' }, { id: 'total_siswa', name: 'Total Siswa' },
        ]
    };
    let vp_template = `
    <div class="card-style">
        <div class="row">
            <div class="col-lg-4 col-sm-12">
                <div class="input-style-2">
                    <label>Tanggal</label>
                    <input required type="date" min="1978-01-01" v-model="date" placeholder="Tahun">
                    <span class="icon">
                        <i class="far fa-calendar-alt">
                        </i>
                    </span>
                </div>
            </div>
            <div class="col-lg-8 col-sm-12">
                <div class="input-style-2">
                    <label>Kelas</label>
                    <tomselect ref="kelas" id="kelas" :options="kelas.options" :value="kelas_id" @changed="kelas_id=$event" placeholder="Pilih Kelas" :multiple="true" eltype="select" style="width: 100%;">
                    </tomselect>
                </div>
            </div>  
        </div>
        <div style="text-align:right">
            <button class="main-btn btn-sm success-btn rounded-md btn-hover" @click="$refs[grid.ref].reload()">
                <i class="lni lni-reload"></i>
            </button>
        </div>
        <div class="table-responsive">
            <grid  :id="grid.id" :limits="true" :url="filteredUrl" :ref="grid.ref" :columns="grid.columns"
                :ondataload="ondataload"></grid>
        </div>
    </div>
    `;
    return {
        template: vp_template,
        name: "kelas",
        data() {
            return {
                grid: gridConf,
                date: `${(new Date()).getFullYear()}-${(((new Date()).getMonth() + 1).toString().length == 1 ? ('0' + ((new Date()).getMonth() + 1).toString()) : (new Date()).getMonth() + 1)}-${(new Date()).getDate()}`,
                kelas: {
                    value: [],
                    options: [],
                    raw: []
                },
            }
        },
        mounted() {
            this.loadKelas();
        },
        computed: {
            filteredUrl() {
                let url = `${window.location.href}/kelas?`;
                url += `&kelas_id=${this.kelas_id}`;
                url += `&date=${this.date}`;
                return url;
            },
            kelas_id: {
                get() {
                    return this.kelas.value.join(',');
                }, set(v) {
                    this.kelas.value = v.map(v => v);
                }
            }
        },
        methods: {
            loadKelas() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/e-learning/rekap/siswa/kelas`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.kelas.options = [{ text: 'Semua Kelas', value: response.data.data.map((e, i) => e.id).join(',') },
                    ...response.data.data.map((e, i) => {
                        let k = e.kode + " - " + e.nama;
                        if (e.kode_tingkat) {
                            k += " | " + e.kode_tingkat
                        }
                        if (e.kode_jurusan) {
                            k += " | " + e.kode_jurusan
                        }
                        return { value: e.id, text: k }
                    })
                    ];
                }, (error) => {
                });
            },
            ondataload(data) {
                this.grid.data = data;
                this.grid.ready = true;
                return data;
            },
        },
    }
})();
