<!-- 用户-检测页面-报警 -->
<template>
  <NavBar title="燃气卫士" />
  <div class="container" :style="`height:${height + 60}px`">
    <img class="img-alarm" src="../../../assets//images/radar-alarm.png" :width="`${width * 0.65}`"
      :height="`${height * 0.4}`" />
    <div class="content">
      <p class="title1">燃气监测中...</p>
      <p class="title2">燃气浓度超标,请注意</p>
    </div>
  </div>
  <div class="btn-container">
    <t-button class="btn" size="large" @click="logs">
      <icon class="icon" name="root-list" color="#70A2F1" />
      日志
    </t-button>
  </div>
  <t-dialog v-model:visible="isShowDialog" content="检测到燃气浓度超标，请及时处理" confirm-btn="关闭" :close-on-overlay-click="false">
    <template #top>
      <img class="img" src="../../../assets/images/alarm-dialog.png" />
    </template>
  </t-dialog>
  <!-- <t-back-top v-show="backTopVisible" text="顶部" theme="round" /> -->
</template>
<script lang="ts" name="Home" setup>
import { useRouter } from "vue-router";
import NavBar from "../../../components/navBar/navBar.vue";
import { Icon } from 'tdesign-icons-vue-next';
const $router = useRouter(); // 路由实例
const $route = useRoute()
const backTopVisible = ref(false); // 回到顶部显隐
const isShowDialog = ref(true)
// 监听页面滚动
window.onscroll = function () {
  if (window.scrollY > 200) {
    //scrollY距离顶部的距离
    backTopVisible.value = true;
  } else {
    backTopVisible.value = false;
  }
};
// 页面宽高
const height = ref(document.body.clientHeight - 60)
const width = ref(document.body.clientWidth)
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 60
  const bodyWidth = document.body.clientWidth
  height.value = bodyHeight
  width.value = bodyWidth
})
const logs = () => {
  $router.push({
    path: '/logs',
    query: {
      devCode: $route.query.devCode
    }
  })
}
</script>
<style lang="scss" scoped>
.img {
  width: 100%;
}

.btn-container {
  position: absolute;
  bottom: 20px;
  display: flex;
  width: 100%;
  background: linear-gradient();

  .btn {
    width: 90%;
    margin: 0 auto;
  }
}

.container {
  background-image: linear-gradient(to bottom, #F57D6B, #FCDBD6);

  .img-alarm {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
  }

  .content {
    position: absolute;
    top: 60%;
    color: #fff;
    text-align: center;
    width: 100%;

    .title1 {
      font-size: 22px;
      font-weight: 700;
    }

    .title2 {
      margin-top: 20px;
      font-size: 18px;
    }
  }
}
</style>