<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.deviceName" placeholder="输入设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备类型：">
          <el-select v-model="form.deviceType" placeholder="选择设备类型" clearable>
            <el-option v-for="item in devicetypes" :key="item.value" :label="item.deviceTypeName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集时间：">
          <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="站点状态：">
          <el-checkbox v-model="checked">显示有效数据</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
          <el-button type="primary" @click="checkdataToVoid()">作废</el-button>
          <el-button type="primary">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content-body">
      <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick"
                :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 type="selection" align="center"></el-table-column>
        <el-table-column prop="date" label="序号" width="50" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</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="collectionDate" label="采集数据时间" show-overflow-tooltip width="150" align="center"></el-table-column>
        <el-table-column prop="isWarning" label="是否存在报警" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">
            <span :style="{color:row.isWarning=='是'?'red':'#606266'}">{{row.isWarning}}</span>
          </template>
        </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-column prop="isvalidName" label="是否有效" show-overflow-tooltip width="150" align="center">
          <template slot-scope="{row}">{{row.isvalidName?row.isvalidName:"/"}}</template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="content-footer">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
                     :page-sizes="[10, 25, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDevicecheckdataList, getDevicetypep, checkdataToVoid } from '@/views/spectrum/dynamicMonitor/api/api'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      form: {
        date: this.getSevenDate()
      },
      checked: true,
      devicetypes: [],
      tableData: [],
      interVal: null,
      pagination: { current: 1, size: 100, total: 0 }
    }
  },
  mounted() {
    this.getSevenDate()
    this.getDevicetypep()
    this.getDevicecheckdataList()
  },
  destroyed() {
    if (this.interVal) clearInterval(this.interVal)
  },
  methods: {
    /**
     * 获取设备类型
     */
    getDevicetypep() {
      getDevicetypep({ current: 1, size: 1000, projectId: this.$store.state.project.project.id }).then(res => {
        if (res.code == 1) {
          this.devicetypes = res.result.records
        }
      })
    },
    getDevicecheckdataList() {
      let params = JSON.parse(JSON.stringify(this.pagination))
      if (this.form.deviceName) params['deviceName'] = this.form.deviceName
      if (this.form.deviceType) params['deviceType'] = this.form.deviceType
      params['isValid'] = this.checked ? 0 : 1
      params['isOther'] = true
      params['beginTime'] = this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00')
      params['endTime'] = this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
      getDevicecheckdataList(params).then(res => {
        if (res.code && res.code == 1) {
          this.tableData = res.result.records
          this.pagination.total = res.result.total
        }
      })
    },
    /**
     * 查询
     */
    query() {
      this.pagination.current = 1
      this.pagination.size = 100
      this.getDevicecheckdataList()
    },
    /**
     * 重置
     */
    reset() {
      this.form = { date: this.getSevenDate() }
      this.checked = true
      this.pagination.current = 1
      this.pagination.size = 100
      this.getDevicecheckdataList()
    },
    /**
     * 作废
     */
    checkdataToVoid() {
      let selection = this.$refs.dTable.selection;
      console.log('输出：selection', selection)
      if (selection.length > 0) {
        this.$confirm('确认是否作废选中的监测数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = selection.map(item => { return item.id })
          checkdataToVoid({ ids: ids.join(',') }).then(res => {
            if(res.code&&res.code==1){
              this.$message.success("数据作废成功")
              // 重新渲染数据
              this.getDevicecheckdataList()
            }
          })
        }).catch(() => { });
      } else {
        this.$message.info("未选择任何数据！")
      }
    },
    /**
     * 获取近7天时间区间
     */
    getSevenDate() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [
        this.$moment(start).format('YYYY-MM-DD 00:00:00'),
        this.$moment(end).format('YYYY-MM-DD 23:59:59')
      ]
    },
    /**
     * 双击行
     */
    rowDbclick(row, column, event){
      
    },
    handleSizeChange(size) {
      this.pagination.size = size
      this.getDevicecheckdataList()
    },
    handleCurrentChange(current) {
      this.pagination.current = current
      this.getDevicecheckdataList()
    }
  }
}
</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: 35px;
    line-height: 35px;
  }
}
</style>