<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      class="onestyle"
    >
      <el-form-item label="设备" prop="equipno" class="twostyle">
        <el-select
          v-model="queryParams.equipmentName"
          clearable
          placeholder="请选择设备"
        >
          <el-option
            v-for="item in selectList"
            :key="item.equipmentName"
            :label="item.equipmentName"
            :value="item.equipmentName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围" prop="time" style="margin-left: 30px;margin-top: 16px;">
		 <el-date-picker
		   :default-time="['00:00:00', '23:59:59']"
		    style="width: 380px !important;"
		    v-model="searchTime"
		    type="datetimerange"
		    range-separator="至"
		    start-placeholder="开始日期"
		    end-placeholder="结束日期"
		    clearable
		  />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="toSearch"
		  style="height:35px;margin-left: 20px;margin-top: 15px;"
          >搜索</el-button
        >
		<el-button
		  type="warning"
		  plain
		  icon="el-icon-download"
		  size="mini"
		  @click="handleExport"
		style="height:35px;margin-left: 20px;"
		  >导出</el-button
		>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="threestyle">
      <el-col :span="1.5">
		  <div></div>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="allData"
      ></right-toolbar>
    </el-row>
    <el-table :data="dmList" height="485" >
      <el-table-column label="序号" align="center" prop="id" width="60" type="index"/>
      <el-table-column label="设备编号" align="center" prop="equipmentNo" />
      <el-table-column label="设备名称" align="center" prop="equipmentName" />
      <el-table-column label="设备读数(m³)" align="center" prop="value" />
	  <el-table-column label="日用水量(m³)" align="center" prop="waterfall" />
      <el-table-column label="监测时间" align="center" prop="time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.time)}}</span>
        </template>
      </el-table-column>
    </el-table>
   <el-pagination
      style="margin-top: 20px;"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
	  @pagination="allData"
    />
  </div>
</template>

<script>
import { tableList,getList } from "@/api/historyData/waterMeter";
import { parseTime } from "../../utils/index.js";
export default {
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 内部位移数据表格数据
      dmList: [],
	  selectList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: null,
      },
	  searchTime:"",
    };
  },
  created() {

  },
  mounted(){ 
	  this.allData();
	  getList().then(function(res){
	  	var body = res.data;
		this.selectList = body;
	  }.bind(this));
		
  },
  methods: {
	  allData() {
	  	var param ={
			pageNum:1,
			pageSize: 10
		}
	  	tableList(param).then((res) => {
	  	   var body = res.rows || [];
		   this.dmList = body;
		   this.total = res.total;
	  	});
	  },
	  //获取全部信息管理分页
	  handleSizeChange(val) {
	  // 每页多少条
	  this.queryParams.pageSize =val ;
	  console.log(this.queryParams.pageSize,"this.queryParams.pageSize")
	  this.toSearch()
	  },
	  handleCurrentChange(val) {
	  // 当前是多少页
	   this.queryParams.pageNum = val;
	    console.log( this.queryParams.pageNum," this.queryParams.pageNum")
	  this.toSearch()
	  },
	  toSearch() {
		var param = this.queryParams;
		if (this.searchTime instanceof Array) {
		  param.startTime = parseTime(new Date(this.searchTime[0]));
		  param.endTime = parseTime(new Date(this.searchTime[1]));
		}
		tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
		});
	},
	/** 导出按钮操作 */
	handleExport() {
	  this.download(
	    "/project/waterd/export",
	    {
	      ...this.queryParams,
	    },
	    `水表历史数据.xlsx`
	  );
	},
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.onestyle{
	width: 1680px;
	height: 75px;
	background-color: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
}
.twostyle{
	margin-bottom: 0px!important;
}
.threestyle{
	margin-top: 15px;
	margin-bottom: 15px;
}
</style>
