<!-- 用户-检测页面-报警 -->
<template>
    <NavBar title="燃气卫视" />
    <div class="container" :style="`height:${height}px`">
        <img class="img-alarm" src="../../../assets//images/radar-alarm.png" width="300" height="300"/>
        <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 height = document.body.offsetHeight
  const isShowDialog = ref(true)
  // 监听页面滚动
  window.onscroll = function () {
    if (window.scrollY > 200) {
      //scrollY距离顶部的距离
      backTopVisible.value = true;
    } else {
      backTopVisible.value = false;
    }
  };
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>