<template>
    <v-dialog v-model="dialog_barcode" persistent max-width="50vw">
        <v-card>
            <v-card-title style="color: #fff" class="headline grey darken-1">Cetak Barcode</v-card-title>
            <v-card-text>
                <v-layout pa-2 class="grey lighten-2" row>
                    <v-flex xs1>
                        <v-checkbox style="padding-top: 0; margin-top: 0" hide-details color="grey darken-1"
                            :indeterminate="indeterminatex" @change="changeCbxAll(bar_chx_all)" v-model="bar_chx_all">
                        </v-checkbox>
                    </v-flex>
                    <v-flex xs3> ITEM </v-flex>
                    <v-flex xs3> RUANGAN </v-flex>
                    <v-flex xs4> NOMOR BARCODE </v-flex>
                    <v-flex xs1> CETAK </v-flex>
                </v-layout>
                <v-layout align-center pa-2 v-for="(vs, idx) in barcodes" :key="vs.id" class="grey lighten-4" row>
                    <v-flex xs1>
                        <v-checkbox style="padding-top: 0; margin-top: 0" color="grey darken-1" hide-details
                            v-model="vs.chex" @change="checkTop()"></v-checkbox>
                    </v-flex>
                    <v-flex xs3>{{ vs.M_ItemDesc }}</v-flex>
                    <v-flex xs3>{{ vs.M_RuanganName }}</v-flex>
                    <v-flex xs4>{{ vs.T_BarcodeBarangNumber }}</v-flex>
                    <v-flex xs1>
                        <span @click="printSingleBarcode(vs)"
                            class="icon-medium-fill-base-small xs1 white--text grey darken-1 ml-1 icon-print"></span>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="grey darken-1" flat @click="dialog_barcode = false">Tutup</v-btn>
                <v-btn dark color="grey darken-1" @click="printMultipleBarcode">Cetak terpilih
                    [ {{ selected_barcode.length }} ]
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            valid_formhandover: true
        }
    },
    computed: {
        dialog_barcode: {
            get() {
                return this.$store.state.ro.dialog_barcode
            },
            set(val) {
                this.$store.commit("ro/update_dialog_barcode", val)
            }
        },
        barcodes: {
            get() {
                return this.$store.state.ro.barcodes
            },
            set(val) {
                this.$store.commit("ro/update_barcodes", val)
            }
        },
        selected_item_received: {
            get() {
                return this.$store.state.form.selected_item_received
            },
            set(val) {
                this.$store.commit("form/update_selected_item_received", val)
            }
        },
        selected_ro: {
            get() {
                return this.$store.state.ro.selected_ro
            },
            set(val) {
                this.$store.commit("ro/update_selected_ro", val);
            }
        },
        list_staff() {
            return this.$store.state.ro.list_staff
        },
        urlQrCode: {
            get() {
                return this.$store.state.ro.urlQrCode;
            },
            set(val) {
                this.$store.commit("ro/update_urlQrCode", val);
            },
        },
        indeterminatex: {
            get() {
                return this.$store.state.ro.indeterminatex;
            },
            set(val) {
                this.$store.commit("ro/update_indeterminatex", val);
            },
        },
        bar_chx_all: {
            get() {
                return this.$store.state.ro.bar_chx_all;
            },
            set(val) {
                this.$store.commit("ro/update_bar_chx_all", val);
            },
        },
        selected_barcode: {
            get() {
                return this.$store.state.ro.selected_barcode;
            },
            set(val) {
                this.$store.commit("ro/update_selected_barcode", val);
            },
        },
    },
    methods: {
        changeCbxAll(value) {
            var arr = this.barcodes;
            this.indeterminatex = false;
            arr.forEach((el) => {
                el.chex = value;
            });
            var selected = _.filter(arr, function (o) {
                return o.chex;
            });
            this.selected_barcode = selected;
        },
        checkTop() {
            var barcodes = this.barcodes;
            var selected = _.filter(barcodes, function (o) {
                return o.chex;
            });
            this.bar_chx_all = false;
            this.indeterminatex = false;
            if (selected.length > 0 && barcodes.length === selected.length) {
                this.bar_chx_all = true;
                this.indeterminatex = false;
            }
            if (selected.length > 0 && barcodes.length > selected.length) {
                this.bar_chx_all = false;
                this.indeterminatex = true;
            }
            this.selected_barcode = selected;
            console.log(selected);
        },
        printSingleBarcode(value) {
            var inp = {
                nama_item: value.M_ItemDesc,
                no_inv: value.T_BarcodeBarangNumber,
                lokasi: value.M_RuanganName,
                cabang: value.M_BranchName
            };

            one_print_qrcode_inv(inp);
        },
        printMultipleBarcode() {
            var barcodes = this.selected_barcode;
            barcodes.forEach(value => {
                var inp = {
                    nama_item: value.M_ItemDesc,
                    no_inv: value.T_BarcodeBarangNumber,
                    lokasi: value.M_RuanganName,
                    cabang: value.M_BranchName
                };

                one_print_qrcode_inv(inp);
            });
        },
    },
}
</script>
