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

<script>
  import { getStaticData } from '@/api/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>