<template>
  <div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      width="500"
    >

      <v-card>
        <v-card-title
          v-if="info_pre.title"
          class="headline grey lighten-2"
          primary-title
        >
          {{ info_pre.title }}
        </v-card-title>

        <v-progress-circular style="position:relative;margin-left:48%" :indeterminate="true" v-if="info_pre.load"></v-progress-circular>
        <v-card-text v-if="info_pre.note" v-html="info_pre.note"
        :class="{'is-red' : info_pre.red}">
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<style >
   .v-card__text.is-red {
      background-color: #ffcccc;
   }
</style>
<script>
module.exports = {
    data () {
        return {
          
        }
    },

    computed : {
        dialog : {
            get () { return this.$store.state.re_px.dialog_pre},
            set (v) { this.$store.commit("re_px/update_dialog_pre", v) }
        },

        info_pre () { return this.$store.state.re_px.info_pre }
    }
}
</script>
