<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_golongandarah" persistent max-width="40%">
      <v-card>
        <v-card-title>
          <span class="headline">Golongan Darah</span>
        </v-card-title>
        <v-card-text>
            <v-card class="mt-1">
            <v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
                <v-flex
                    v-for="(img, index) in imagePreviews"
                    :key="index"
                    xs12
                    class="pa-2"
                >
                    <v-img :src="img.image_url">
                    <div class="fill-height bottom-gradient"></div>
                    </v-img>
                </v-flex>
            </v-layout>
            </v-card>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="closeDialogGolonganDarah">Tutup</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

 <script>
 module.exports = {
   mounted() {
      //this.$store.dispatch("re_fna/get_doctors",{token:''})
   },
   data() {
      return {
        error_doctor:false,
        error_image:false,
        selectedFileName: ''
      };
   },
    computed: {
      show_progrees_upload: {
            get() {
                return this.$store.state.re_golongandarah.show_progrees_upload
            },
            set(val) {
                this.$store.commit("re_golongandarah/update_show_progrees_upload", val)
            }
        },
        onprocess(){
          return this.$store.state.re_golongandarah.onprocess
        },
        dialog_golongandarah: {
            get() {
                return this.$store.state.re_golongandarah.dialog_golongandarah
            },
            set(val) {
                this.$store.commit("re_golongandarah/update_dialog_golongandarah", val)
            }
        },
        results: {
            get() {
                return this.$store.state.re_golongandarah.results
            },
            set(val) {
                this.$store.commit("re_golongandarah/update_results", val)
            }
        },
        imagePreviews: {
            get() {
                return this.$store.state.re_golongandarah.imagePreviews
            },
            set(val) {
                this.$store.commit("re_golongandarah/update_imagePreviews", val)
            }
        },
        imageFiles: {
            get() {
                return this.$store.state.re_golongandarah.imageFiles
            },
            set(val) {
                this.$store.commit("re_golongandarah/update_imageFiles", val)
            }
        }
    },
    methods: {
      closeDialogGolonganDarah(){
          this.dialog_golongandarah = false
          this.error_image = false
          this.imagePreviews = []
          this.imageFiles = []
          this.selectedFileName = ''
        },
        handleFileUploads() {
          const files = this.$refs.files.files;
          this.imagePreviews = [];
          this.imageFiles = [];

          if (files.length > 0) {
            const file = files[0];  // ambil file pertama saja
            this.selectedFileName = file.name;

            const url = URL.createObjectURL(file);
            this.imagePreviews.push({
              image_url: url
            });
            this.imageFiles.push(file);
          } else {
            this.selectedFileName = '';
          }

          // reset input supaya bisa pilih file yang sama lagi
          this.$refs.files.value = '';
        },
         removeFile( key ){
          this.files.splice( key, 1 );
        }
      }
    
 }
</script>