<template>
    <v-dialog v-model="dialog_barcode" persistent max-width="50vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                CETAK BARCODE ASSET
            </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"
                            v-model="bar_chx_all" :indeterminate="indeterminatex" @change="changeCbxAll(bar_chx_all)">
                        </v-checkbox>
                    </v-flex>
                    <v-flex xs3> ITEM </v-flex>
                    <v-flex xs3> RUANGAN </v-flex>
                    <v-flex xs4> NUMBER BARCODE </v-flex>
                    <v-flex xs1> CETAK </v-flex>
                </v-layout>
                <v-layout align-center pa-2 v-for="(vs, idx) in list_barcode" :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="error" @click="closeDialogBarcode()">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 {
            bar_chx_all: false,
            indeterminatex: false,
            selected_barcode: []
        }
    },
    computed: {
        dialog_barcode: {
            get() {
                return this.$store.state.roasset.dialog_barcode
            },
            set(val) {
                this.$store.commit("roasset/update_dialog_barcode", val)
            }
        },
        selected_roasset: {
            get() {
                return this.$store.state.roasset.selected_roasset
            },
            set(val) {
                this.$store.commit("roasset/update_selected_roasset", val)
            }
        },
        list_barcode: {
            get() {
                return this.$store.state.roasset.list_barcode
            },
            set(val) {
                this.$store.commit("roasset/update_list_barcode", val)
            }
        }
    },
    methods: {
        changeCbxAll(value) {
            let arr = this.list_barcode;
            this.indeterminatex = false;
            arr.forEach((el) => {
                el.chex = value;
            });
            let selected = _.filter(arr, function (o) {
                return o.chex;
            });
            this.selected_barcode = selected;
        },
        checkTop() {
            let barcodes = this.list_barcode;
            let 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;
        },
        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);
            });
        },
        closeDialogBarcode() {
            this.bar_chx_all = false
            this.indeterminatex = false
            this.selected_barcode = []
            this.dialog_barcode = false
        }
    },
    watch: {}
}
</script>
