<template>
  <div class="dialog-data-container">
    <!--标题及查询条件-->
    <div class="title-header">
      <div class="title-left">
        <i class="el-icon-menu" />设备数据情况
      </div>
      <div class="title-right">
        <time-buttons ref="timeButtons" @change="changeTime" />
        <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="fetchData"
        />
      </div>
    </div>
    <el-tabs v-model="listQuery.sensorType" type="card">
      <el-tab-pane label="燃气" name="gas">
        <el-row :gutter="10">
          <el-col :span="14">
            <ve-line v-loading="listLoading" :data="chartData" :settings="chartSettings" />
          </el-col>
          <el-col :span="10">
            <normal-table
              ref="normalTable"
              :head="headConfig"
              :data="list"
              :height="350"
              :query="listQuery"
              :columns="columns"
              :pagination="false"
              :list-loading="listLoading"
              :options="options"
              size="small"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="液位" name="liquid">
        <el-row :gutter="10">
          <el-col :span="14">
            <ve-line v-loading="listLoading" :data="chartData2" :settings="chartSettings2" />
          </el-col>
          <el-col :span="10">
            <normal-table
              ref="normalTable"
              :head="headConfig"
              :data="list2"
              :height="350"
              :query="listQuery"
              :columns="columns2"
              :pagination="false"
              :list-loading="listLoading"
              :options="options"
              size="small"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getLiquidGasDataSingle } from '@/api/data/data'
import TimeButtons from '@/components/BigData/TimeButtons'
export default {
  name: 'SingleGasData',
  components: { TimeButtons },
  props: {
    devcode: {
      type: String,
      require: true
    } // 设备编号
  },
  data() {
    return {
      timeRange: [], // 时间范围
      listQuery: {
        devcode: '',
        sensorType: 'gas',
        beginTime: '',
        endTime: ''
      }, // 查询条件
      options: {
        needIndex: false
      }, // 是否需要序号列
      columns: [
        { text: '上报时间', value: 'uptime', align: 'center' },
        { text: '燃气浓度(%LEL)', value: 'strength', align: 'center' }
      ], // 显示列
      columns2: [
        { text: '上报时间', value: 'uptime', align: 'center' },
        { text: '液位值(%LEL)', value: 'liquiddata', align: 'center' }
      ], // 显示列
      list: [], // 燃气数据
      list2: [], // 液位数据
      listLoading: false,
      pickerOptions: {
        disabledDate(time) { // 限制只能选100天内的时间
          const curDate = (new Date()).getTime()
          const three = 100 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          return time.getTime() > Date.now() || time.getTime() < threeMonths
        }
      },
      headConfig: {
        show: false
      }, // 表格头配置
      chartSettings: {
        labelMap: {
          'strength': '燃气浓度'
        }
        // metrics: ['strength'],
        // dimension: ['uptime']
      }, // 折线图配置
      chartData: {
        columns: ['uptime', 'strength'],
        rows: []
      },
      chartSettings2: {
        labelMap: {
          'liquiddata': '燃气浓度'
        }
        // metrics: ['strength'],
        // dimension: ['uptime']
      }, // 折线图配置
      chartData2: {
        columns: ['uptime', 'liquiddata'],
        rows: []
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    init() {
      this.$refs.timeButtons.initTime()
    },
    // 切换时间的时候
    changeTime(timeRange) {
      console.log('changeTime')
      this.timeRange = timeRange
      this.fetchData()
    },
    // 获取设备数据
    fetchData() {
      this.listLoading = true
      this.listQuery.devcode = this.devcode
      this.handleDateTime()
      getLiquidGasDataSingle(this.listQuery).then(response => {
        if (this.listQuery.sensorType === 'gas') {
          const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
          this.list = data
          this.chartData.rows = data
        } else if (this.listQuery.sensorType === 'liquid') {
          const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
          this.list2 = data
          this.chartData2.rows = data
        }
        this.listLoading = false
      }).catch(_ => this.listLoading = false)
    },
    // 处理时间
    handleDateTime() {
      if (this.timeRange && this.timeRange.length > 0) {
        this.listQuery.beginTime = this.timeRange[0]
        this.listQuery.endTime = this.timeRange[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-data-container{
  padding: 15px 0px;
  .title-header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 10px;
    margin-bottom: 10px;
    border-top: solid 2px #F3F3F3;
    color: #606266;
    .title-left{
      //padding: 10px;
      line-height: 30px;
    }
  }
}
</style>