<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialog_document" persistent max-width="60vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    FORM SURAT JALAN / DOKUMEN DARI SUPPLIER
                </v-card-title>
                <v-card-text class="pt-2 pb-0">
                    <v-layout v-if="act_dialog_doc == 'upload'" mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
                        <v-flex xs9>
                            <input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="handleFileUploads()"/>
                        </v-flex>
                    </v-layout>
                    <p v-show="cekFile" class="error pl-2 pr-2" style="color:#fff">Belum diisi</p>
                    <v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
                        <v-flex xs12>

                        <v-progress-linear :indeterminate="true"></v-progress-linear>

                        </v-flex>
                    </v-layout>
                    <v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
                        <v-flex
                            v-for="(img, index) in imagePreviews"
                            :key="index"
                            xs6
                            class="pa-2"
                        >
                            <v-img :src="img">
                            <div class="fill-height bottom-gradient"></div>
                            </v-img>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="error" flat @click="closeDiallog()"> Tutup </v-btn>
                    <v-btn color="primary" v-if="act_dialog_doc == 'upload'" dark @click="saveForm()">Simpan</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
module.exports = {
    name: "formDialogDocument",
    data() {
        return {

        };
    },
    mounted() {

    },
    computed: {
        dialog_document: {
            get() {
                return this.$store.state.ro.dialog_document;
            },
            set(val) {
                this.$store.commit("ro/update_dialog_document", val);
            },
        },
        show_progrees_upload: {
            get() {
                return this.$store.state.ro.show_progrees_upload
            },
            set(val) {
                this.$store.commit("ro/update_show_progrees_upload", val)
            }
        },
        imageFiles: {
            get() {
                return this.$store.state.ro.imageFiles
            },
            set(val) {
                this.$store.commit("ro/update_imageFiles", val)
            }
        },
        imagePreviews: {
            get() {
                return this.$store.state.ro.imagePreviews
            },
            set(val) {
                this.$store.commit("ro/update_imagePreviews", val)
            }
        },
        cekFile: {
            get() {
                return this.$store.state.ro.cekFile;
            },
            set(val) {
                this.$store.commit("ro/update_cekFile", val);
            },
        },
        act_dialog_doc: {
            get() {
                return this.$store.state.ro.act_dialog_doc;
            },
            set(val) {
                this.$store.commit("ro/update_act_dialog_doc", val);
            },
        },
    },
    methods: {
        closeDiallog() {
            this.$store.commit("ro/update_dialog_document", false);
        },
        handleFileUploads(){
            // this.files = this.$refs.files.files

            const files = this.$refs.files.files;
            this.imagePreviews = [];
            this.imageFiles = [];
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const url = URL.createObjectURL(file);
                this.imagePreviews.push(url);
                this.imageFiles.push(file);
            }
        },
        saveForm() {
            var formData = new FormData()
            // console.log("formData",this.imageFiles.length)

            for( var i = 0; i < this.imageFiles.length; i++ ){
                let file = this.imageFiles[i]

                formData.append('files[' + i + ']', file)
            }

            var user = one_user()
            formData.append('receiveOrderPoID',  this.$store.state.ro.selected_ro.ReceiveOrderPoID)
            formData.append('receiveOrderPoNumber',  this.$store.state.ro.selected_ro.ReceiveOrderPoNumber)
            formData.append('userId', user.M_UserID)

            this.$store.dispatch('ro/saveFiles', formData)
        }
    },
    watch: {

    },
}
</script>
