<template>
  <app-container>
    <!--筛选条件-->
    <search-area size="small" @search="search">
      <search-item>
        <el-input v-model.trim="listQuery.wellCode" size="small" placeholder="点位编号" clearable />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.deviceType" size="small" placeholder="监测指标" clearable>
          <el-option
            v-for="item in deviceTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </search-item>
    </search-area>
    <!--结果展示-->
    <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="small"
            @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>
  </app-container>
</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>