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

<script>
  import { getStaticData } from '@/api/data'
  import { compare } from '@/utils/compare'

  export default {
    name: 'LiquidData',
    data() {
      this.title = {
        text: '液位数据曲线图'
      }
      this.chartSettings = {
        labelMap: {
          'liquiddata': '液位值(m)',
          'uptime': '上报时间'
        },
        metrics: ['liquiddata'],
        dimension: ['uptime']
      }
      return {
        listQuery: {
          wellCode: '', // 关键字
          watchType: 'liquid', // 数据类型
          beginTime: '', // 开始时间
          endTime: '', // 结束时间
          sort: '',
          order: ''
        },
        chartData: {
          columns: ['uptime', 'liquiddata'],
          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('该井此段时间内无液位数据，请修改监测指标或查询范围')
          }
          this.chartData.rows = response.data.sort(compare('uptime'))
          this.$refs['linechart'].echarts.resize()
        })
      }
    }
  }
</script>