<template lang="html">
  <div id="TableUsageChart">
    <div id="TableUsageChart_chart" :style="{width:'100%',height:'98%'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    row: {}
  },
  data () {
    return {}
  },
  methods: {
    async searchdata () {
      let param = {
        f_userinfo_id: this.row.f_userinfo_id
      }
      let usage = await this.$resetpost('rs/logic/tableUsageChart', {data: param}, {resolveMsg: null, rejectMsg: '获取用气信息出错!'})
      let xData = []
      let YData = []
      if (usage.data.length === 0) {
        this.$showMessage('未查询到任何数据')
      } else if (usage.data.length === 1) {
        xData[0] = usage.data[0].min_date
        xData[1] = usage.data[0].max_date
        YData[0] = 0
        YData[1] = usage.data[0].f_pregas
      } else {
        for (let row of usage.data) {
          xData.push(row.min_date)
          YData.push(row.f_pregas)
        }
      }
      this.set(xData, YData)
    },
    set (xData, YData) {
      this.xc = echarts.init(document.getElementById('TableUsageChart_chart'))
      this.xc.setOption({
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: YData,
          type: 'line'
        }]
      })
    }
  },
  ready () {
    this.searchdata()
  },
  watch: {}
}
</script>
<style lang="less">
#TableUsageChart {
  div{
    height: auto;
  }
}
</style>
