<!-- 用户-日志列表 -->
<template>
    <NavBar title="日志" />
    <div class="container">
        <div class="alarm" v-for="(item, index) in alarmList" :key="index">
         <p class="time">{{ item.logtimeStr }}</p>
         <p class="status" :style="`color:${item.descn.includes('正常')  ?  '#ccc' : '#F5193E'}`">{{ item.descn }}</p>
        </div>
        <t-loading theme="dots" size="40px" layout="vertical" :loading="showLoading" />
    <t-loading size="40px" layout="vertical" :indicator="false" text="没有更多啦" :loading="!showLoading" />
    </div>
    <t-back-top v-show="backTopVisible" text="顶部" theme="round" />
  </template>
  <script lang="ts" name="Home" setup>
  import NavBar from "../../../components/navBar/navBar.vue";
  import { getDeviceLogs } from '../../../api/user'
import { useRoute } from "vue-router";
  const backTopVisible = ref(false); // 回到顶部显隐
  const $route = useRoute()
  const showLoading = ref(true)
  const listQuery = ref({
    pageNo:1,
    pageSize:20,
    devCode: $route.query.devCode
  })
  const total = ref(0)
  // 监听页面滚动
  window.onscroll = function () {
    if (window.scrollY > 200) {
      //scrollY距离顶部的距离
      backTopVisible.value = true;
    } else {
      backTopVisible.value = false;
    }
    //变量windowHeight是可视区的高度
  const windowHeight = document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  const scrollHeight = document.body.scrollHeight;
  //滚动条到底部的条件
  console.log(window.scrollY, windowHeight, scrollHeight - 60);
  
  if (Number(window.scrollY) + windowHeight >= scrollHeight - 60) {
    // showLoading.value = true
    onBottom()
  }
  };

  // 获取日志列表
const alarmList = ref<any[]>([])
const getLogsList = () => {
  showLoading.value = true
  getDeviceLogs(listQuery.value).then(res => {
    alarmList.value = alarmList.value.concat(res.data.records)
    total.value = res.data.total
    showLoading.value = false
  })
}
  function onBottom() { // 触底加载
  if ((listQuery.value.pageNo * listQuery.value.pageSize) < total.value) {
    showLoading.value = true
    listQuery.value.pageNo++
    getLogsList()
  } 
}

  onMounted(() => {
    getLogsList()
  });
  </script>
  <style lang="scss" scoped>
  .container{
    padding-top: 58px;
    background-color: #fff;
    .alarm{
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 18px;
        .time{
          width: 70%;
        }
        .status{
          width: 30%;
          text-align: right;
        }
    }
  }
  </style>