<template>
    <div style="width: 100%;">

        <!-- SNACKBAR -->
        <v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
            {{ msgSnackbar }}
            <v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
        </v-snackbar>

        <!-- ERROR DIALOG -->
        <v-dialog v-model="dialog_error" max-width="500px">
            <v-card>
                <v-card-title>
                    <span>ERROR !</span>
                    <v-spacer></v-spacer>
                </v-card-title>
                <v-divider></v-divider>
                <div class="ma-3 red--text">{{ msgError }}</div>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_error = false">Tutup</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- END ERROR DIALOG -->


        <!-- table list start -->
        <v-toolbar color="primary" dark>
            <v-toolbar-title class="white--text">MAPPING R/K CABANG</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="openDialogAdd()">
                <v-icon>add_box</v-icon>
            </v-btn>
        </v-toolbar>
        <v-card class="pa-2">
            <v-layout row>
                <v-flex xs2 pl-2>
                    <v-autocomplete
                        :items="regionalFilters"
                        v-model="selected_regional_filter"
                        return-object
                        item-text="S_RegionalName"
                        label="Regional"
                        outline
                        hide-details
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-autocomplete
                        :disabled="_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined"
                        :items="branchFilters"
                        v-model="selected_branch_filter"
                        return-object
                        item-text="M_BranchName"
                        label="Cabang"
                        outline
                        hide-details
                    ></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-text-field v-model="xsearch" label="Cari" outline hide-details></v-text-field>
                </v-flex>
                <v-flex pl-2>
                    <v-btn class="ml-2" dark color="primary" style="min-width: 50px; height: 50px; margin: 0;"
                        @click="searchBankCoa()">
                        <v-icon>search</v-icon>
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>
        <v-card class="pa-2 mt-2">
            <v-layout row wrap class="scroll-container" style="max-height: 600px; overflow: auto;">
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="rkcabangs" :loading="isLoading" hide-actions
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.S_RegionalName }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.M_BranchName }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.Rk_TypeName }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                <span class="font-weight-bold">
                                    {{ props.item.Map_RkCabang_CoaAccountNo }}
                                </span>
                                <br />
                                {{ props.item.Map_RkCabang_CoaDescription }}
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                <v-tooltip bottom>
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-icon v-bind="attrs" v-on="on" small class="ml-3"
                                            @click="openDelete(props.item)">delete</v-icon>
                                    </template>
                                    <span>Hapus</span>
                                </v-tooltip>
                                <v-tooltip bottom>
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-icon v-bind="attrs" v-on="on" small class="ml-3"
                                            @click="openEditForm(props.item)">edit</v-icon>
                                    </template>
                                    <span>Edit</span>
                                </v-tooltip>
                            </td>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-pagination style="margin-top: 10px; margin-bottom: 10px;" v-model="curr_page"
                :length="xtotal_page"></v-pagination>
        </v-card>
        <!-- table list end -->

        <!-- form -->
        <template>
            <v-layout row justify-center>
                <v-dialog v-model="dialogForm" persistent max-width="40vw">
                    <v-card>
                        <v-card-title class="headline grey lighten-2" primary-title>
                        FORM RK CABANG
                        </v-card-title>
                        <v-card-text class="pt-2 pb-0">
                            <v-form ref="formrkcabang" v-model="validationrk" lazy-validation>
                                <v-layout wrap>
                                    <v-flex xs12 pt-2>
                                        <v-autocomplete label="Type*" :items="typeList" v-model="selected_type"
                                                :search-input.sync="search_type" 
                                                auto-select-first no-filter item-text="Rk_TypeName" return-object
                                                :loading="isLoadingType" no-data-text="Pilih type"
                                                :rules="typeRules" required>
                                                <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-content>
                                                </template>
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs12 pt-2>
                                        <v-autocomplete label="Regional*" :items="regionals" v-model="selected_regional"
                                                :search-input.sync="search_regional" 
                                                :disabled="xact === 'edit'"
                                                auto-select-first no-filter item-text="S_RegionalName" return-object
                                                :loading="isLoadingRegional" no-data-text="Pilih regional"
                                                :rules="regionalRules" required>
                                                <template slot="item" slot-scope="{ item }">
                                                    <v-list-tile-content>
                                                        <v-list-tile-title v-text="item.S_RegionalName"></v-list-tile-title>
                                                    </v-list-tile-content>
                                                </template>
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs12 pt-2>
                                        <v-select
                                            item-text="M_BranchName"
                                            item-value="M_BranchCode"
                                            return-object
                                            :items="branchs" 
                                            v-model="selected_branch"
                                            label="Cabang"
                                            clearable
                                        ></v-select>
                                    </v-flex>
                                    <v-flex xs12 pt-2>
                                        <v-autocomplete label="Account Coa" :items="coaedclist" v-model="selected_edc_coa"
                                                :search-input.sync="search_coa_edc" 
                                                auto-select-first no-filter item-text="coaDescription" return-object
                                                :loading="isLoadingEdc" no-data-text="Pilih account coa"
                                                :rules="coaRules" required>
                                                <template slot="item" slot-scope="{ item }">
                                                    <v-list-tile-content>
                                                        <v-list-tile-title v-text="item.coaDescription"></v-list-tile-title>
                                                        <v-list-tile-sub-title v-text="item.coaAccountNo"></v-list-tile-sub-title>
                                                    </v-list-tile-content>
                                                </template>
                                        </v-autocomplete>
                                    </v-flex>
                                </v-layout>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="closeDialogForm()">
                            Tutup
                        </v-btn>
                        <v-btn v-if="xact === 'new'" color="primary" @click="saveForm()">Simpan</v-btn>
                        <v-btn v-if="xact === 'edit'" color="primary"  @click="updateForm()">Simpan Perubahan</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>
        </template>
        <!-- end form -->

        <template>
            <v-dialog v-model="dialogdeletealert" max-width="30%">
                <v-card>
                    <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                        Peringatan !
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 xs12>
                                                Yakin, mau hapus Regional : <span class="font-weight-bold">{{ msgalertRegional }}</span>, <span class="font-weight-bold">{{ msgalertName }}</span>?
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="dialogdeletealert = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" @click="closeDeleteAlert()">
                            Yakin lah
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

        <template>
            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
                @close-dialog-info="opendialoginfo = false"></one-dialog-info>
        </template>
    </div>
