<template>
    <v-dialog v-model="dialog" max-width="500px" persistent>
        <v-card>
            <v-card-title class="grey lighten-2">
                <h3>Result Note Row</h3>
            </v-card-title>
            <v-card-text>
                <v-layout row wrap>

                    <!-- progress bar -->
                    <v-layout v-if="show_progrees_upload" row align-center>
                        <v-flex xs12>
                            <v-progress-linear :indeterminate="true"></v-progress-linear>
                        </v-flex>
                    </v-layout>

                    <!-- Hasil non lab -->
                    <!-- <v-flex xs12 class="mb-4">
                        <label style="font-weight: bold; color: red;">{{ this.error_save }}</label>
                        <br v-if="(this.error_save != '')" />
                        <label style="font-weight: bold;"> * File Hasil Non Lab</label>
                        <br /> -->
                        <!-- <v-text-field label="Pilih Hasil Non Lab" hide-details @click='pickFile' v-model='imageName'
                            prepend-icon='attach_file' class="mt-2"></v-text-field> -->
                        <!-- <input type="file" style="display: none" ref="image" accept="image/*, application/pdf" @change="onFilePicked"> -->
                        <!-- <input type="file" ref="image" accept="image/*, application/pdf"
                            v-on:change="handleFileUploads('nonlab')" />
                    </v-flex> -->
                    <!-- Hasil non lab -->

                    <!-- Hasil lab -->
                    <v-flex xs12 class="mb-4">
                        <label style="font-weight: bold; color: red;">{{ this.error_save }}</label>
                        <br v-if="(this.error_save != '')" />
                        <label style="font-weight: bold;"> * File Hasil Lab</label>
                        <br />
                        <!-- <v-text-field label="Pilih Hasil Lab" hide-details @click='pickFileLab' v-model='imageNameLab'
                            prepend-icon='attach_file' class="mt-2"></v-text-field> -->
                        <!-- <input type="file" style="display: none" ref="imageLab" accept="image/*, application/pdf" @change="onFilePickedLab"> -->
                        <input type="file" ref="imageLab" accept="image/*, application/pdf"
                            v-on:change="handleFileUploads('lab')" />
                    </v-flex>
                    <!-- Hasil lab -->
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-btn color="primary" flat @click="closeDialogUpload">Tutup</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="save">Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style>
/* .v-overlay--active {
    z-index: 1005 !important;
}

.v-dialog__content--active {
    z-index: 1006 !important;
} */
</style>

<script>
module.exports = {
    data() {
        return {
            // image
            imageName: '',
            imageUrl: '',
            imageFile: '',
            imageOldName: '',
            ximage: '',
            filesNonLab: '',
            typeNonLab:"",

            // lab
            imageNameLab: '',
            imageUrlLab: '',
            imageFileLab: '',
            imageOldNameLab: '',
            ximageLab: '',
            filesLab: '',
            typeLab:"",

            error_image_nonlab: false,
            error_image_lab: false,
            type_image: 'nonlab',
        }
    },

    computed: {
        dialog: {
            get() { return this.$store.state.re_px.dialog_upload_file },
            set(v) { this.$store.commit('re_px/update_dialog_upload_file', v) }
        },
        show_progrees_upload: {
            get() {
                return this.$store.state.re_px.show_progrees_upload
            },
            set(val) {
                this.$store.commit("re_px/update_show_progrees_upload", val)
            }
        },
        error_save:{
            get(){ return this.$store.state.re_px.save_error_message_lampiran},
            set(v) {
                this.$store.commit("re_px/update_save_error_message_lampiran", v)
            }
        }
    },

    methods: {
        handleFileUploads(value) {
            if (value === 'nonlab') {
                this.typeNonLab = "NonLab"
                this.filesNonLab = this.$refs.image.files[0];
                this.show_progrees_upload = true
            }
            else {
                this.typeLab = "Lab"
                this.filesLab = this.$refs.imageLab.files[0];
                this.show_progrees_upload = true
            }
        },

        save() {
            // this.error_save = ""

            // jk upload lab & non lab
            // if(this.filesNonLab == "" && this.filesLab == ""){
            //     this.$store.commit("re_px/update_save_error_message_lampiran", "Err : File Non Lab atau Lab Masih Belum Dipilih")
            // }else{
            //     this.error_image_nonlab = false
            //     this.error_image_lab = false
            //     let formData = new FormData();

            //     if(this.filesNonLab != ""){
            //         formData.append('fileNonLab', this.filesNonLab);
            //         formData.append('typeNonLab',  this.typeNonLab);
            //     }

            //     if(this.filesLab != ""){
            //         formData.append('fileLab', this.filesLab);
            //         formData.append('typeLab',  this.typeLab);
            //     }

            //     formData.append('orderid', this.$store.state.re_px.order_id)
            //     formData.append('token', one_token())           
            //     this.$store.dispatch("re_px/uploadimage_lampiran",formData)
            // }

            // hanya lab
            if(this.filesLab == ""){
                this.$store.commit("re_px/update_save_error_message_lampiran", "Err : File Lab Masih Belum Dipilih")
            }else{
                // this.error_image_nonlab = false
                this.error_image_lab = false
                let formData = new FormData();

                if(this.filesLab != ""){
                    formData.append('fileLab', this.filesLab);
                    formData.append('typeLab',  this.typeLab);
                }

                formData.append('orderid', this.$store.state.re_px.order_id)
                formData.append('token', one_token())           
                this.$store.dispatch("re_px/uploadimage_lampiran",formData)
            }
        },

        closeDialogUpload() {
            // non lab
            this.imageName = ''
            this.imageFile = ''
            this.imageUrl = ''

            // lab
            this.imageNameLab = ''
            this.imageFileLab = ''
            this.imageUrlLab = ''

            this.typeNonLab = ""
            this.typeLab = ""
            this.filesNonLab = ""
            this.filesLab = ""
            this.error_save = ""
            // this.$refs.image.value = ""
            this.$refs.imageLab.value = ""

            // close dialog
            this.dialog = !this.dialog;
        },
    }
}
</script>