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

        <v-dialog v-model="dialog_fullview" persistent max-width="50vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    {{ doctitle }}
                    <v-spacer></v-spacer>
                    <v-btn color="red" fab small outline @click="dialog_fullview = false">
                        <v-icon color="red">close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-card-text style="max-height: 80vh; overflow-y: auto;">
                    <div class="pa-2">
                        <v-img :src="docurl" 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>

<script>
module.exports = {
    data() {
        return {
            dialog_fullview: false,
            doctitle: "",
            docurl: ""
        }
    },
    computed: {
        dialog_attachment: {
            get() {
                return this.$store.state.data.dialog_attachment
            },
            set(val) {
                this.$store.commit("data/update_dialog_attachment", val)
            }
        },
        preview_attachment: {
            get() {
                return this.$store.state.data.preview_attachment
            },
            set(val) {
                this.$store.commit("data/update_preview_attachment", val)
            }
        }
    },
    methods: {
        fullview(docs) {
            this.doctitle = docs.img_url
            this.docurl = this.makeImgUrl(docs)
            this.dialog_fullview = true
        },
        makeImgUrl(docs) {
            const year = new Date(docs.created).getFullYear()
            let baseURL = BASE_URL;

            switch (docs.category) {
                case "4":
                    baseURL += `/one-media/order-jasa/${year}/`
                    return baseURL + docs.img_url
                case "2":
                    baseURL += `/one-media/order-inventaris/${year}/`
                    return baseURL + docs.img_url
                case "3":
                    baseURL += `/one-media/order-asset/${year}/`
                    return baseURL + docs.img_url
                default:
                    return null
            }
        }
    },
    watch: {

    },
}
</script>
