<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialogForm" persistent max-width="60vw">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    BUKTI PEMBAYARAN
                </v-card-title>
                <v-card-text class="pt-2 pb-0">
                    <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="actAttach == 'upload'" dark @click="saveForm()">Simpan</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

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

        };
    },
    mounted() {

    },
    computed: {
        dialogForm: {
            get() {
                return this.$store.state.manager.dialog_form;
            },
            set(val) {
                this.$store.commit("manager/update_dialog_form", val);
            },
        },
        show_progrees_upload: {
            get() {
                return this.$store.state.manager.show_progrees_upload
            },
            set(val) {
                this.$store.commit("manager/update_show_progrees_upload", val)
            }
        },
        imageFiles: {
            get() {
                return this.$store.state.manager.imageFiles
            },
            set(val) {
                this.$store.commit("manager/update_imageFiles", val)
            }
        },
        imagePreviews: {
            get() {
                return this.$store.state.manager.imagePreviews
            },
            set(val) {
                this.$store.commit("manager/update_imagePreviews", val)
            }
        },
        cekFile: {
            get() {
                return this.$store.state.manager.cekFile;
            },
            set(val) {
                this.$store.commit("manager/update_cekFile", val);
            },
        },
        actAttach: {
            get() {
                return this.$store.state.manager.actAttach;
            },
            set(val) {
                this.$store.commit("manager/update_actAttach", val);
            },
        }
    },
    methods: {
        closeDiallog() {
            this.$store.commit("manager/update_dialog_form", 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);
            }
            // console.log('imagePreviews', this.imagePreviews)
            //  console.log('imageFiles', this.imageFiles)
        },
        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)
                // console.log("formData",formData)
            }

            var user = one_user()
            formData.append('PRDID',  this.$store.state.manager.selectedDetailTable.PurchaseRequestDirectDetailID)
            formData.append('directNumber',  this.$store.state.manager.selectedMainTable.PurchaseRequestDirectNumber)
            formData.append('userId',  user.M_UserID)

            // console.log('prpd', this.$store.state.manager.selectedDetailTable.PurchaseRequestDirectDetailID)
            // console.log('prm', formData)
            this.$store.dispatch('manager/saveFiles', formData)
                //this.submitFiles();
            
            
        }
    },
    watch: {

    },
}
</script>