<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-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>
  </div>
</template>

<script>
import { getH2SDataSingle } from '@/api/data/data'
import TimeButtons from '@/components/BigData/TimeButtons'
export default {
  name: 'SingleH2SData',
  components: { TimeButtons },
  props: {
    devcode: {
      type: String,
      require: true
    } // 设备编号
  },
  data() {
    return {
      timeRange: [], // 时间范围
      listQuery: {
        devcode: '',
        beginTime: '',
        endTime: ''
      }, // 查询条件
      options: {
        needIndex: false
      }, // 是否需要序号列
      columns: [
        { text: '上报时间', value: 'uptime', align: 'center' },
        { text: 'H2S浓度(ppm)', value: 'strength', align: 'center' }
      ], // 显示列
      list: [], // 列表数据
      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': 'H2S浓度(ppm)'
        },
        metrics: ['strength'],
        dimension: ['uptime']
      }, // 折线图配置
      chartData: {
        columns: ['uptime', 'strength'],
        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()
      getH2SDataSingle(this.listQuery).then(response => {
        const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
        this.list = data
        this.chartData.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>