<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-input
          v-model="equipname"
          clearable
          size="small"
          placeholder="测点名称"
          style="width: 200px"
          class="filter-item"
        />
        <date-range-picker v-model="datarealtime" class="date-item" />
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          class="filter-item"
          size="mini"
          type="warning"
          icon="el-icon-refresh-left"
          @click="clearSearch"
          >重置</el-button
        >
      </div>
    </div>

    <!--表格-->
    <el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
      <el-table-column
        :show-overflow-tooltip="true"
        prop="equipno"
        label="站点编号"
        width="130px"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="equipname"
        label="测站名称"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="online"
        label="设备状态"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="datarealtime"
        label="监测时间"
        align="center"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="page"
      :page-size.sync="size"
      :total="totalElement"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import API from "@/api/newResource/machine.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'

export default {
  name: "newResourceDisplaceMachine", // 本页面名
  data() {
    return {
      equipname: '',
      datarealtime: '',
      loading: false,
      tableData: [],
      // 总的个数
      totalElement: 0,
      // 当前页的条数
      size: 10,
      // 当前页码
      page: 1,
    };
  },
  components: { DateRangePicker },
  mounted() {
    this.search()
  },
  methods: {
    getData() {
      this.loading = true;
      API.getDataList({
        page: this.page,
        size: this.size,
        datarealtime: this.datarealtime && this.datarealtime.join(',') || '',
        equipname: this.equipname,
        deviceType: '3'

      })
        .then((response) => {
          this.loading = false;
          this.tableData = response.body.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },
     // 模糊搜索
     search() {
      this.getData();
    },
    clearSearch() {
      this.equipname = ''
      this.datarealtime =  ''
      this.size = 10;
      this.page = 0;
      this.getData();
    },
    // 当前页的条数变化
    handleSizeChange(val) {
      this.size = val;
      this.getData();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
   
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
