<template>
  <div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <v-card>
        <v-card-title
          v-if="info_trend.title"
          class="headline grey lighten-2"
          primary-title
        >
          {{ info_trend.title }}
        </v-card-title>
        <v-img v-if="! noImage" style="height:80%" :src="imageUrl"></v-img>

        <v-card-text v-if="! noNote"
        v-html="info_trend.note">
        </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>

<script>
let ts = new Date()
module.exports = {
   components : { 
    },
    data () {
        return {
           data: {
           },
           options: {
              responsive: true,
              maintainAspectRatio: false
           }
        }
    },
    computed : {
        imageUrl() {
           let date = new Date()
           let ts  = "&ts=" + date.getTime()
           if ( this.noImage ) return ""
           return "/charts/?" + this.$store.state.re_px.info_trend.image
        },
        noImage() {
           return this.$store.state.re_px.info_trend.image == ""
        },
        noNote() {
           return this.$store.state.re_px.info_trend.note == ""
        },
        dialog : {
            get () { return this.$store.state.re_px.dialog_trend },
            set (v) { this.$store.commit("re_px/update_dialog_trend", v) }
        },
        info_trend () { return this.$store.state.re_px.info_trend }
    }
}
</script>