</template>

<style scoped>
table.v-table tbody td,
table.v-table tbody th {
    height: 40px;
}

table.v-table thead tr {
    height: 40px;
}

.textinput {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #607d8b;
}

.textinput:focus {
    width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
    color: transparent;
}

.textinput:focus::-moz-placeholder {
    color: transparent;
}

.textinput:-moz-placeholder {
    color: transparent;
}

.scroll-container {
    scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
    components: {
        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    data() {
        return {
            dialogdeletealert: false,
            msgalertName: "",
            msgalertRegional: "",
            xid: 0,
            validationrk: false,
            typeRules: [
                v => !!v || 'Type harus diisi'
            ],
            regionalRules: [
                v => !!v || 'Regional harus diisi'
            ],
            coaRules: [
                v => !!v || 'Coa harus diisi'
            ],
            headers: [
                {
                    text: "REGIONAL",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "CABANG",
                    align: "center",
                    sortable: false,
                    value: "jurnal",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "TYPE",
                    align: "center",
                    sortable: false,
                    value: "location",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "ACCOUNT R/K",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "30%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "center",
                    sortable: false,
                    value: "status",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {
        this.$store.dispatch("bank/search", {
            current_page: this.curr_page,
            search: this.xsearch,
            branchCode: "",
            regionalId: ""
        })
        this.$store.dispatch("bank/getRegional", this.search_regional)
        this.$store.dispatch("bank/getRegionalFilter")
        this.$store.dispatch("bank/getType", this.search_type)
        this.$store.dispatch("bank/searchCoaEDC", this.search_coa_edc)
    },
    computed: {
        isLoadingRegional() {
            return this.$store.state.bank.autocomplete_status_regional == 1
        },
        regionals() {
            return this.$store.state.bank.regionals
        },
        selected_regional: {
            get() {
                return this.$store.state.bank.selected_regional
            },
            set(val) {
                this.$store.commit("bank/update_selected_regional", val)
            }
        },
        search_regional: {
            get() {
                return this.$store.state.bank.search_regional
            },
            set(val) {
                this.$store.commit("bank/update_search_regional", val)
            }
        },
        regionalFilters() {
            return this.$store.state.bank.regional_filters
        },
        selected_regional_filter: {
            get() {
                return this.$store.state.bank.selected_regional_filter
            },
            set(val) {
                this.$store.commit("bank/update_selected_regional_filter", val)
            }
        },
        branchFilters() {
            return this.$store.state.bank.branch_filters
        },
        selected_branch_filter: {
            get() {
                return this.$store.state.bank.selected_branch_filter
            },
            set(val) {
                this.$store.commit("bank/update_selected_branch_filter", val)
            }
        },
        branchs() {
            return this.$store.state.bank.branchs
        },
        selected_branch: {
            get() {
                return this.$store.state.bank.selected_branch
            },
            set(val) {
                this.$store.commit("bank/update_selected_branch", val)
            }
        },
        rkcabangs() {
            return this.$store.state.bank.rkcabangs
        },
        selected_rkcabang: {
            get() {
                return this.$store.state.bank.selected_rkcabang
            },
            set(val) {
                this.$store.commit("bank/update_selected_rkcabang", val)
            }
        },
        isLoading() {
            return this.$store.state.bank.search_status === 1
        },
        curr_page: {
            get() {
                return this.$store.state.bank.current_page
            },
            set(val) {
                this.$store.commit("bank/update_current_page", val)
                this.searchBankCoa()
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.bank.total_page
            },
            set(val) {
                this.$store.commit("bank/update_total_page", val)
            }
        },
        opendialoginfo: {
            get() {
                return this.$store.state.bank.open_dialog_info
            },
            set(val) {
                this.$store.commit("bank/update_open_dialog_info", val)
            }
        },
        msginfo: {
            get() {
                return this.$store.state.bank.msg_info
            },
            set(val) {
                this.$store.commit("bank/update_msg_info", val)
            }
        },
        xsearch: {
            get() {
                return this.$store.state.bank.xsearch
            },
            set(val) {
                this.$store.commit("bank/update_xsearch", val)
            }
        },
        dialogForm: {
            get() {
                return this.$store.state.bank.dialog_form
            },
            set(val) {
                this.$store.commit("bank/update_dialog_form", val)
            }
        },
        isLoadingAutocomplete() {
            return this.$store.state.bank.autocomplete_status === 1
        },
        coaedclist() {
            return this.$store.state.bank.coa_edc_list
        },
        selected_edc_coa: {
            get() {
                return this.$store.state.bank.selected_edc_coa
            },
            set(val) {
                this.$store.commit("bank/update_selected_edc_coa", val)
            }
        },
        search_coa_edc: {
            get() {
                return this.$store.state.bank.search_coa_edc
            },
            set(val) {
                this.$store.commit("bank/update_search_coa_edc", val)
            }
        },
        isLoadingEdc() {
            return this.$store.state.bank.autocomplete_status_edc === 1
        },
        isEDC: {
            get() {
                return this.$store.state.bank.isEDC
            },
            set(val) {
                this.$store.commit("bank/update_isEDC", val)
            }
        },
        snackbar: {
            get() {
                return this.$store.state.bank.alert_success
            },
            set(val) {
                this.$store.commit("bank/update_alert_success", val)
            }
        },
        msgSnackbar() {
            return this.$store.state.bank.msg_success;
        },
        dialog_error: {
            get() {
                return this.$store.state.bank.alert_error
            },
            set(val) {
                this.$store.commit("bank/update_alert_error", val)
            },
        },
        msgError() {
            return this.$store.state.bank.save_error_message
        },
        xact() {
            return this.$store.state.bank.act
        },
        typeList() {
            return this.$store.state.bank.type_list
        },
        selected_type: {
            get() {
                return this.$store.state.bank.selected_type
            },
            set(val) {
                this.$store.commit("bank/update_selected_type", val)
            },
        },
        isLoadingType() {
            return this.$store.state.bank.autocomplete_status_type === 1
        },
        search_type: {
            get() {
                return this.$store.state.bank.search_type
            },
            set(val) {
                this.$store.commit("bank/update_search_type", val)
            },
        },
    },
    methods: {
        thr_get_branch_filter: _.debounce(function () {
            this.$store.dispatch("bank/getBranchFilter")
        }, 1000),
        thr_get_branch: _.debounce(function () {
            this.$store.dispatch("bank/getBranch")
        }, 1000),
        thr_search_type: _.debounce(function () {
            this.$store.dispatch("bank/getType", this.search_type)
        }, 2000),
        thr_search_regional: _.debounce(function () {
            this.$store.dispatch("bank/getRegional", this.search_regional)
            this.$store.dispatch("bank/getBranch")
        }, 2000),
        thr_search_coa_edc: _.debounce(function () {
            this.$store.dispatch("bank/searchCoaEDC", this.search_coa_edc)
        }, 2000),
        isSelected(o) {
            return o.Map_RkCabang_ID == this.$store.state.bank.selected_rkcabang.Map_RkCabang_ID
        },
        selectMe(sc) {
            this.$store.commit("bank/update_selected_rkcabang", sc)

            // type
            this.$store.commit("bank/update_type_list", [{
                Rk_TypeID: sc.Rk_TypeID,
                Rk_TypeCode: sc.Rk_TypeCode,
                Rk_TypeName: sc.Rk_TypeName
            }])
            this.$store.commit("bank/update_selected_type", {
                Rk_TypeID: sc.Rk_TypeID,
                Rk_TypeCode: sc.Rk_TypeCode,
                Rk_TypeName: sc.Rk_TypeName
            })

            // regional
            this.$store.commit("bank/update_regionals", [{
                S_RegionalID: sc.S_RegionalID,
                S_RegionalName: sc.S_RegionalName
            }])
            this.$store.commit("bank/update_selected_regional", {
                S_RegionalID: sc.S_RegionalID,
                S_RegionalName: sc.S_RegionalName
            })

            // this.$store.commit("bank/update_branchs", [{
            //     M_BranchCode: sc.M_BranchCode,
            //     M_BranchName: sc.M_BranchName
            // }])
            // this.$store.commit("bank/update_selected_branch", {
            //     M_BranchCode: sc.M_BranchCode,
            //     M_BranchName: sc.M_BranchName
            // })


            // coa
            this.$store.commit("bank/update_coa_edc_list", [{
                coaID: sc.Map_RkCabang_CoaID,
                coaAccountNo: sc.Map_RkCabang_CoaAccountNo,
                coaDescription: sc.Map_RkCabang_CoaDescription
            }])
            this.$store.commit("bank/update_selected_edc_coa", {
                coaID: sc.Map_RkCabang_CoaID,
                coaAccountNo: sc.Map_RkCabang_CoaAccountNo,
                coaDescription: sc.Map_RkCabang_CoaDescription
            })
        },
        searchBankCoa_backup() {
            if (_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined) {
                this.opendialoginfo = true
                this.msginfo = "Anda belum memilih regional"
            } else {
                this.$store.dispatch("bank/search", {
                    current_page: this.curr_page,
                    search: this.xsearch,
                    branchCode: this.selected_branch_filter === undefined ? "" : this.selected_branch_filter.M_BranchCode,
                    regionalId: this.selected_regional_filter.S_RegionalID
                })
            }
        },
        searchBankCoa() {
            if (_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined) {
                this.$store.dispatch("bank/search", {
                    current_page: this.curr_page,
                    search: this.xsearch,
                    branchCode: "",
                    regionalId: ""
                })
            } else {
                this.$store.dispatch("bank/search", {
                    current_page: this.curr_page,
                    search: this.xsearch,
                    branchCode: this.selected_branch_filter === undefined ? "" : this.selected_branch_filter.M_BranchCode,
                    regionalId: this.selected_regional_filter.S_RegionalID
                })
            }
        },
        openEditForm(data) {
            this.selectMe(data)
            this.selected_type = data.Rk_TypeID
            this.selected_regional = data.S_RegionalID
            this.selected_branch = {
                M_BranchCode: data.M_BranchCode
            }
            this.selected_edc_coa = data.Map_RkCabang_CoaID
            this.$store.commit("bank/update_act", 'edit')
            this.$store.commit("bank/update_dialog_form", true)
        },
        closeDialogForm() {
            this.dialogForm = false
        },
        updateForm() {
            if (this.$refs.formrkcabang.validate()) {
                if (_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined) {
                    this.$store.dispatch("bank/updateRkCabang", {
                        rkCabangTypeId: this.selected_type.Rk_TypeID,
                        rkCabangRegionalId: this.selected_regional.S_RegionalID,
                        rkCabangBranchCode: this.selected_branch === undefined ? "" : this.selected_branch.M_BranchCode,
                        rkCabangCoaId: this.selected_edc_coa.coaID,
                        rkCabangCoaAccountNo: this.selected_edc_coa.coaAccountNo,
                        rkCabangCoaDescription: this.selected_edc_coa.coaDescription,
                        rkCabangId: this.selected_rkcabang.Map_RkCabang_ID,
                        branchCode: "",
                        regionalId: ""
                    })
                } else {
                    this.$store.dispatch("bank/updateRkCabang", {
                        rkCabangTypeId: this.selected_type.Rk_TypeID,
                        rkCabangRegionalId: this.selected_regional.S_RegionalID,
                        rkCabangBranchCode: this.selected_branch === undefined ? "" : this.selected_branch.M_BranchCode,
                        rkCabangCoaId: this.selected_edc_coa.coaID,
                        rkCabangCoaAccountNo: this.selected_edc_coa.coaAccountNo,
                        rkCabangCoaDescription: this.selected_edc_coa.coaDescription,
                        rkCabangId: this.selected_rkcabang.Map_RkCabang_ID,
                        branchCode: this.selected_branch_filter === undefined ? "" : this.selected_branch_filter.M_BranchCode,
                        regionalId: this.selected_regional_filter.S_RegionalID
                    })
                }
            }
        },
        updateAlertSuccess() {
            this.$store.commit("bank/update_alert_success", false)
        },
        openDelete(val) {
            this.xid = val.Map_RkCabang_ID
            this.msgalertName = val.Map_RkCabang_CoaDescription
            this.msgalertRegional = val.S_RegionalName
            this.dialogdeletealert = true
        },
        closeDeleteAlert() {
            if (_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined) {
                    this.$store.dispatch("bank/deleteRkCabang", {
                        rkCabangId: this.xid,
                        rkCabangName: this.selected_rkcabang.Map_RkCabang_CoaDescription,
                        branchCode: "",
                        regionalId: ""
                    })
                } else {
                    this.$store.dispatch("bank/deleteRkCabang", {
                        rkCabangId: this.xid,
                        rkCabangName: this.selected_rkcabang.Map_RkCabang_CoaDescription,
                        branchCode: this.selected_branch_filter === undefined ? "" : this.selected_branch_filter.M_BranchCode,
                        regionalId: this.selected_regional_filter.S_RegionalID
                    })
                }

            this.dialogdeletealert = false
        },
        openDialogAdd() {
            this.$refs.formrkcabang.reset()
            this.$refs.formrkcabang.resetValidation()
            this.$store.commit("bank/update_act", 'new')
            this.$store.commit("bank/update_dialog_form", true)
        },
        saveForm() {
            if (this.$refs.formrkcabang.validate()) {
                if (_.isEmpty(this.selected_regional_filter) || this.selected_regional_filter === undefined) {
                    this.$store.dispatch("bank/saveRkCabang", {
                        rkCabangTypeId: this.selected_type.Rk_TypeID,
                        rkCabangRegionalId: this.selected_regional.S_RegionalID,
                        rkCabangBranchCode: this.selected_branch === undefined ? "" : this.selected_branch.M_BranchCode,
                        rkCabangCoaId: this.selected_edc_coa.coaID,
                        rkCabangCoaAccountNo: this.selected_edc_coa.coaAccountNo,
                        rkCabangCoaDescription: this.selected_edc_coa.coaDescription,
                        branchCode: "",
                        regionalId: ""
                    })
                } else {
                    this.$store.dispatch("bank/saveRkCabang", {
                        rkCabangTypeId: this.selected_type.Rk_TypeID,
                        rkCabangRegionalId: this.selected_regional.S_RegionalID,
                        rkCabangBranchCode: this.selected_branch === undefined ? "" : this.selected_branch.M_BranchCode,
                        rkCabangCoaId: this.selected_edc_coa.coaID,
                        rkCabangCoaAccountNo: this.selected_edc_coa.coaAccountNo,
                        rkCabangCoaDescription: this.selected_edc_coa.coaDescription,
                        branchCode: this.selected_branch_filter === undefined ? "" : this.selected_branch_filter.M_BranchCode,
                        regionalId: this.selected_regional_filter.S_RegionalID
                    })
                }
            }
        }
    },
    watch: {
        selected_regional_filter(val, old) {
            this.selected_regional_filter = val
            this.thr_get_branch_filter()
        },
        selected_regional(val, old) {
            this.selected_regional = val
            // this.selected_branch = {}
            this.thr_get_branch()
        },
        search_type(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.bank.update_autocomplete_status_type == 1) return;
            this.thr_search_type();
        },
        search_regional(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.bank.update_autocomplete_status_regional == 1) return;
            this.thr_search_regional();
        },
        search_coa_edc(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.bank.update_autocomplete_status == 1) return;
            this.thr_search_coa_edc();
        }
    },
}