<template>
    <v-layout class="mb-2" column>
        <v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
            {{ msgsnackbar }}
            <v-btn flat @click="openSnackBar(false)">Tutup</v-btn>
        </v-snackbar>
        <v-card>
            <v-layout row>
                <v-flex xs12>
                    <v-subheader>DETAIL RK TYPE
                        <v-flex text-md-right pa-1>
                            <span @click="addType()" class="ml-1 primary icon-add icon-medium-fill-base white--text xs1"></span>
                        </v-flex>
                    </v-subheader>
                    <v-divider></v-divider>
                    <v-layout row wrap>
                        <v-flex xs12 pa-2>
                            <v-layout row>
                                <v-flex xs6 pa-1>
                                    <v-text-field v-model="selected_type.Rk_TypeCode" label="Kode"></v-text-field>
                                    <p v-if="checkErrorFormType('requirecode')" class="error pl-2 pr-2" style="color:#fff">Kode harus diisi</p>
                                </v-flex>
                                <v-flex xs6 pa-1>
                                    <v-text-field v-model="selected_type.Rk_TypeName" label="Nama Type"></v-text-field>
                                    <p v-if="checkErrorFormType('requiretypename')" class="error pl-2 pr-2" style="color:#fff">Nama type harus diisi</p>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex pa-1 text-md-right>
                                    <v-btn small color="error" @click="deleteType()">Hapus</v-btn>
                                    <v-btn small v-if="xact === 'new'" color="primary" @click="saveType()">Simpan</v-btn>
                                    <v-btn small v-if="xact === 'edit'" color="primary" @click="saveEditType()">Simpan Perubahan</v-btn>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>
        </v-card>
    </v-layout>
</template>

<script>
    module.exports = {
        data: () => ({
 
        }),
        computed: {
            selected_type: {
                get() {
                    return this.$store.state.rktype.selected_type;
                },
                set(data) {
                    this.$store.commit('rktype/update_selected_type', data)
                }
            },
            snackbar: {
                get() {
                    return this.$store.state.rktype.snackbar;
                },
                set(bool) {
                    this.$store.commit("rktype/open_snackbar", bool)
                }
            },
            msgsnackbar() {
                return this.$store.state.rktype.message_snack;
            },
            startComputedDateFormatted() {
                return this.formatDate(this.selected.periodeStartDate)
            },
            endComputedDateFormatted() {
                return this.formatDate(this.selected.periodeEndDate)
            },
            xact: {
                get() {
                    return this.$store.state.rktype.act;
                },
                set(data) {
                    this.$store.commit('rktype/update_act', data)
                }
            },
        },
        methods: {
            checkErrorFormType(value) {
                var errors = this.$store.state.rktype.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            deleteType() {
                let prm = {
                    typeid: this.selected_type.Rk_TypeID
                }
                this.$store.dispatch("rktype/delete", prm)
            },
            saveType() {
                this.$store.commit("rktype/update_errors", [])
                var errors = this.$store.state.rktype.errors
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requirecode")
                }
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requiretypename")
                }

                if (errors.length === 0) {
                    this.$store.commit("rktype/update_errors", [])
                    let prm  = {
                        typecode: this.selected_type.Rk_TypeCode,
                        typename: this.selected_type.Rk_TypeName
                    }
                    this.$store.dispatch("rktype/save", prm)   
                }
            },
            saveEditType() {
                this.$store.commit("rktype/update_errors", [])
                var errors = this.$store.state.rktype.errors
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requirecode")
                }
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requiretypename")
                }

                if (errors.length === 0) {
                    this.$store.commit("rktype/update_errors", [])
                    let prm  = {
                        typecode: this.selected_type.Rk_TypeCode,
                        typename: this.selected_type.Rk_TypeName,
                        typeid: this.selected_type.Rk_TypeID
                    }
                    this.$store.dispatch("rktype/update", prm)   
                }
            },
            addType() {
                this.$store.commit("rktype/update_selected_type", {})
                this.$store.commit("rktype/update_act", "new")
            },
            openSnackBar(bool) {
                this.$store.commit("rktype/update_message_snack", "");
                this.$store.commit("rktype/open_snackbar", bool);
            },
            setMonthText(id) {
                const targetMonth = this.bulan.find((month) => month.id === id);

                if (targetMonth) {
                    this.selected.periodeMonth = targetMonth;
                }
            }
        },
    }
</script>