<template>
<div>
    <v-dialog v-model="dialog_attachment" persistent max-width="60vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                VIEW ATTACHMENT
            </v-card-title>
            <v-card-text>
                <v-layout row wrap>
                    <v-flex
                        v-for="(nota) in list_attachment" 
                        xs4 class="pa-2" :key="nota.attach_id"
                    >
                        <div style="position: relative; padding-bottom: 35px;">
                            <v-img
                                :src="makeImageURL(nota)" aspect-ratio="1" contain
                                class="grey lighten-2" @click="fullview(nota)"
                            ></v-img>
                        </div>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="tutupViewAttachment()" color="error" class="white--text">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <v-dialog v-model="dialog_fullview" persistent max-width="60vw">
        <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>
                {{  view_title }}
            </v-card-title>
            <v-card-text style="max-height: 80vh; overflow-y: auto;">
                <div class="pa-2">
                    <v-img :src="view_url" 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_fullview = false">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</div>
</template>

<style scoped>
.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    cursor: pointer;
}
</style>

<script>
module.exports = {
    data() {
        return {
            dialog_fullview: false,
            view_title: "",
            view_url: ""
        }
    },
    computed: {
        dialog_attachment: {
            get() {
                return this.$store.state.orderAsset.dialog_attachment;
            },
            set(val) {
                this.$store.commit("orderAsset/update_dialog_attachment", val);
            }
        },
        list_attachment() {
            return this.$store.state.orderAsset.list_attachment;
        }
    },
    methods: {
        makeImageURL(nota) {
            const year = new Date(nota.created).getFullYear();
            const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
            return baseURL + nota.img_url;
        },
        fullview(nota) {
            this.view_title = nota.img_url;
            this.view_url = this.makeImageURL(nota)
            this.dialog_fullview = true;
        },
        tutupViewAttachment() {
            this.view_title = ""
            this.view_url = ""
            this.dialog_attachment = false
        }
    },
    watch: { 
        
    }
}
</script>
