<template>
  <div class="data-card-wrap h-100">
    <div class="image-wrap h-100">
      <img :src="getImage().url" alt="">
    </div>
    <div class="data-wrap" :style="{color: getFontColor()}">
      <div class="data-value" v-if="value || value === 0" :style="{color: activeThresholdColor, fontSize: getTitle().fontSize}">{{value.toFixed(2)}} {{getUnit().text}}</div>
      <div class="data-value" v-else :style="{fontSize: getTitle().fontSize}">No Data</div>
      <!-- <div class="data-title">{{getTitle().text}}</div> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      activeThresholdColor: ''
    }
  },
  props: {
    widget: {
      type: Object,
      required: true
    }
  },
  methods: {
    getImage () {
      return this.widget.visual_properties.image || {}
    },
    getTitle () {
      return this.widget.visual_properties.title || {}
    },
    getUnit () {
      return this.widget.visual_properties.unit
    },
    getCard () {
      return this.widget.visual_properties.card || {}
    },
    addDataPoint (point, _) {
      let thresholds = this.widget.visual_properties.threshold
      this.value = point['y']
      this.$_.forEach(thresholds || [], (threshold) => {
        if (this.value >= threshold.from && this.value <= threshold.to) {
          this.activeThresholdColor = threshold.color
        }
      })
    },
    getFontColor () {
      if ((this.getCard().backgroundColor) === '#ffffff') {
        return '#000000'
      } else {
        return this.getCard().fontColor
      }
    },
    resizeWidget () {
    }
  },
  mounted () {
    let seriesData = this.widget.series[0] && this.widget.series[0].data[0]
    if (seriesData) {
      this.addDataPoint(seriesData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-card-wrap {
    height: calc(100% - 28px);
    display: flex;
    padding: 5px;
    .image-wrap {
      width: calc(100% - 150px);
      img {
        height: 100%;
        border-radius: 4px;
      }
    }
    .data-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      width: 150px;
      .data-value {
        font-weight: bold;
        font-size: 24px;
      }
      .data-title {
        // color: #98a6ad;
        text-align: right;
      }
    }
  }
</style>
