<template>
  <div class="app-container">
    <el-row>
      <!--左半部分-->
      <el-col :span="5">
        <div style="width:90%;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-input v-model.trim="listQuery.keyword" placeholder="场站名称/监控点" clearable @change="fetchData"/>
            </div>
            <el-tree
              :data="data"
              ref="tree"
              :v-loading="listLoading"
              node-key="monitorPointId"
              :highlight-current="true"
              default-expand-all
              :expand-on-click-node="true"
              @node-click="nodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="data.deptId">{{ data.stationName }}</span>
                <span v-else>{{ data.monitorPointName }}</span>
              </span>
            </el-tree>
          </el-card>
        </div>
      </el-col>
      <!--右半部分-->
      <el-col :span="19">
        <!--筛选条件-->
        <div class="search-div">
          <el-form ref="dataForm" :inline="true" :model="listQuery" class="form-container">
            <el-form-item class="selectForm-container-item" prop="startTime">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="采集开始时间"
                end-placeholder="采集结束时间"/>
            </el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-form>
        </div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="数据列表" name="listTab">
            <list-gas-history ref="list"/>
          </el-tab-pane>
          <el-tab-pane label="数据图表" name="chartTab">
            <chart-gas-history ref="chart"/>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ListGasHistory from './components/ListGasHistory'
import ChartGasHistory from './components/ChartGasHistory'
import { getMonitorList } from '@/api/station'

export default {
  name: 'GasData',
  components: { ListGasHistory, ChartGasHistory },
  data() {
    return {
      activeName: 'listTab',
      data: [],
      timeRange: [],
      listLoading: false,
      high: '', // 阈值
      listQuery: {
        monitorId: '',
        keyword: '',
        startTime: '',
        endTime: '',
        offset: 1,
        limit: 20,
        sort: 'logTime',
        order: 'desc'
      }, // 筛选条件
      fullscreenLoading: false // 全屏加载动画
    }
  },
  watch: {
    // 当时间范围变化时，填充listQuery时间
    timeRange(val) {
      if (val && val.length > 0) {
        this.listQuery.startTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  created() {
    // this.fetchData()
    // this.$refs.list.fetchData(this.listQuery)
  },
  mounted() {
    this.fetchData()
    this.$refs.list.fetchData(this.listQuery)
  },
  methods: {
    // 获取数据
    fetchData() {
      this.listLoading = true
      getMonitorList(this.listQuery).then(response => {
        if(response.data.length>0) {
          var jsonArray = response.data
          for (var i = 0; i < jsonArray.length; i++) {
            jsonArray[i].children = jsonArray[i].monipoiList
            delete jsonArray[i].monipoiList
          }
          this.data = jsonArray
          for(var j = 0; j< this.data.length; j++) {
            if( this.data[j].children.length>0){
              this.nodeClick(this.data[j].children[0])
              break
            }
          }
          this.listLoading = false
        }
      })
    },
    handleClick(tab, event) {
      if(tab.name === 'listTab'){
        this.activeName = 'listTab'
        this.$refs.list.fetchData(this.listQuery)
      } else if(tab.name === 'chartTab'){
        this.activeName = 'chartTab'
        this.$refs.chart.fetchData(this.listQuery)
      }
    },
    nodeClick(data){
      if(data.monitorPointId) {
        this.listQuery.monitorId = data.monitorPointId
        this.high = data.high
        this.$nextTick(() => {
          this.$refs['tree'].setCurrentKey(data.monitorPointId)
        })
        if(this.activeName === 'listTab') {
          this.$refs.list.fetchData(this.listQuery)
        } else if(this.activeName === 'chartTab'){
          this.$refs.chart.fetchData(this.listQuery)
        }
      }
    },
    // 查询数据
    search() {
      if(this.activeName === 'listTab') {
        this.$refs.list.fetchData(this.listQuery)
      } else if(this.activeName === 'chartTab'){
        this.$refs.chart.fetchData(this.listQuery)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
</style>