var VPList = (function () {
    let vp_template = `
    <div class="card-style">
        <div style="text-align:right">
            <button class="main-btn btn-sm success-btn rounded-md btn-hover" id="reload-btn" @click="$refs[grid.ref].reload()" >
                <i class="lni lni-reload"></i>
            </button>
        </div>
        <div class="table-responsive">
            <grid :id="grid.id" :limits="true" :url="grid.url" :ref="grid.ref" :columns="grid.columns" :ondataload="ondataload"></grid>
        </div>
    </div>`
    let gridConf = {
        ready: false,
        data: [],
        id: "list-table",
        ref: "list-table",
        url: window.location.href + "/all",
        columns: [{ id: 'judul', name: "Judul" },
        {
            id: "tujuan", name: "Tujuan",
            formatter: (_, row) => {
                let k = `<span class="badge bg-primary mx-1">${row.cells[1].data == 1 ? 'Guru' : 'Siswa'}</span>`;
                return gridjs.html(k);
            }
        }, {
            id: 'id',
            name: 'Aksi',
            formatter: (_, row) => {
                let btn = "";
                btn += "<div class='d-flex'>";
                btn += `&nbsp;<button class="btn btn-danger rounded-md" id="trigger-delete" data-id="${row.cells[2].data}"><i id="trigger-delete" data-id="${row.cells[2].data}" class='lni lni-trash-can'></i></button>`;
                btn += `&nbsp;<button class="btn btn-primary rounded-md" id="trigger-edit" data-id="${row.cells[2].data}"><i id="trigger-edit" data-id="${row.cells[2].data}" class='lni lni-pencil-alt'></i></button>`;
                btn += "</div>";
                return gridjs.html(btn);
            }
        },
        ]
    };
    return {
        template: vp_template,
        name: "list",
        data() {
            return {
                grid: gridConf,
            }
        },
        mounted() {
            this.eventListener();
        },
        methods: {
            eventListener() {
                document.addEventListener('click', (e) => {
                    if (e.target && e.target.id == 'trigger-delete') {
                        this.delete(e.target.dataset.id)
                    }
                });
            },
            delete(id) {
                SwalDelete({
                    confirmed: () => {
                        showDismisableLoading();
                        axios({
                            method: 'delete',
                            data: { [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value, },
                            url: window.location.href + "/delete/" + id,
                        }).then((response) => {
                            Swal.close();
                            if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                            this.$refs[this.grid.ref].reload();
                            Swal.fire(response.data.deleted ? 'Berhasil' : 'Gagal', response.data.message, response.data.deleted ? 'success' : 'error')
                        }, (error) => {
                            Swal.fire('Error', gaem(error), 'error')
                        });
                    }
                });
            },
            ondataload(data) {
                this.grid.data = data.data;
                this.grid.ready = true;
                return data.data;
            },
        },
    }
})();
