<template>
    <v-dialog v-model="dialog_account_item" persistent width="40vw">
        <v-card>
            <v-card-title class="headline grey lighten-2">PILIH ACCOUNT BIAYA</v-card-title>

            <v-card-text>
                <v-layout row wrap v-for="(item, index) in list_voucher_detail" :key="index" class="mt-2">
                    <v-flex xs3 class="pr-1">
                        <div class="text-xs-left">
                            <p class="mb-0">{{ item.PurchaseRequestDirectDescription }}</p>
                            <p class="mb-0 font-weight-bold" style="color:#000000">Kategori: {{ item.PurchaseDirectCategoryName }}</p>
                        </div>
                    </v-flex>
                    <v-flex xs3 class="px-1">
                        <div class="text-xs-left">
                            <p class="mb-0">Jumlah: </p>
                            <p class="mb-0 font-weight-bold" style="color:#000000">Rp. {{ item.PurchaseRequestDirectDetailTotalEstimationPrice }}</p>
                        </div>
                    </v-flex>
                    <v-flex xs6 class="pl-1">
                        <v-autocomplete
                            label="Account Biaya" hide-details outline 
                            v-model="item.account_number" :items="list_accitem" 
                            item-text="coaDescription" item-value="coaAccountNo" 
                        ></v-autocomplete>
                        <p v-show="item.err_message.length > 0" class="mb-0 text-red-600">{{ item.err_message }}</p>
                    </v-flex>
                    <v-flex xs12>
                        <v-divider class="mt-2" v-if="index + 1 < list_voucher_detail.length" :key="`divider-${index}`"></v-divider>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="error" @click="batalAcc()">BATAL</v-btn>
                <v-btn color="primary" @click="simpanAcc()">SIMPAN</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            search_accitem: ''
        }
    },
    computed: {
        dialog_account_item: {
            get() {
                return this.$store.state.voucher.dialog_account_item;
            },
            set(val) {
                this.$store.commit("voucher/update_dialog_account_item", val)
            }
        },
        list_voucher_detail: {
            get() {
                return this.$store.state.voucher.list_voucher_detail;
            },
            set(val) {
                this.$store.commit("voucher/update_list_voucher_detail", val)
            }
        },
        list_accitem() {
            return this.$store.state.voucher.list_accitem;
        }
    },
    methods: {
        simpanAcc() {
            let data = this.list_voucher_detail
            let headerID = 0;
            let isEmpty = false
            data.forEach(elem => {
                if (elem.account_number == '') {
                    elem.err_message = 'account harus diisi'
                    isEmpty = true
                } else {
                    elem.err_message = ''
                }
                headerID = elem.PurchaseRequestDirectDetailPurchaseRequestDirectID
            });

            if (isEmpty) {
                return
            }

            this.$store.dispatch("voucher/saveAccountItem", headerID)
        },
        batalAcc() {
            this.list_voucher_detail = []
            this.dialog_account_item = false
        }
    },
    watch: {

    },
}
</script>