<template>
  <div class="average-widget-wrap h-100" :id="'card' + widgetId">
    <div class="circle-wrap" id="circle-wrap" :style="{'height': circleContainerHeight}">
      <svg id="svg" :width="svgWidth" :height="svgWidth">
        <circle :r="radius" :cx="svgWidth / 2" :cy="svgWidth / 2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :stroke-width="stroke"></circle>
        <circle v-if="range" id="bar" :r="radius" :cx="svgWidth / 2" :cy="svgWidth / 2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :style="{ strokeDashoffset: strokeDashoffset, stroke: (range ? range.color : '#000') }" :stroke-width="stroke" stroke-linecap="round"></circle>
      </svg>
      <span class="parameter">
        {{series[0].name}}
      </span>
    </div>
    <div id="data-status-wrap">
      <div class="data-wrap">
        <span class="data">{{Number(value).toFixed(2)}}</span>
        <span class="unit">{{visualProperties.data_value.unit}}</span>
      </div>
      <div class="status-wrap" :style="outOfRangeTexteStyle()">
        <span>{{range ? range.rangeText : visualProperties.out_of_range.text}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      value: 0,
      radius: 90,
      stroke: 10,
      progress: 0,
      range: null,
      circleContainerHeight: 0,
      svgWidth: 0
    }
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    }
  },
  methods: {
    addDataPoint (point) {
      if (point['y']) {
        this.setProgress(point)
        this.getRangeStatusByData(point)
      }
    },
    setProgress (data) {
      let min = this.visualProperties.min
      let max = this.visualProperties.max

      if (max && min) {
        this.progress = (data['y'] / (max - min)) * 100
      }
      this.value = data['y']
    },
    getRangeStatusByData (data) {
      let selectedRange = null
      this.$_.forEach(this.visualProperties.range, (range) => {
        if (!selectedRange && data['y'] >= range.from && data['y'] < range.to) {
          selectedRange = range
        }
      })
      if (selectedRange) {
        this.range = this.$_.merge({}, selectedRange)
      } else {
        this.range = null
      }
    },
    setCircleWrapHeight () {
      let id = '#card' + this.widgetId
      let height = $(id + ' #data-status-wrap').height() + 20
      this.circleContainerHeight = `calc(100% - ${height}px)`
    },
    getCircleDiameter () {
      let id = '#card' + this.widgetId
      let width = $(id + ' #circle-wrap').width()
      let height = $(id + ' #circle-wrap').height()

      let diameter = Math.min(width, height)
      this.svgWidth = diameter
      this.radius = (diameter / 2) - this.stroke * 2
      return diameter
    },
    resizeWidget () {
      this.setCircleWrapHeight()
      this.getCircleDiameter()
    },
    outOfRangeTexteStyle () {
      let style = this.visualProperties.out_of_range.text_settings
      return {
        color: style.fontColor,
        fontSize: style.fontSize,
        textAlign: style.align,
        fontWeight: style.decorations.isBold ? 'bold' : '',
        fontStyle: style.decorations.isItalic ? 'italic' : '',
        textDecoration: style.decorations.isUnderline ? 'underline' : ''
      }
    }
  },
  computed: {
    circumference () {
      return this.radius * 2 * Math.PI
    },
    strokeDashoffset () {
      return this.circumference - this.progress / 100 * this.circumference
    }
  },
  mounted () {
    let seriesData = this.series[0] && this.series[0].data[0]
    if (seriesData && seriesData['y']) {
      this.setProgress(seriesData)
      this.getRangeStatusByData(seriesData)
    }
    this.setCircleWrapHeight()
    this.getCircleDiameter()
  },
  updated () {
    this.$nextTick(() => {
      this.setCircleWrapHeight()
      this.getCircleDiameter()
    })
  }
}
</script>

<style lang="scss" scoped>
  .average-widget-wrap {
    text-align: center;
    .circle-wrap {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      #svg {
        transform: rotate(-90deg);
      }
      #svg circle {
        stroke-dashoffset: 0;
        stroke: #EEF2FF;
        transition: stroke-dashoffset 1s linear;
      }
      .parameter {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        font-size: 18px;
      }
    }
    .data-wrap {
      padding: 10px 0;
      .data {
        color: #000;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .status-wrap {
      span {
        font-weight: bold;
        font-size: 21px;
      }
    }
  }
</style>
