var VPRekapMengajar = (function () {
    let gridConf = {
        ready: false,
        data: [],
        id: "rekap-mengajar-table",
        ref: "rekap-mengajar-table",
        columns: [{ id: 'nomor_induk', name: 'Nomor Induk' }, { id: 'fullname', name: 'Nama Lengkap' },
        { id: 'nama_mapel', name: 'Nama Mapel' },
        {
            id: 'rpp_count', name: 'Jumlah RPP',
            formatter: (_, row) => {
                let data = '';
                data += `<div>`;
                data += `<span class="w-100 text-center">${row.cells[3].data}</span>`;
                data += '</div>';
                return gridjs.html(data);
            }
        },
        {
            id: 'tugas_count', name: 'Jumlah Tugas',
            formatter: (_, row) => {
                return row.cells[4].data;
            },
        },
        {
            id: 'materi_count', name: 'Jumlah Materi',
            formatter: (_, row) => {
                return row.cells[5].data;
            },
        },
        ]
    };
    let vp_template = `
    <div class="card-style">
        <div style="text-align:right">
            <button v-if="false" class="main-btn btn-sm primary-btn rounded-md btn-hover" @click="modal('show')">
                <i class="fas fa-filter"></i>
            </button>
            &nbsp;
            <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: "rekap-mengajar",
        data() {
            return {
                grid: gridConf,
            }
        },
        mounted() {
        },
        methods: {
            ondataload(data) {
                this.grid.data = data;
                // this.grid.data = data.absensi.map(v => {
                // v.cam = mm({ unix: v.created_at });
                // v.tim = v.timeIn ? mm({ unix: v.timeIn }) : null;
                // v.tom = v.timeOut ? mm({ unix: v.timeOut }) : null;
                // });
                // this.grid.ready = true;
                // return data.absensi;
                return data;
            },
        },
        computed: {
            filteredUrl() {
                let url = `${window.location.href}/all?`;
                // url += `&year=${this.year}`;
                // url += `&month=${this.month}`;
                return url;
            },
            modal(e = 'show') {
                if (!this.filterInstance) {
                    this.filterInstance = new bootstrap.Modal(this.$refs.modal);
                }
                switch (e) {
                    case "hide":
                        this.filterInstance.hide();
                        break;
                    case "show":
                        this.filterInstance.show();
                        break;
                    case "toggle":
                        this.filterInstance.toggle();
                        break;
                    case "dispose":
                        this.filterInstance.dispose();
                        break;
                }
            },
        },
    }
})();
