<template>
  <div v-if="curveInfo" class="box">
    <div class="kwh">
      <div class="block">
        <div
          class="current_kwh"
          :style="'width:' + power"
          :class="curveInfo.power > 30 ? 'green' : 'red'"
        />
      </div>
      {{ curveInfo.power }}%
    </div>
    <div>
      <!-- {{ curveInfo.id }} -->
      <div :id="curveInfo.id" style="height: 300px; width: 100%" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'CurveTableCH4',
  props: ['curveInfo'],
  data() {
    return {
      myChart: null
    }
  },

  computed: {
    test() {
      return this.curveInfo
    },
    power() {
      const percent = this.curveInfo.power / 100

      return percent * 30 + 'px'
    }
  },
  watch: {
    curveInfo: {
      handler(newQuestion) {
        if (!this.curveInfo) {
          return
        }
        setTimeout(() => {
          this.myChart = echarts.init(document.getElementById(this.curveInfo.id))
          // 绘制图表
          this.myChart.setOption({
            title: {
              text: this.curveInfo.title,
              x: 'right'
            },
            tooltip: {},
            xAxis: {
              inverse: true,
              data: this.curveInfo.row,
              axisTick: {
                inside: true,
                alignWithLabel: true
              },
              axisLabel: {
                // interval:0,
                // rotate:-30, //x轴文字倾斜
                padding: [0, 0, 100, 0] // 文字左右定位
              },
              splitLine: {
                interval: '0'
              }
            },
            // yAxis: {
            //   axisLine: {
            //     show: true // 隐藏y轴轴线
            //   },
            //   axisTick: {
            //     inside: true
            //   }
            // },
            yAxis: { // y轴设置
              axisLine: {
                show: true // 隐藏y轴轴线
              },
              axisTick: {
                inside: true
              },
              type: 'value',
              axisLabel: { // y轴设置为%
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              max: 100, // 最大值
              min: 0 // 最小值
            },
            // yAxis: [
            //   {
            //     type: 'value',
            //     axisLabel: {
            //       show: true,
            //       interval: 'auto',
            //       formatter: '{value} %'
            //     },
            //     axisLine: {
            //       show: true // 隐藏y轴轴线
            //     },
            //     axisTick: {
            //       inside: true
            //     },
            //     show: true
            //   }
            // ],
            series: [
              {
                name: this.curveInfo.unit,
                type: 'line',
                data: this.curveInfo.line
              }
            ],
            grid: {
              // containLabel: true
              left:50
            }
          })
        }, 100)
      },
      // 强制立即执行回调
      immediate: true
    }
    // test(a,b){
    //   console.log(b);
    // }
  },
  mounted() {
  }
}
</script>

<style>
.box {
  position: relative;
}

.kwh {
  position: absolute;
  left: 16px;
  top: 6px;
}

.block {
  width: 30px;
  height: 13px;
  display: inline-block;
  border: 1px solid #000;
}

.current_kwh {
  height: 100%;
}

.green {
  background: green;
}

.red {
  background: red;
}
</style>