<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 ITEM CATEGORY
                        <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="xcategory" hide-details label="Nama Kategori"></v-text-field>
                                    <p v-if="checkErrorForm('requirenamecategory')" class="error pl-2 pr-2" style="color:#fff">Nama kategori harus diisi</p>
                                </v-flex>
                                <v-flex xs6 pa-1>
                                    <v-autocomplete label="Type" :items="xtypelist" v-model="selected_type"
                                            :search-input.sync="search_item_type" hide-details
                                            auto-select-first no-filter item-text="Rk_TypeName" return-object
                                            :loading="isLoading" no-data-text="Pilih Type">
                                            <template slot="item" slot-scope="{ item }">
                                                <v-list-tile-content>
                                                    <v-list-tile-title v-text="item.Rk_TypeName"></v-list-tile-title>
                                                    <v-list-tile-sub-title v-text="item.Rk_TypeCode"></v-list-tile-sub-title>
                                                </v-list-tile-content>
                                            </template>
                                    </v-autocomplete>
                                    <p v-if="checkErrorForm('requiretype')" class="error pl-2 pr-2" style="color:#fff">Type harus dipilih</p>
                                </v-flex>
                            </v-layout>
                            <v-layout row>
                                <v-flex pa-1 text-md-right>
                                    <v-btn small color="error" @click="deleteCategory()">Hapus</v-btn>
                                    <v-btn small v-if="xact === 'new'" color="primary" @click="saveCategory()">Simpan</v-btn>
                                    <v-btn small v-if="xact === 'edit'" color="primary" @click="saveEditCategory()">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: () => ({
            search_item_type: "",
        }),
        mounted() {
            this.$store.dispatch("rktype/gettype", this.search_item_type);
        },
        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;
            },
            xact: {
                get() {
                    return this.$store.state.rktype.act;
                },
                set(data) {
                    this.$store.commit('rktype/update_act', data)
                }
            },
            xtypelist() {
                return this.$store.state.rktype.typelist;
            },
            isLoading() {
                return this.$store.state.rktype.status_get == 1;
            },
            selected_category: {
                get() {
                    return this.$store.state.rktype.selected_category;
                },
                set(data) {
                    this.$store.commit('rktype/update_selected_category', data)
                }
            },
            xcategory: {
                get() {
                    return this.$store.state.rktype.xcategory;
                },
                set(data) {
                    this.$store.commit('rktype/update_xcategory', data)
                }
            },
        },
        methods: {
            checkErrorForm(value) {
                var errors = this.$store.state.rktype.errors
                if (errors.includes(value)) {
                    return true
                } else {
                    return false
                }
            },
            deleteCategory() {
                let prm = {
                    categoryid: this.selected_category.itemCategoryID,
                }
                this.$store.dispatch("rktype/delete", prm)
            },
            saveCategory() {
                this.$store.commit("rktype/update_errors", [])
                var errors = this.$store.state.rktype.errors
                if(_.isEmpty(this.xcategory)) {
                    errors.push("requirenamecategory")
                }
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requiretype")
                }

                if (errors.length === 0) {
                    this.$store.commit("rktype/update_errors", [])
                    let prm  = {
                        categoryname: this.xcategory,
                        typeid: this.selected_type.Rk_TypeID
                    }
                    this.$store.dispatch("rktype/save", prm)   
                }
            },
            saveEditCategory() {
                this.$store.commit("rktype/update_errors", [])
                var errors = this.$store.state.rktype.errors
                if(_.isEmpty(this.xcategory)) {
                    errors.push("requirenamecategory")
                }
                if(_.isEmpty(this.selected_type)) {
                    errors.push("requiretype")
                }

                if (errors.length === 0) {
                    this.$store.commit("rktype/update_errors", [])
                    let prm  = {
                        categoryid: this.selected_category.itemCategoryID,
                        categoryname: this.xcategory,
                        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_xcategory", "")
                this.$store.commit("rktype/update_act", "new")
            },
            openSnackBar(bool) {
                this.$store.commit("rktype/update_message_snack", "");
                this.$store.commit("rktype/open_snackbar", bool);
            },
            thr_search_type: _.debounce(function () {
                this.$store.dispatch("rktype/gettype", this.search_item_type)
            }, 1000),
        },
        watch: {
            search_item_type(val, old) {
                if (val == old) return;
                if (!val) return;
                if (val.length < 1) return;
                if (this.$store.state.rktype.update_status_get == 1) return;
                this.thr_search_type();
            },
        }
    }
</script>