var VPRekapMengajar = (function () {
    let vp_template = `
    <div class="card p-3 my-1">
        <h3>Rekap Mengajar Guru</h3>
            <div class="col-lg-12 mt-4" >
                <div class="select-style-1">
                    <label>Tahun Pelajaran</label>
                    <tomselect id="rekap-tahun" :options="thn.options" :value="thn.value" @changed="thn.value=$event" placeholder="Pilih Tahun Pelajaran"  eltype="select" style="width: 100%;">
                    </tomselect>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="select-style-1">
                        <label>Bulan</label>
                        <div class="select-position">
                            <select required v-model="bulan">
                                <template v-for="(h,i) in getBulan">
                                    <option :value="i+1">{{h}}</option>
                                </template>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="input-style-2">
                        <label>Tahun</label>
                        <input required type="number" min="1978" v-model="tahun" placeholder="Tahun">
                        <span class="icon">
                            <i class="far fa-calendar-alt">
                            </i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="action d-flex flex-wrap justify-content-end my-1">
            &nbsp;<a v-if="downloadAble" @click="preview" class="main-btn btn-sm primary-btn btn-hover" href="javascript:void(0)">Preview</a>
            &nbsp;<a v-if="downloadAble" download class="main-btn btn-sm success-btn btn-hover" :href="downloadAble?urlRekap:''">Rekap</a>
            </div>
    </div>
    <div v-if="rekapData.headerTable.length>0" class="card p-3 my-1">
        <h3 v-for="h in rekapData.headersText">{{h}}</h3>
        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                  <th v-for="(ht,i) in rekapData.headerTable" style="font-size:13px" class="text-center" :title="libur[i-1]" :class="libur[i-1]?'bg-danger':''" >{{ht}}</th>
                </tr>
                <!-- end table row-->
            </thead>
            <tbody>
                <tr v-for="dt in rekapData.dataTable">
                  <td v-for="(sdt,i) in dt" class="m-0 p-1" style="font-size:13px" :title="libur[i-1]" :class="libur[i-1]?'bg-danger':''"><div class="align-self-center">{{sdt==0?'-':sdt}}</div></td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
    `;
    return {
        template: vp_template,
        name: "rekap-mengajar",
        data() {
            return {
                tahun: `${(new Date()).getFullYear()}`,
                bulan: 1,
                thn: {
                    value: null,
                    options: [],
                    raw: []
                },
                libur: [],
                rekapData: {
                    headersText: [],
                    headerTable: [],
                    dataTable: []
                },
            }
        },
        mounted() {
            this.loadTahun();
        },
        methods: {
            preview() {
                showDismisableLoading();
                axios({
                    method: 'get',
                    url: this.urlPreview
                }).then((response) => {
                    Swal.close()
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.rekapData.headersText = response.data.absensi.filter((v, i) => i < 3).map(v => v[0]);
                    this.rekapData.headerTable = response.data.absensi.find((v, i) => i == 3);
                    this.rekapData.dataTable = response.data.absensi.filter((v, i) => i > 3);
                    this.libur = response.data.libur;
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Rekap'), 'error')
                });
            },
            loadTahun() {
                axios({
                    method: 'get',
                    url: this.$store.state.config.base_url + `/panel/e-learning/tahun-pelajaran/all`
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    this.thn.options = response.data.data.map((v, i) => {
                        if (i == 0) this.thn.value = v.id;
                        return { value: v.id, text: `${v.kode} - ${v.nama} - ${v.semester} | ${v.is_active == 1 ? 'Aktif' : 'Tidak Aktif'}` }
                    });
                }, (error) => {
                    Swal.fire('Gagal', gaem(error, 'Terjadi Kesalahan Saat Mengambil Data Tahun Pelajaran'), 'error')
                });
            },
        },
        computed: {
            downloadAble() {
                return this.thn.value && this.tahun >= 1978 && (this.bulan <= 12 && this.bulan >= 1);
            },
            urlPreview() {
                return `${window.location.href}/preview?month=${this.bulan}&year=${this.tahun}&tahun_id=${this.thn.value}`;
            },
            urlRekap() {
                return `${window.location.href}/export?month=${this.bulan}&year=${this.tahun}&tahun_id=${this.thn.value}`;
            },
            getBulan() {
                return bulanIndo();
            }
        }
    }
})();
