<!-- 河道水情监测 -->
<template>
  <div class="rainfall-page slider-right">
    <TopBackTitle :showBackBtn="false" />

    <div class="slider-right-body" ref="tableBoxRef">
      <div class="pb-16" ref="topBoxRef">
        <div class="flex items-center flex-wrap">
          <span>时间范围：</span>
          <el-date-picker
            :clearable="false"
            v-model="dateTimeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button class="!ml-10" type="success" @click="handleSearch"
            >搜索</el-button
          >
          <el-button class="ml-10" @click="resetSearch">重置</el-button>
        </div>
      </div>
      <el-table :height="tableHeight" :data="tableData" border>
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="stcd" align="center" label="测站编码" />
        <el-table-column prop="tm" align="center" label="时间" />
        <el-table-column prop="z" align="center" label="水位" />
        <el-table-column prop="q" align="center" label="流量" />
        <el-table-column prop="xsa" align="center" label="断面过水面积" />
        <el-table-column prop="xsavv" align="center" label="断面平均流速" />
        <el-table-column prop="xsmxv" align="center" label="断面最大流速" />
        <el-table-column prop="flwchrcd" align="center" label="喝水特征码" />
        <el-table-column prop="wptn" align="center" label="水势" />
        <el-table-column prop="collTime" align="center" label="采集时间" />
      </el-table>
      <el-pagination
        background
        class="pagination"
        style="margin-top: 16px; margin-right: 16px; float: right"
        :current-page="pageData.pageNum"
        :page-sizes="pageData.pageSizes"
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageData.total"
        @size-change="(e) => handlePageSizeChange(e)"
        @current-change="(e) => handleCurrentPageChange(e)"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";

import TopBackTitle from "@/components/TopBackTitle/index.vue";
import { calcTableHeight } from "@/mixins/calcTableHeight";

import { getMonitorData } from "@/api/monitorDataPreview";

export default {
  components: {
    TopBackTitle,
  },
  mixins: [calcTableHeight],
  data() {
    return {
      tableData: [], // 检查列表
      dateTimeRange: [
        dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().format("YYYY-MM-DD HH:mm:ss"),
      ],
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0, // 总数量
      },
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    handleCurrentPageChange(page) {
      this.pageData.pageNum = page;
      this.getTableData();
    },
    handlePageSizeChange(pageSize) {
      this.pageData.pageSize = pageSize;
      this.getTableData();
    },
    handleSearch() {
      this.tableData = [];
      this.getTableData();
    },
    resetSearch() {
      this.dateTimeRange = [
        dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().format("YYYY-MM-DD HH:mm:ss"),
      ];
      this.tableData = [];
      this.pageData.pageNum = 1;
      this.getTableData();
    },
    // 获取列表数据
    getTableData() {
      getMonitorData({
        startTime: this.dateTimeRange[0],
        endTime: this.dateTimeRange[1],
        monitorType: "MS_HDM_RIVER",
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
      }).then((res) => {
        if (res) {
          this.tableData = res.records;
          this.pageData.total = res.total;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.rainfall-page {
}
</style>
