var VPThrottleSetting = (function () {
    let vt_template = `
    <div class="card p-4">
        <div v-if="!data" class="text-center my-5">
            <span class="spinner-grow spinner-grow" role="status" aria-hidden="true"></span>
        </div>
        <form v-if="data" @submit.prevent="saveData">
            <div class="alert-box gray-alert">
                <div class="alert">
                <p class="text-medium">
                    <span>Kapasitas : Kapasitas permintaan dalam "Durasi" tertentu.</span>
                    <span>Durasi : Durasi waktu untuk menghitung kapasitas permintaan.</span>
                    <span>Waktu Tunggu : Waktu Tunggu Prosess saat sudah mencapai permintaan.</span>
                    <span>*Jika permintaan ke server melebihi "Kapasitas" dalam "Durasi" tertentu, maka server akan menunda proses sampai dengan "Waktu Tunggu".</span>
                </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Kapasitas</label>
                        <input required v-model="data.capacity" type="number" placeholder="Kapasitas selama durasi">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Durasi *detik</label>
                        <input required v-model="data.time" type="number" placeholder="Durasi permintaan ke server">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Waktu Tunggu *detik</label>
                        <input required v-model="data.delay" type="number" placeholder="Waktu tunggu permintaan">
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Metode</label>
                    <tomselect ref="method" id="method" :options="methods" :value="method_id" @changed="method_id=$event" placeholder="Pilih Metode Permintaan" :multiple="true" eltype="select" style="width: 100%;">
                    </tomselect>
                </div>
                <div class="col-6 my-auto">
                    <div class="form-check form-switch">
                        <input class="form-check-input" :checked="data.state" @change="data.state=!data.state" type="checkbox" id="state">
                        <label class="form-check-label" for="state">Status</label>
                    </div>
                </div>
            </div>
            <button class="btn btn-sm btn-success my-2" type="submit">Simpan</button>
        </form>
    </div>
`;

    return {
        name: "throttle-setting",
        template: vt_template,

        data() {
            return {
                errMsg: '',
                data: null,
                methods: [
                    {
                        value: 'get',
                        text: 'GET'
                    },
                    {
                        value: 'post',
                        text: 'POST'
                    },
                    {
                        value: 'patch',
                        text: 'PATCH'
                    },
                    {
                        value: 'put',
                        text: 'PUT'
                    },
                    {
                        value: 'delete',
                        text: 'DELETE'
                    },
                ]
            }
        },
        mounted() {
            this.loadData()
        },
        computed: {
            method_id: {
                get() {
                    return this.data.method;
                },
                set(v) {
                    if (typeof v == 'string') {
                        v = v.split(',');
                    }
                    this.data.method = v.map(v => v);
                }
            }
        },
        methods: {
            loadData() {
                axios.get(`${this.$store.state.config.base_url}/panel/app/settings/throttle/data`).then(res => {
                    res.data.state = res.data.state == 1;
                    this.data = res.data;
                }).catch(err => {
                    if (typeof err.response == 'undefined') return;
                    Swal.fire('Error', gaem(err), 'error')
                });
            },
            saveData() {
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: {
                        capacity: this.data.capacity,
                        time: this.data.time,
                        method: this.data.method,
                        delay: this.data.delay,
                        state: this.data.state ? 1 : 0,
                        [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value
                    },
                    url: `${this.$store.state.config.base_url}/panel/app/settings/throttle/data`,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Success', response.data.message, 'success')
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Error', gaem(error), 'error')
                });
            }
        }
    }
})();
