<template>
    <v-dialog v-model="dialog" max-width="40%" >
        <v-card>
            <v-card-title class="headline info pt-2 pb-2 white--text" primary-title >
            {{ title }}
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                              <v-layout row>
                                  <v-flex xs12>
                                      <v-card>
                                        <div v-if="xIsLoading" style="min-height:200px;width:100%;text-align:center;padding-top:70px;">
                                            <v-progress-circular
                                              :size="50"
                                              color="primary"
                                              indeterminate
                                            ></v-progress-circular>
                                        </div>
                                        <template v-else>
                                          <v-img style="min-height:100px" v-if="ximage != ''"
                                            :src="ximage"
                                          ></v-img>
                                          <div v-if="ximage == ''" style="min-height:50px">&nbsp;</div>
                                          <v-card-text>
                                          <div v-html="xmsg"> </div>
                                          </v-card-text>
                                        </template>
                                      </v-card>
                                  </v-flex>
                              </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="closeInfo()"
                >
                OK
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
module.exports = {
    props : ['status', 'msg',"image", "isLoading", "title"],
    computed : {
        xIsLoading() {
          return this.isLoading;
        },
        ximage() {
            return this.image
        },
        xmsg() {
            console.log('get xmsg',this.msg);
            return this.msg
        },
        dialog: {
            get() {
                console.log('get status',this.status);
                return this.status;
            },
            set(val) {
                console.log('set status',this.status);
                 this.$emit('close-dialog-info');
            }
        }
    },
    methods: {
        closeInfo() {
            this.$emit('close-dialog-info')
        }
    }
}
</script>
