<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>
        <!-- <div style="max-width:1920px"> -->
        <div class="timeList">
          <div
            class="timeItem"
            v-for="(item, index) in getData"
            :key="index"
            @click="goInspectDetail(item)"
          >
            {{ item.Time }}
            <!-- </div> -->
          </div>
        </div>

        <div
          style="
            position: fixed;
            bottom: 0.3rem;
            text-align: center;
            display: block;
            width: 100%;
          "
        >
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="Count"
            layout=" prev, pager, next, jumper"
            :total="TotalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import returnBack from "@/components/returnBack";
export default {
  name: "index",
  components: {
    topHeader,
    returnBack,
  },
  data() {
    return {
      StationID: "",

      // 总数据
      getData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      TotalCount: 1,
      // 默认每页显示的条数（可修改）
      Count: 5,
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },

  created() {
    this.StationID = this.$store.state.StationID;
      
  },

  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转到: ";
  },
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);
        // 初始化获取站点下拉数据
        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
          var json = {};

          json.CMD = "getPatrolRecord";
          json.StationID = this.StationID;
          (json.Start = 0), (json.Limit = 5), (json.Order = "DESC");

          this.global.sendWs(json);

          // setInterval(() => {
          //   console.log("每隔30秒请求一次getPatrolRecord");
          //   this.global.sendWs(json);
          // }, 30000);
        }

        if (redata.CMD == "getPatrolRecord") {
          this.getData = redata.RESULT.LIST;
          // 将数据的长度赋值给TotalCount
           this.TotalCount = redata.TotalCount;
          console.log("this.getData");
          console.log(this.getData);
        }
      }
    },



    goInspectDetail(item) {
      this.$router.push({
        path: "/inspectRecord",
        query: { Time: item.Time },
      });
    },

    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      console.log('开始执行handelSizeChnage函数');
      
      // 改变每页显示的条数
      this.Count = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      console.log('开始执行handleCurrentChange函数');
      console.log(val)

      var json = {};

          json.CMD = "getPatrolRecord";
          json.StationID = this.StationID;
          (json.Start = (val-1)*5), (json.Limit = 5), (json.Order = "DESC");

          this.global.sendWs(json);


      // 改变默认的页数
      this.currentPage = val;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
</style>
