<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 :is="cmpName" ref="chart" />
        <!--<liquid-data ref="chart"/>-->
        <!--<ve-line :data="chartData" :settings="chartSettings"/>-->
      </div>
    </div>
    <div v-show="!chartShow" class="introduce">
      <el-row>
        <h3>说明</h3>
        <p>该模块可以查看指定井一段时间范围内的数据(液位、燃气、有害气体、温湿度)曲线图,分析数据变化趋势。</p>
        <p>使用方法：请在上方输入框中输入要查询的完整的井编号，选择监测指标后点击搜索按钮。默认查询7天数据。</p>
      </el-row>
      <el-row>
        <el-image
          :src="chartSample"
          style="width: 90%"
          fit="fill"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import LiquidData from './components/liquidData'
import GasData from './components/gasData'
import HarmfulData from './components/harmfulData'
import TempData from './components/tempData'
import { getDayTime } from '@/utils/dateutils'
import { getWellOne } from '@/api/well/well'

export default {
  name: 'DataStatics',
  components: { LiquidData, GasData, HarmfulData, TempData },
  data() {
    return {
      listQuery: {
        wellCode: '',
        deviceType: '',
        beginTime: '',
        endTime: ''
      },
      timeRange: [],
      deviceTypeList: [],
      chartShow: false, // 图表框是否显示
      cmpName: '',
      chartSample: require('../../assets/global_images/chartSample.png')// 左边图片
    }
  },
  mounted() {
    this.fetchDeviceType()
  },
  methods: {
    search() {
      // 验证井编号不能为空
      if (this.listQuery.wellCode === '') {
        this.$message.error('井编号不能为空')
        return
      }
      // 验证设备类型
      if (this.listQuery.deviceType === '') {
        this.$message.error('监测指标必选')
        return
      }
      this.fetchData()
    },
    // 获取设备类型下拉列表
    fetchDeviceType() {
      const deviceTypes = this.$store.getters.deviceTypes
      for (const device of deviceTypes) {
        if (device === '2') {
          this.deviceTypeList.push({
            name: '液位',
            value: 'liquid'
          })
        } else if (device === '3') {
          this.deviceTypeList.push({
            name: '有害气体',
            value: 'harmful'
          })
        } else if (device === '4') {
          this.deviceTypeList.push({
            name: '燃气',
            value: 'gas'
          })
        } else if (device === '5') {
          this.deviceTypeList.push({
            name: '温湿度',
            value: 'temp'
          })
        }
      }
    },
    fetchData() {
      // 首先判断闸井编号是否存在
      const params = {
        wellCode: this.listQuery.wellCode
      }
      const that = this
      getWellOne(params).then(response => {
        if (response.data.hasWell) {
          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]
          }
          that.listQuery.beginTime = this.timeRange[0]
          that.listQuery.endTime = this.timeRange[1]
          if (that.checkDate(that.listQuery.beginTime, that.listQuery.endTime, 366)) { // 检查查询范围是否允许
            if (that.listQuery.deviceType === 'liquid') {
              that.cmpName = 'liquid-data'
            } else if (that.listQuery.deviceType === 'gas') {
              that.cmpName = 'gas-data'
            } else if (that.listQuery.deviceType === 'harmful') {
              that.cmpName = 'harmful-data'
            } else if (that.listQuery.deviceType === 'temp') {
              that.cmpName = 'temp-data'
            }
            that.chartShow = true
            setTimeout(() => {
              that.$refs.chart.fetchData(that.listQuery)
            }, 100)
          } else {
            that.$message.warning('查询跨度不能超过一年')
          }
        } else {
          that.$message.warning('井不存在，请确认井编号无误')
          that.chartShow = false
        }
      })
    },
    // 检查两个日期的差是不是在某个范围内，是则返回true，否则返回false
    checkDate(date1, date2, maxDays) {
      const sdate = new Date(date1)
      const now = new Date(date2)
      const days = now.getTime() - sdate.getTime()
      const day = Math.floor(days / (1000 * 60 * 60 * 24) * 100) / 100
      if (day > maxDays) {
        return false
      } else {
        return true
      }
    },
    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%
      }
    }
    .introduce{
      color:dimgrey;
      margin: 0px 20px;
      .el-image{
        margin: 30px 10px;
      }
    }
  }
</style>
