<!-- 管理员-报警管理 -->
<template>
  <NavBar title="报警管理" />
  <div class="alarm">
    <div class="search">
      <!-- <t-cell title="开始日期" :note="begTimeText || '请选择 >'" @click="openStartPopup" /> -->
      <div class="time" @click="openStartPopup">{{ listQuery.begTime ? listQuery.begTime : '开始时间' }}</div>
      <t-popup v-model="startDateVisible" placement="bottom">
        <t-date-time-picker :value="begTime" :mode="['date']" title="开始日期" cancelBtn="清除" format="YYYY-MM-DD"
          :end="new Date().toLocaleDateString()" @confirm="onConfirmStartDate" @cancel="startCancel"
          @change="changeTime" />
      </t-popup>
      <div class="between">至</div>
      <!-- <t-cell title="结束日期" :note="endTimeText || '请选择 >'" @click="openEndPopup" /> -->
      <div class="time" @click="openEndPopup">{{ listQuery.endTime ? listQuery.endTime : '结束时间' }}</div>
      <t-popup v-model="endDateVisible" placement="bottom">
        <t-date-time-picker :value="endTime" :mode="['date']" title="结束日期" cancelBtn="清除" format="YYYY-MM-DD"
          :end="new Date().toLocaleDateString()" @confirm="onConfirmEndDate" @cancel="endCancel" @change="changeTime" />
      </t-popup>
      <div class="between" @click="search">筛选</div>
    </div>
    <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 = () => {
  // if (!isNowPage) {
  //   // 是否显示当前页，否则跳转第一页
  //   listQuery.value.pageNo = 1
  // }
  // listQuery.value.begTime = listQuery.value.begTime.replace(/\//g, '-')
  // listQuery.value.endTime = listQuery.value.endTime.replace(/\//g, '-')
  const data = {
    ...listQuery.value,
    begTime: listQuery.value.begTime ? `${listQuery.value.begTime} 00:00:00` : '',
    endTime: listQuery.value.endTime ? `${listQuery.value.endTime} 23:59:59` : '',
  }
  getAlarmList(data).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
  })
}
// ------------------------------------------------------------------------------------------
const search = () => {
  listQuery.value.pageNo = 1
  list.value = []
  fetchAlarmList()
}
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;
  }

  .search {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .time {
      border: 1px solid #ccc;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      width: 40%;
      height: 40px;
      line-height: 40px;
      // float: left;
    }

    .between {
      font-size: 16px;
      height: 40px;
      line-height: 40px;
    }
  }

}
</style>