<template>
  <div class="content">
    <!-- 头部 -->
    <div class="content-top">
      <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small">
        <el-form-item label="排水分区：">
          <el-input v-model="form.partitionName" placeholder="输入排水分区名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="监测分组：">
          <el-input v-model="form.groupByName" placeholder="输入监测分组名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="监测点：">
          <el-input v-model="form.siteName" placeholder="输入监测站点名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="站点状态：">
          <el-radio-group v-model="siteState">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">报警</el-radio>
            <el-radio :label="3">离线</el-radio>
            <el-radio :label="4">维护</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content-body">
      <el-table :data="tableData" stripe height="100%"
                :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="" />
          <p style="margin-top: -7px">暂无数据</p>
        </template>
        <el-table-column prop="date" label="序号" width="50" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" @click="openCurve(row)">监测曲线</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="partitionName" label="排水分区" show-overflow-tooltip width="150" align="center"></el-table-column>
        <el-table-column prop="groupByName" label="监测分组" show-overflow-tooltip width="150" align="center"></el-table-column>
        <el-table-column prop="deviceTypeName" label="监测设备类型" show-overflow-tooltip width="150" align="center"></el-table-column>
        <el-table-column prop="siteName" label="监测点名称" show-overflow-tooltip width="150" align="center"></el-table-column>
        <el-table-column prop="siteState" label="站点状态" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{['正常','报警','离线','维护中'][row.siteState-1]}}</template>
        </el-table-column>
        <el-table-column label="距离当前时间间隔(分钟)" show-overflow-tooltip width="180" align="center">
          <template slot-scope="{row}">{{getIntervalMinutes(row.collectionDate)}}</template>
        </el-table-column>
        <el-table-column prop="collectionDate" label="最近一次数据采集时间" show-overflow-tooltip width="180" align="center"></el-table-column>
        <el-table-column prop="temperature" label="温度(℃)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.temperature?row.temperature:"/"}}</template>
        </el-table-column>
        <el-table-column prop="turb" label="浊度(NTU)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.turb?row.turb:"/"}}</template>
        </el-table-column>
        <el-table-column prop="cod" label="化学需氧量(mg/L)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.cod?row.cod:"/"}}</template>
        </el-table-column>
        <el-table-column prop="ec" label="电导率(uS/cm)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.ec?row.ec:"/"}}</template>
        </el-table-column>
        <el-table-column prop="chl" label="叶绿素光谱指数" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.chl?row.chl:"/"}}</template>
        </el-table-column>
        <el-table-column prop="doxygen" label="溶解氧(mg/L)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.doxygen?row.doxygen:"/"}}</template>
        </el-table-column>
        <el-table-column prop="address" label="总有机碳(mg/L)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.address?row.address:"/"}}</template>
        </el-table-column>
        <el-table-column prop="codmn" label="高猛酸盐指数" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.codmn?row.codmn:"/"}}</template>
        </el-table-column>
        <el-table-column prop="tss" label="悬浮物(mg/L)" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.tss?row.tss:"/"}}</template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="content-footer">
      <span style="margin-left:10px;color: #323b41;font-size: 14px;">共 {{tableData.length}} 条</span>
    </div>
    <historyCurve ref="historyCurve"></historyCurve>
  </div>
</template>

<script>
import { getPGBSiteData } from '@/views/spectrum/dynamicMonitor/api/api'

import historyCurve from "@/views/spectrum/common/historyCurve/index"
export default {
  components: {
    historyCurve
  },
  data() {
    return {
      form: {},
      siteState: 0,
      tableData: [],
      interVal: null,
      historyCurveVisible: false
    }
  },
  mounted() {
    this.getPGBSiteData()
    this.interVal = setInterval(() => {
      this.getPGBSiteData()
    }, 60000);
  },
  destroyed() {
    if (this.interVal) clearInterval(this.interVal)
  },
  methods: {
    getPGBSiteData() {
      getPGBSiteData({ projectId: this.$store.state.project.project.id }).then(res => {
        this.tableData = res.result
      })
    },
    /**
     * 计算间隔分钟数
     */
    getIntervalMinutes(time) {
      if (!time) return '/'
      return ((new Date() - new Date(time)) / (1000 * 60)).toFixed(0)
    },
    /**
     * 查询
     */
    query() {
      getPGBSiteData({ projectId: this.$store.state.project.project.id }).then(res => {
        const data = JSON.parse(JSON.stringify(res.result))
        // 对结果进行按搜索条件过滤
        this.tableData = data.filter(item => {
          const filterData = Object.keys(this.form).every(key => {
            return item[key] ? item[key].search(this.form[key]) != -1 : ''.search(this.form[key]) != -1
          })
          if (this.siteState != 0) {
            return filterData && item.siteState == this.siteState
          } else {
            return filterData
          }
        })
      })
    },
    /**
     * 重置
     */
    reset() {
      this.form = {}
      this.siteState = 0
      this.getPGBSiteData()
    },
    /**
     * 打开历史曲线
     */
    openCurve(data) {
      this.$refs.historyCurve.show(data.siteId)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .content-top {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    .el-form {
      >>> .el-form-item {
        margin-bottom: 0 !important;
        vertical-align: sub !important;
      }
    }
  }
  .content-body {
    width: 100%;
    height: calc(100% - 100px);
    box-sizing: border-box;
    padding-bottom: 5px;
    .el-table {
      >>> th > .cell {
        white-space: pre-line;
      }
      >>> .el-table__body {
        td.el-table__cell {
          height: 48px;
        }
      }
    }
  }
  .content-footer {
    width: 100%;
    height: 30px;
    line-height: 30px;
    // background-color: #0bbdd4;
  }
}
</style>