<template>
  <ve-line ref="linechart" :title="title" :data="chartData" :settings="chartSettings" :tooltip="options.tooltip" />
</template>

<script>
import { getStaticData } from '@/api/data/data'
import { compare } from '@/utils/compare'
import 'v-charts/lib/style.css'

export default {
  name: 'GasData',
  data() {
    this.title = {
      text: '燃气监测曲线图'
    }
    this.chartSettings = {
      // xAxisType: 'time',
      labelMap: {
        'strength': '燃气(%LEL)',
        'strengthVOL': '燃气(%VOL)',
        'uptime': '上报时间'
      }, // 别名
      metrics: ['strength'], // 指标
      dimension: ['uptime']// 维度
    }
    return {
      listQuery: {
        wellCode: '', // 关键字
        watchType: 'gas', // 监控数据
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        offset: 1,
        limit: 100000,
        sort: '',
        order: ''
      },
      options: {
        tooltip: {
          // formatter: '{b}<br/>{a} : {c0.split(\',\')[1]}<br/>燃气浓度(%VOL){c0.split(\',\')[1]}'
          formatter: function(params) {
            let res = params.name + '<br/>'
            const value = parseFloat(params.data[1])
            res += params.seriesName + ' : ' + value.toFixed(2)
            if (value > 20) {
              res += '<br/>燃气(%VOL)' + (value / 20.0).toFixed(2)
            }
            return res
          }
        }
      },
      chartData: {
        columns: ['uptime', 'strength'],
        rows: []
      }
    }
  },
  methods: {
    fetchData(params) {
      this.listQuery.wellCode = params.wellCode
      this.listQuery.beginTime = params.beginTime
      this.listQuery.endTime = params.endTime
      getStaticData(this.listQuery).then(response => {
        if (response.data.length === 0) {
          this.$message.error('该井此段时间内无燃气数据，请修改监测指标或查询范围')
        }
        const data = response.data.map(item => {
          return {
            strength: item.strength,
            strengthVOL: (item.strength / 20.0).toFixed(2),
            uptime: item.uptime
          }
        })
        this.chartData.rows = data.sort(compare('uptime'))
        this.$refs['linechart'].echarts.resize()
      })
    }
  }
}
</script>