var VPInstallDB = (function () {
    let vt_template = `

<div class="container">

<div class="row g-0 auth-row">
    <div class="col-lg-6">
        <div class="auth-cover-wrapper bg-primary-100">
            <div class="auth-cover">
                <div class="title text-center">
                    <h1 class="text-primary mb-10">Install Aplikasi</h1>
                    <p class="text-medium">
                        Konfigurasi Database
                    </p>
                </div>
                <div class="cover-image">
                    <img src="/vendors/plainadmin/assets/images/auth/signin-image.svg" alt="" />
                </div>
                <div class="shape-image">
                    <img src="/vendors/plainadmin/assets/images/auth/shape.svg" alt="" />
                </div>
            </div>
        </div>
    </div>
    <!-- end col -->
    <div class="col-lg-6">
        <div class="signin-wrapper">
            <div class="form-wrapper">

                <div v-show="appinstalldata.errorMessage" class="alert-box danger-alert ">
                    <div class="alert">
                        <p class="text-medium">
                            {{appinstalldata.errorMessage}}
                        </p>
                    </div>
                </div>

                <p class="text-sm mb-25">
                </p>
                <form @submit.prevent="appinstallfunc_dbinit">
                    <div class="row">
                        <div class="col-12 d-none">
                            <div class="input-style-1">
                                <label>Alamat Situs <small class="text-danger">Isi jika menggunakan xampp atau subfolder</small></label>
                                <input v-model="appinstalldata.base_url" type="text" placeholder="ex:localhost/aplikasi" />
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="input-style-1">
                                <label>Alamat Database</label>
                                <input required v-model="appinstalldata.dbhost" type="text" placeholder="ex:localhost" />
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="input-style-1">
                                <label>Port Database</label>
                                <input required v-model="appinstalldata.dbport" type="text" placeholder="ex:3306" />
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="input-style-1">
                                <label>Nama Database</label>
                                <input required v-model="appinstalldata.dbname" type="text" placeholder="ex:cbt" />
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="input-style-1">
                                <label>Username Database</label>
                                <input required v-model="appinstalldata.dbusername" type="text" placeholder="Username Database" />
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="input-style-2">
                                <label>Password Database</label>
                                <input v-model="appinstalldata.dbpassword" :type="appinstalldata.passoff?'text':'password'" placeholder="Password Database" />
                                <span style="cursor:pointer" @click="appinstalldata.passoff=!appinstalldata.passoff" class="icon"> <i :class="appinstalldata.passoff?'mdi-eye-outline':'mdi-eye-off-outline'" class="mdi"></i> </span>
                            </div>
                        </div>
                        <!-- end col -->
                        <div class="col-12">
                            <div class="button-group d-flex justify-content-center flex-wrap">
                                <button :disabled="appinstallbtndisabled" :class="appinstallbtndisabled?'deactive-btn':'primary-btn'" class="main-btn btn-hover w-100 text-center">
                                    <template v-if="appinstalldata.loading">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    </template>
                                    <template v-else>
                                        {{appinstallbtndisabled?'Isi Semua':'Berikutnya'}}
                                    </template>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                </form>
            </div>
        </div>
    </div>
    <!-- end col -->
</div>
<!-- end row -->

</div>
`;
    return {

        name: "install-db",
        template: vt_template,
        data() {
            return {

                appinstalldata: {
                    errorMessage: '',
                    loading: false,
                    dbhost: 'localhost',
                    dbport: 3306,
                    dbname: 'appdb',
                    dbusername: 'root',
                    dbpassword: '',
                }
            }
        },
        mounted() {

        },
        methods: {
            appinstallfunc_dbinit() {
                this.appinstalldata.loading = true;
                this.appinstalldata.errorMessage = '';
                let data = Object.assign(this.appinstalldata, {
                    [this.$store.state.config.csrf.name]: this.$store.state.config.csrf.value
                });
                axios({
                    method: 'POST',
                    data: data,
                    url: window.location.href,
                }).then((response) => {
                    if (!isObject(response.data)) return this.appinstalldata.errorMessage = gaem({ response }, response.data);
                    window.location.href = '/panel/app/install/step/2';
                }, (error) => {
                    this.appinstalldata.errorMessage = gaem(error);
                    switch (error.response.status) {
                        case 404:
                            try {
                                if (typeof error.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                            } catch (error) {
                            }
                            break;
                        case 403:
                            try {
                                if (typeof error.response.data.messages.csrf != 'undefined') this.$store.state.config.csrf.value = error.response.data.messages.csrf;
                            } catch (error) {
                            }
                            break;
                    }
                }).finally(() => this.appinstalldata.loading = false);
            }
        },
        computed: {
            appinstallfieldvalid() {
                return (this.appinstalldata.dbhost && this.appinstalldata.dbport && this.appinstalldata.dbname && this.appinstalldata.dbusername);
            },
            appinstallbtndisabled() {
                return this.appinstalldata.loading || !this.appinstallfieldvalid;
            }
        }
    }
})();
