<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 BANK COA</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="regionals"
                        v-model="selected_regional"
                        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) || this.selected_regional === undefined"
                        :items="branchs"
                        v-model="selected_branch"
                        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-flex class="text-xs-right">
                    <v-btn color="warning" @click="btnImportBank()" dark>IMPORT BANK</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="bankcoas" :loading="isLoading" hide-actions
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.MapBank_BranchCode }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.MapBank_NatBankName }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.MapBank_NatBankCode }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                    {{ props.item.MapBank_BankAccountNo }}
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                <span v-if="props.item.MapBank_NatBankIsEDC === 'Y'">
                                    Ya
                                </span>
                                <span v-if="props.item.MapBank_NatBankIsEDC === 'N'">
                                    Tidak
                                </span>
                            </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.MapBank_CoaAccountNo }}
                                </span>
                                <br />
                                {{ props.item.MapBank_CoaDescription }}
                            </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.MapBank_EDC_CoaAccountNo }}
                                </span>
                                <br />
                                {{ props.item.MapBank_EDC_CoaDescription }}
                            </td>
                            <td class="text-xs-right 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
                                            @click="openDeleteBankCoa(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
                                            @click="openEditFormBankCoa(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 edit -->
        <template>
            <v-layout row justify-center>
                <v-dialog v-model="dialogBankCoa" persistent max-width="40vw">
                    <v-card>
                        <v-card-title class="headline grey lighten-2" primary-title>
                        FORM EDIT MAP BANK COA
                        </v-card-title>
                        <v-card-text class="pt-2 pb-0">
                            <v-layout wrap>
                                <v-flex xs12>
                                <v-layout>
                                    <v-flex xs6 pa-1 pr-3>
                                        <div class="font-weight-bold">
                                            <div>NAMA BANK</div>
                                        </div>
                                        <div class="pa-2 grey lighten-2">
                                            <div>{{ selected_bankcoa.MapBank_NatBankName }}</div>
                                        </div>
                                    </v-flex>
                                    <v-flex xs6 pa-1 pl-3>
                                        <div class="font-weight-bold">
                                            <div>KODE BANK</div>
                                        </div>
                                        <div class="pa-2 grey lighten-2">
                                            <div>{{ selected_bankcoa.MapBank_NatBankCode }}</div>
                                        </div>
                                        <!-- <v-text-field :value="xrefno" label="Ref No"></v-text-field> -->
                                    </v-flex>
                                </v-layout>
                                </v-flex>
                            </v-layout>

                            <v-layout wrap>
                                <v-flex xs12>
                                    <v-autocomplete label="ACCOUNT BANK COA" :items="coabanklist" v-model="selected_bank_coa"
                                            :search-input.sync="search_coa_bank" hide-details clearable
                                            auto-select-first no-filter item-text="coaDescription" return-object
                                            :loading="isLoadingAutocomplete" no-data-text="Pilih account bank coa">
                                            <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-flex xs12>
                                    <v-autocomplete label="ACCOUNT EDC" :items="coaedclist" v-model="selected_edc_coa"
                                            :search-input.sync="search_coa_edc" hide-details clearable
                                            auto-select-first no-filter item-text="coaDescription" return-object
                                            :loading="isLoadingAutocomplete" no-data-text="Pilih account edc">
                                            <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-flex xs12>
                                    <v-checkbox
                                        v-model="isEDC"
                                        label="IsEDC"
                                    >
                                    </v-checkbox>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                        <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="error" flat @click="closeDialogBankCoa()">
                            Tutup
                        </v-btn>
                        <v-btn
                            color="primary"
                            dark
                            @click="updateBankCoa()"
                            >Simpan Perubahan</v-btn
                        >
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>
        </template>
        <!-- end form edit -->

        <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>
                                                {{msgalert}}
                                            </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>
            <v-dialog v-model="dialogimportbank" 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 import bank dari cabang <span class="font-weight-bold">{{msgalert_bankname}}</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="dialogimportbank = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" @click="closeImportBank()">
                            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,
            msgalert: "",
            xid: 0,
            dialogimportbank: false,
            msgalert_bankname: "",
            branchCode: "",
            headers: [
                {
                    text: "KODE CABANG",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAMA BANK",
                    align: "center",
                    sortable: false,
                    value: "jurnal",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "KODE BANK",
                    align: "center",
                    sortable: false,
                    value: "location",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "ACCOUNT BANK",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "EDC",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "5%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "ACCOUNT BANK COA",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "ACCOUNT EDC",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "center",
                    sortable: false,
                    value: "status",
                    width: "5%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {
        this.$store.dispatch("bank/getRegional")
        this.$store.dispatch("bank/searchCoaBank", this.search_coa_bank)
        this.$store.dispatch("bank/searchCoaEDC", this.search_coa_edc)
    },
    computed: {
        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)
            }
        },
        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)
            }
        },
        bankcoas() {
            return this.$store.state.bank.bankcoas
        },
        selected_bankcoa: {
            get() {
                return this.$store.state.bank.selected_bankcoa
            },
            set(val) {
                this.$store.commit("bank/update_selected_bankcoa", 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)
            }
        },
        dialogBankCoa: {
            get() {
                return this.$store.state.bank.dialog_bankCoa
            },
            set(val) {
                this.$store.commit("bank/update_dialog_bankCoa", val)
            }
        },
        coabanklist() {
            return this.$store.state.bank.coa_bank_list
        },
        selected_bank_coa: {
            get() {
                return this.$store.state.bank.selected_bank_coa
            },
            set(val) {
                this.$store.commit("bank/update_selected_bank_coa", val)
            }
        },
        search_coa_bank: {
            get() {
                return this.$store.state.bank.search_coa_bank
            },
            set(val) {
                this.$store.commit("bank/update_search_coa_bank", 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)
            }
        },
        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
        },
    },
    methods: {
        thr_get_branch: _.debounce(function () {
            this.$store.dispatch("bank/getBranch")
        }, 1000),
        thr_search_coa_bank: _.debounce(function () {
            this.$store.dispatch("bank/searchCoaBank", this.search_coa_bank)
        }, 2000),
        thr_search_coa_edc: _.debounce(function () {
            this.$store.dispatch("bank/searchCoaEDC", this.search_coa_edc)
        }, 2000),
        isSelected(o) {
            return o.MapBank_ID == this.$store.state.bank.selected_bankcoa.MapBank_ID
        },
        selectMe(sc) {
            this.$store.commit("bank/update_selected_bankcoa", sc)
        },
        searchBankCoa() {
            if (_.isEmpty(this.selected_regional) || this.selected_regional === 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 === undefined ? "" : this.selected_branch.M_BranchCode,
                    regionalId: this.selected_regional.S_RegionalID
                })
            }
        },
        openEditFormBankCoa(val) {
            this.dialogBankCoa = true
            this.$store.commit("bank/update_coa_bank_list", [{
                coaID: val.MapBank_CoaID,
                coaAccountNo: val.MapBank_CoaAccountNo,
                coaDescription: val.MapBank_CoaDescription
            }])
            this.$store.commit("bank/update_selected_bank_coa", {
                coaID: val.MapBank_CoaID,
                coaAccountNo: val.MapBank_CoaAccountNo,
                coaDescription: val.MapBank_CoaDescription
            })
            this.$store.commit("bank/update_coa_edc_list", [{
                coaID: val.MapBank_EDC_CoaID,
                coaAccountNo: val.MapBank_EDC_CoaAccountNo,
                coaDescription: val.MapBank_EDC_CoaDescription
            }])
            this.$store.commit("bank/update_selected_edc_coa", {
                coaID: val.MapBank_EDC_CoaID,
                coaAccountNo: val.MapBank_EDC_CoaAccountNo,
                coaDescription: val.MapBank_EDC_CoaDescription
            })
            this.$store.commit("bank/update_isEDC", val.MapBank_NatBankIsEDC === "Y" ? true : false)
        },
        closeDialogBankCoa() {
            this.dialogBankCoa = false
        },
        updateBankCoa() {
            this.$store.dispatch("bank/saveupdate", {
                isEdc: this.isEDC === true ? "Y" : "N",
                coaBankId: this.selected_bank_coa === undefined ? 0 : this.selected_bank_coa.coaID,
                coaBankAccountNo: this.selected_bank_coa === undefined ? "" : this.selected_bank_coa.coaAccountNo,
                coaBankDescription: this.selected_bank_coa === undefined ? "" : this.selected_bank_coa.coaDescription,
                edcCoaId: this.selected_edc_coa === undefined ? 0 : this.selected_edc_coa.coaID,
                edcCoaAccountNo: this.selected_edc_coa === undefined ? "" : this.selected_edc_coa.coaAccountNo,
                edcCoaDescription: this.selected_edc_coa === undefined ? "" : this.selected_edc_coa.coaDescription,
                mapBankId: this.selected_bankcoa.MapBank_ID,
                mapBankName: this.selected_bankcoa.MapBank_NatBankName
            })
        },
        updateAlertSuccess() {
            this.$store.commit("bank/update_alert_success", false)
        },
        openDeleteBankCoa(val) {
            this.xid = val.MapBank_ID
            this.msgalert = "Yakin, mau hapus mapping [" + val.MapBank_NatBankName + "] ?"
            this.dialogdeletealert = true
        },
        closeDeleteAlert() {
            this.$store.dispatch("bank/deletebankcoa", {
                mapBankId: this.xid,
                mapBankName: this.selected_bankcoa.MapBank_NatBankName
            })
            this.dialogdeletealert = false
        },
        btnImportBank() {
            let user = one_user()

            if (user.M_BranchID === 0 || user.M_BranchID === "0") {
                this.opendialoginfo = true
                this.msginfo = "Mohon maaf, Anda tidak bisa melakukan import bank karena login sebagai regional"
            } else {
                this.branchCode = user.M_BranchCode
                this.msgalert_bankname = user.M_BranchName
                this.dialogimportbank = true
            }
        },
        closeImportBank() {
            let prm = {
                branchCode: this.branchCode
            }
            this.$store.dispatch("bank/doImportBank",prm)
            this.dialogimportbank = false
        }
    },
    watch: {
        selected_regional(val, old) {
            this.selected_regional = val
            this.thr_get_branch()
        },
        search_coa_bank(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_bank();
        },
        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();
        }
    },
}