<template>
    <div style="width: 100%;" class="pa-1">
        <v-toolbar color="primary" dark>
            <v-toolbar-title class="white--text">APPROVE REALISASI</v-toolbar-title>
        </v-toolbar>

        <v-card class="pa-2">
            <v-layout row>
                <v-flex xs class="pr-1">
                    <v-menu
                        :close-on-content-click="false" max-width="290px" full-width
                        :nudge-right="40" lazy offset-y min width="290px"
                        transition="scale-transition" v-model="menuStartDate"
                    >
                        <template v-slot:activator="{on}">
                            <v-text-field
                                label="Tanggal Awal" v-model="formatted_startdate"
                                outline v-on="on" hide-details readonly 
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            no-title v-model="filter.startdate"
                            @input="menuStartDate = false"
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-flex xs class="px-1">
                    <v-menu
                        :close-on-content-click="false" max-width="290px" full-width
                        :nudge-right="40" lazy offset-y min width="290px"
                        transition="scale-transition" v-model="menuEndDate"
                    >
                        <template v-slot:activator="{on}">
                            <v-text-field
                                label="Tanggal Akhir" v-model="formatted_enddate"
                                outline v-on="on" hide-details readonly 
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            no-title v-model="filter.enddate"
                            @input="menuEndDate = false"
                        ></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-flex xs class="px-1">
                    <v-text-field
                        label="Cari ..." placeholder="nomor"
                        outline hide-details v-model="filter.search"
                    ></v-text-field>
                </v-flex>
                <v-flex shrink class="pl-1 self-end">
                    <v-btn
                        dark color="primary" @click="searchVoucher()"
                        style="min-width: 50px; height: 50px; margin: 0"
                    >
                        <v-icon>search</v-icon>
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>
        <v-card class="mt-2 pa-2">
            <v-data-table
                :items="listing_voucher.records" :headers="headers" 
                hide-actions class="elevation-1"
            >
                <template slot="items" slot-scope="props">
                    <tr 
                        :class="{'amber lighten-4': isSelected(props.item) }" 
                        @click="selectVoucher(props.item)"
                    >
                        <td class="text-xs-left pa-2">
                            <p class="mb-0 font-weight-bold">{{ props.item.PaymentVoucherNumber }}</p>
                            <p class="mb-0 info--text mono font-weight-bold caption">
                                {{ props.item.PaymentVoucherDate }}
                            </p>
                        </td>
                        <td class="text-xs-left pa-2">
                            <p class="mb-0">{{ props.item.M_BranchName }}</p>
                            <p class="mb-0 font-weight-bold" style="color:#000000">
                                Total : Rp {{ one_money(props.item.PaymentVoucherTotal) }}
                            </p>
                        </td>
                        <td class="text-xs-left pa-2">
                            {{ props.item.PaymentVoucherRealitationDate }}
                        </td>
                        <td class="text-xs-left pa-2">
                            <v-chip small>
                                {{ props.item.PaymentVoucherRealitationApproved == "N" ? 'Not Verified' : 'Verified'}}
                            </v-chip>
                        </td>
                    </tr>
                </template>
            </v-data-table>
            <div class="mt-2 text-xs-center">
                <v-pagination 
                    v-model="main_table_page" :total-visible="5"
                    :length="calcTableLength()" 
                ></v-pagination>
            </div>
        </v-card>
    </div>
</template>

<script>
module.exports = {
    mounted() {
        this.$store.dispatch("voucher/search")
        this.$store.dispatch("voucher/getListAccount")
    },
    data() {
        return {
            menuStartDate: false,
            menuEndDate: false,
            headers: [
                {
                    text: "NO / TANGGAL", align: "left", sortable: false,
                    value: "no", width: "25%", class: "blue lighten-3 white--text",
                },
                {
                    text: "PENERIMA", align: "left", sortable: false, 
                    value: "supplier", width: "30%", class: "blue lighten-3 white--text",
                },
                {
                    text: "TANGGAL REALISASI", align: "left", sortable: false,
                    value: "total", width: "25%", class: "blue lighten-3 white--text",
                },
                {
                    text: "STATUS", align: "left", sortable: false,
                    value: "status", width: "25%", class: "blue lighten-3 white--text",
                },
            ]
        }
    },
    computed: {
        filter: {
            get() {
                return this.$store.state.voucher.filter;
            },
            set(val) {
                this.$store.commit("voucher/update_filter", val);
            }
        },
        main_table_page: {
            get() {
                return this.$store.state.voucher.main_table_page;
            },
            set(val) {
                this.$store.commit("voucher/update_main_table_page", val);
                this.$store.dispatch("voucher/search");
            }
        },
        selected_voucher() {
            return this.$store.state.voucher.selected_voucher;
        },
        listing_voucher() {
            return this.$store.state.voucher.listing_voucher;
        },
        formatted_startdate() {
            return this.formatDate(this.filter.startdate);
        },
        formatted_enddate() {
            return this.formatDate(this.filter.enddate);
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split("-");
            return `${day}-${month}-${year}`;
        },
        one_money(value) {
            let splitValue = value.toString().split(".");

            if(splitValue.length > 1) {
                let val = splitValue[0]
                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundtoThreeDecimal(splitValue[1]);
            } else {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }
        },
        roundtoThreeDecimal(digit) {
            const num = parseInt(digit, 10)
            if (isNaN(num) || num <= 0) {
                return '00';
            }

            const scale = 10 ** digit.length;
            const decimal = num / scale
            return Math.round(decimal * 100);
        },
        searchVoucher() {
            this.$store.dispatch("voucher/search")
        },
        isSelected(item) {
            let selected = this.selected_voucher

            if (selected) {
                return (item.PaymentVoucherNumber == selected.PaymentVoucherNumber);
            }
        },
        selectVoucher(item) {
            this.$store.commit("voucher/update_selected_voucher", item);
            this.$store.dispatch("voucher/searchDetail")
        },
        calcTableLength() {
            const total = this.listing_voucher.total;
            if (total == undefined || total == 0) return 1;
            return Math.ceil(total / 8);
        }
    },
}
</script>