<template>
  <div class="app-container">
    <!--筛选条件-->
    <div class="search-div">
      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
        <el-row>
          <el-form-item class="selectForm-container-item" prop="keywords">
            <el-input v-model.trim="listQuery.wellCode" placeholder="闸井编号" clearable/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.deviceType" placeholder="监测指标" clearable>
              <el-option
                v-for="item in deviceTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-row>
      </el-form>
    </div>
    <!--结果展示-->
    <div v-show="chartShow" class="chart-container">
      <el-row class="chart-tools">
        <el-col :span="21">
          <span class="chart-tool-button" @click="changeDate('today')">今日</span>
          <span class="chart-tool-button" @click="changeDate('yesterday')">昨日</span>
          <span class="chart-tool-button" @click="changeDate('sevendays')">最近7日</span>
          <span class="chart-tool-button" @click="changeDate('lastmonth')">最近30日</span>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="mini"
            @change="fetchData"/>
        </el-col>
        <!--<el-col :span="3">-->
        <!--<el-select v-model="listQuery.deviceType" size="mini" placeholder="设备类型" clearable @change="fetchData">-->
        <!--<el-option-->
        <!--v-for="item in deviceTypeList"-->
        <!--:key="item.value"-->
        <!--:label="item.name"-->
        <!--:value="item.value"/>-->
        <!--</el-select>-->
        <!--</el-col>-->
      </el-row>
      <div class="chart-body">
        <component ref="chart" :is="cmpName"/>
        <!--<liquid-data ref="chart"/>-->
        <!--<ve-line :data="chartData" :settings="chartSettings"/>-->
      </div>
    </div>
  </div>
</template>

<script>
import LiquidData from './components/liquidData'
import GasData from './components/gasData'
import { getDayTime } from '@/utils/dateutils'

export default {
  name: 'DataStatics',
  components: { LiquidData, GasData },
  data() {
    return {
      listQuery: {
        wellCode: '',
        deviceType: '',
        beginTime: '',
        endTime: ''
      },
      timeRange: [],
      deviceTypeList: [
        {
          name: '液位',
          value: 'liquid'
        },
        {
          name: '燃气',
          value: 'gas'
        },
        {
          name: '有害气体',
          value: 'harmful'
        },
        {
          name: '温湿度',
          value: 'temp'
        }
      ],
      chartShow: false, // 图表框是否显示
      cmpName: ''
    }
  },
  methods: {
    search() {
      // 验证闸井编号不能为空
      if (this.listQuery.wellCode === '') {
        this.$message.error('闸井编号不能为空')
        return
      }
      // 验证设备类型
      if (this.listQuery.deviceType === '') {
        this.$message.error('设备类型不能为空')
        return
      }
      this.fetchData()
    },
    fetchData() {
      const defaultBeginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000).Format('yyyy-MM-dd hh:mm:ss')
      const defaultEndTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
      if (this.timeRange.length === 0) {
        this.timeRange = [defaultBeginTime, defaultEndTime]
      }
      this.listQuery.beginTime = this.timeRange[0]
      this.listQuery.endTime = this.timeRange[1]
      if (this.listQuery.deviceType === 'liquid') {
        this.cmpName = 'liquid-data'
      } else if (this.listQuery.deviceType === 'gas') {
        this.cmpName = 'gas-data'
      }
      this.chartShow = true
      setTimeout(() => {
        this.$refs.chart.fetchData(this.listQuery)
      }, 100)
    },
    changeDate(date) {
      let beginTime, endTime
      if (date === 'today') {
        beginTime = getDayTime(new Date().getTime())
        endTime = new Date()
        this.timeRange = [beginTime, endTime]
      } else if (date === 'yesterday') {
        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
        endTime = getDayTime(new Date().getTime())
      } else if (date === 'sevendays') {
        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
        endTime = new Date()
      } else if (date === 'lastmonth') {
        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
        endTime = new Date()
      }
      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 15px 10px 10px 10px;
    .chart-container{
      padding:0px;
      border: 1px solid #d3dce6;
      .chart-tools{
        background-color: #f2f2f2;
        line-height: 35px;
        padding-left: 10px;
        padding-right: 5px;
        .chart-tool-button{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button:hover{
          background-color: #8cc5ff;
          cursor: pointer;
          color:white
        }
        .chart-tool-button:active{
          background-color: #8cc5ff;
          color:white
        }
        .editor--datetimerange.el-input__inner{
          width: 300px;
        }
      }
      .chart-title{
        margin: auto;
        text-align: center;
        margin-top: 15px;
      }
      .chart-body{
        padding:15px;
        height:80%
      }
    }
  }
</style>