<template>
  <el-row :gutter="10">
    <el-col>
      <search-area
        type=""
        size="small"
      >
        <!--一般查询条件-->
        <search-item>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            size="small"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="fetchDeviceType"
          />
        </search-item>
        <search-item>
          <el-select
            v-model="listQuery.watchContent"
            placeholder="监控指标"
            size="small"
            @change="watchContentChange"
          >
            <el-option
              v-for="item in watchContentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </search-item>
      </search-area>
    </el-col>
    <el-col>
      <el-col :span="12">
        <ve-line
          :data="chartData"
          :settings="chartSettings"
        />
      </el-col>
      <el-col :span="12">
        <el-table
          v-loading="listLoading"
          class="tableStyle"
          :data="list"
          border
        >
          <el-table-column
            v-for="column in columns"
            :key="column.value"
            :label="column.text"
            :width="column.width"
            :align="column.align"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[column.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
export default {
  name: 'ListLiquidGasData',
  data() {
    return {
      timeRange: '',
      listQuery: {
        devcode: '',
        beginTime: '',
        endTime: '',
        watchContent: '0'
      },
      watchContentList: [
        {
          label: '液位',
          value: '0'
        },
        {
          label: '燃气',
          value: '1'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 是否需要序号列
      options: {
        needIndex: false
      },
      columns: [],
      list: [],
      listLoading: false,
      chartSettings: {},
      chartData: {}
    }
  },
  created() {
    this.watchContentChange()
  },
  methods: {
    initData: function(row = null) {
      this.listQuery.devcode = row.devcode
    },
    fetchDeviceType(val) {
      this.listLoading = true
      if (val !== undefined) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      }
      liquidgasdataList(this.listQuery).then(response => {
        this.list = response.data
        this.chartData.rows = response.data
        this.listLoading = false
      })
    },
    watchContentChange(val) {
      console.log(val, '=====')
      if (val === '0' || val === undefined) {
        this.chartSettings = {
          labelMap: {
            'liquiddata': '液位值'
          },
          metrics: ['liquiddata'],
          dimension: ['uptime']
        }
        this.chartData = {
          columns: ['uptime', 'liquiddata'],
          rows: []
        }
        this.columns = [
          {
            text: '液位值',
            value: 'liquiddata',
            align: 'center'
          },
          {
            text: '上报时间',
            value: 'uptime',
            align: 'center'
          }
        ]
      } else if (val === '1') {
        this.chartSettings = {
          labelMap: {
            'strength': '燃气浓度'
          },
          metrics: ['strength'],
          dimension: ['uptime']
        }
        this.chartData = {
          columns: ['uptime', 'strength'],
          rows: []
        }
        this.columns = [
          {
            text: '燃气浓度',
            value: 'strength',
            align: 'center'
          },
          {
            text: '上报时间',
            value: 'uptime',
            align: 'center'
          }
        ]
      }
      this.fetchDeviceType()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner{
  width: 340px;
}
.tableStyle {
  margin-top: 60px;
}
</style>