<template>
    <v-dialog v-model="dialog_view_img" persistent width="50vw">
        <v-card>
            <v-card-title>
                <v-spacer></v-spacer>
                <v-btn color="red" fab outline @click="dialog_view_img = false">
                    <v-icon color="red">close</v-icon>
                </v-btn>
            </v-card-title>
            <v-card-text class="dialog-content-scroll">
                <div class="pa-2">
                    <v-img
                        :src="selected_img_view" contain
                        class="grey lighten-2"
                    ></v-img>
                </div>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn class="mr-2" color="red" flat outline @click="dialog_view_img = false">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style>
    .dialog-content-scroll {
        max-height: 70vh;
        overflow-y: auto;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            
        }
    },
    computed: {
        dialog_view_img: {
            get() {
                return this.$store.state.cashier.dialog_view_img
            },
            set(val) {
                this.$store.commit("cashier/update_dialog_view_img", val)
            }
        },
        selected_img_view() {
            return this.$store.state.cashier.selected_img_view
        }
    },
    methods: {
        closeViewImg() {
            this.$store.commit("cashier/update_selected_img_view", '')
            this.dialog_view_img = false;
        }
    },
}
</script>