<!--suppress ALL -->
<template>
  <Echart
    ref="chart"
    :options="option"
    class="chart-container"
  />
</template>

<script>
  import Echart from '@/common/echart/index'
  export default {
    name: 'Guage1',
    components: { Echart },
    props: {
      rate: {
        type: Number,
        default: 2
      },
      max: {
        type: Number,
        default: 2
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        option: {
          series: [
            {
              type: 'gauge',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: this.max,
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [1, '#00b7bd']
                  ]
                }
              },
              itemStyle: {
                color: '#00b7bd',
              },
              pointer: {
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '70%',
                width: 8,
                offsetCenter: [0, '0%']
              },
              axisTick: {
                distance: -10,
                length: 4,
                lineStyle: {
                  color: '#ffffffaa',
                  width: 2
                }
              },
              splitLine: {
                distance: -10,
                length: 8,
                lineStyle: {
                  color: '#ffffffaa',
                  width: 3
                }
              },
              axisLabel: {
                color: '#ffffffee',
                distance: 10,
                fontSize: 10
              },
              detail: {
                valueAnimation: true,
                formatter: '{value} V\n'+this.title,
                lineHeight: 15,
                height: 15,
                color: 'auto',
                fontSize: 15,
                color: '#fff',
                offsetCenter: [0, '40%']
              },
              data: [
                {
                  value: 70
                }
              ]
            }
          ]
        },
      }
    },
    watch: {
      rate(newVal) {
        this.option.series[0].data[0].value = newVal
          this.refreshChart()
        }
    },
    mounted() {
      this.refreshChart()
    },
    methods: {
      refreshChart() {
        this.option.series[0].data[0].value = this.rate
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container{
    width: 100%;
    height:100%;
  }
</style>