<!-- 管理员-报警管理 -->
<template>
  <NavBar title="报警管理" />
  <div class="alarm">
    <t-cell title="开始日期" :note="begTimeText || '请选择 >'" @click="openStartPopup" />
    <t-popup v-model="startDateVisible" placement="bottom">
      <t-date-time-picker
        :value="begTime"
        :mode="['date']"
        title="开始日期"
        cancelBtn="清除"
        format="YYYY-MM-DD HH:mm:ss"
        :end="new Date().toLocaleDateString()"
        @confirm="onConfirmStartDate"
        @cancel="startCancel"
        @change="changeTime"
      />
    </t-popup>
    <t-cell title="结束日期" :note="endTimeText || '请选择 >'" @click="openEndPopup" />
    <t-popup v-model="endDateVisible" placement="bottom">
      <t-date-time-picker
        :value="endTime"
        :mode="['date']"
        title="结束日期"
        cancelBtn="清除"
        format="YYYY-MM-DD HH:mm:ss"
        :end="new Date().toLocaleDateString()"
        @confirm="onConfirmEndDate"
        @cancel="endCancel"
        @change="changeTime"
      />
    </t-popup>

    <div class="card">
      <AlarmList :alarmList="list"/>
      <t-loading theme="dots" size="40px" layout="vertical" :loading="showLoading" />
      <t-loading size="40px" layout="vertical" :indicator="false" text="没有更多啦" :loading="!showLoading" />
    </div>
  </div>
  
  <t-loading theme="dots" size="40px" layout="vertical" :loading="false" />
  <t-back-top v-show="backTopVisible" text="顶部" theme="round" />
</template>
<script lang="ts" name="Equipment" setup>
import NavBar from "../../../components/navBar/navBar.vue";
import { IAlarmList } from "./alarm-interface";
import AlarmList from "./components/alarmList.vue";
import { getAlarmList } from '../../../api/alarm'
const list = ref<IAlarmList[]>([]);
const backTopVisible = ref(false); // 回到顶部显隐
const begTime = ref(''); // 选择的日期text开始
const begTimeText = ref(''); // 选择的日期text开始
const endTime = ref(''); // 选择的日期text结束
const endTimeText = ref(''); // 选择的日期text结束
const startDateVisible = ref(false) // 开始日期弹出框显隐
const endDateVisible = ref(false) // 结束日期弹出框显隐
const total = ref() // 数据总数
const showLoading = ref(true) // 是否显示加载中
const listQuery = ref({
  devCode: '', // 设备编号
  // 请求参数
  begTime: '', // 开始时间
  endTime: '', // 结束时间
  pageSize: 10,
  pageNo: 1,
});
// ----------------------------------------操作时间选择器-----------------------------------------

// 开始时间确定选择状态
const onConfirmStartDate = (val: string) => {
  listQuery.value.begTime = val  
  begTimeText.value = val
  startDateVisible.value = false;
};
// 结束时间确定选择状态
const onConfirmEndDate = (val: string) => {
  listQuery.value.endTime = val  
  endTimeText.value = val
  endDateVisible.value = false;
};
// 打开开始时间popup
const openStartPopup = () => {
  endDateVisible.value = false;
  startDateVisible.value = true
}
// 打开结束时间popup
const openEndPopup = () => {
  startDateVisible.value = false;
  endDateVisible.value = true
}

// 点击取消
const startCancel = () => {
  console.log('取消');
  
  listQuery.value.begTime = ''  
  begTimeText.value = ''
  startDateVisible.value = false // 关闭弹窗
}
const endCancel = () => {
  listQuery.value.endTime = ''  
  endTimeText.value = ''
  endDateVisible.value = false // 关闭弹窗
}

// 值改变时触发
const changeTime = () => {
  if(listQuery.value.begTime && listQuery.value.endTime) {
    fetchAlarmList()
  }
}

// ---------------------------------------------------------------------------------------------

// 监听页面滚动
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) {
    onBottom()
  }
};

function onBottom() { // 触底加载
  if ((listQuery.value.pageNo * listQuery.value.pageSize) < total.value) {
    showLoading.value = true
    listQuery.value.pageNo++
    fetchAlarmList(true)
  } 
}

// 获取报警列表
const fetchAlarmList = (isNowPage = false) => {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.pageNo = 1
  }
  listQuery.value.begTime = listQuery.value.begTime.replace(/\//g, '-')
  listQuery.value.endTime = listQuery.value.endTime.replace(/\//g, '-')
  getAlarmList(listQuery.value).then((res) => {
    if(isNowPage) {
      list.value = list.value.concat(res.data.records)
    } else {
      list.value = res.data.records
    }
    showLoading.value = false
    total.value = res.data.total
  })
}
// ------------------------------------------------------------------------------------------

onMounted(() => {
  begTime.value = new Date().toLocaleDateString().replace(/\//g, '-'); // 打开popup默认的日期
  endTime.value = new Date().toLocaleDateString().replace(/\//g, '-'); // 打开popup默认的日期
  fetchAlarmList()
});
</script>
<style lang="scss" scoped>
@import "../../../assets/style/variables.scss";

.alarm {
  width: 100%;
  height: 100%;
  padding: 60px 0;
  box-sizing: border-box;
}
</style>
<style lang="scss">
.alarm {
  .t-cell--middle {
    // border-radius: 20px;
    border-bottom: 1px solid #ccc;
  }
  .t-cell__title, .t-cell__note {
    font-size: 24px;
  }
}

</style>