var VPRedisSetting = (function () {
    let vt_template = `
    <div class="card p-4">
        <template v-if="succMsg">
            <div class="alert custom-alert-2 alert-success alert-dismissible fade show" role="alert"><i class="bi bi-info-circle"></i>
                {{succMsg}}
            </div>
        </template>
        <template v-else-if="errMsg">
            <div class="alert custom-alert-2 alert-danger alert-dismissible fade show" role="alert"><i class="bi bi-info-circle"></i>
                {{errMsg}}
            </div>
        </template>
        <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="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-8">
                            <div class="input-style-1">
                                <label>Alamat Server</label>
                                <input required v-model="data.REDISHOST" type="text" placeholder="Alamat Server">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="input-style-1">
                                <label>Port Server</label>
                                <input required v-model="data.REDISPORT" type="number" placeholder="Port Server">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="select-style-1">
                        <label>Status Server</label>
                        <div class="select-position">
                            <select v-model="data.REDISON" required>
                                <option value="1">AKTIF</option>
                                <option value="0">TIDAK AKTIF</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-2">
                    <label>Password Redis</label>
                        <input :type="data.REDISPASSON?'text':'password'" v-model="data.REDISPASS" placeholder="Password Redis">
                        <span style="cursor:pointer" @click="data.REDISPASSON=!data.REDISPASSON" class="icon"> <i :class="data.REDISPASSON?'mdi-eye-off-outline':'mdi-eye-outline'" class="mdi"></i> </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-style-1">
                        <label>Database Redis</label>
                        <input required v-model="data.REDISDB" type="number" min="0" placeholder="Database Redis">
                    </div>
                </div>
            </div>
            <button class="btn btn-sm btn-success my-2" type="submit">Simpan</button>
        </form>
    </div>
`;

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

        data() {
            return {
                errMsg: '',
                succMsg: '',
                data: null,
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                axios.get(`${this.$store.state.config.base_url}/panel/app/settings/redis/data`).then(res => {
                    this.data = res.data;
                    this.$store.state.config.csrf.value = res.data.csrf;
                }).catch(err => {
                    if (typeof err.response == 'undefined') return;
                    Swal.fire('Error', gaem(err), 'error')
                });
            },
            saveData() {
                const formData = new FormData();
                formData.append([this.$store.state.config.csrf.name], this.$store.state.config.csrf.value);
                formData.append('REDISON', this.data.REDISON);
                formData.append('REDISHOST', this.data.REDISHOST);
                formData.append('REDISPORT', this.data.REDISPORT);
                formData.append('REDISPASS', this.data.REDISPASS);
                formData.append('REDISDB', this.data.REDISDB);
                showDismisableLoading();
                axios({
                    method: 'POST',
                    data: formData,
                    url: `${this.$store.state.config.base_url}/panel/app/settings/redis/data`,
                }).then((response) => {
                    if (!isObject(response.data)) return Swal.fire('Error', gaem({ response }, response.data), 'error');
                    Swal.fire('Success', response.data.message, 'success')
                    if (response.data.redisError) this.errMsg = response.data.redisError, this.succMsg = '';
                    else this.succMsg = "Database terhubung", this.errMsg = '';
                    this.$store.dispatch('config/loadRedisState');
                }, (error) => {
                    if (typeof error.response == 'undefined') return;
                    Swal.fire('Error', gaem(error), 'error')
                });
            }
        }
    }
})();
