<!-- 用户-我的设备 -->
<template>
    <NavBar title="我的设备" />
    <div class="container">
        <div class="device" v-for="item,index in deviceList" ::key="item" @click="detail(item)">
          <img class="img" src="../../../assets/images/device.png" width="80" height="100">
          <p class="title">可燃气体探测器{{ index +1 }}</p>
          <p class="title" style="font-size: 14px;">{{ item.devCode }}</p>
          <p class="status" :style="`color:${item.status === '报警' ? 'F5193E': ''}`">{{ item.status }}</p>
          <icon v-if="item.status === '离线'" class="icon" name="link-unlink" />
        </div>
    </div>
    <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 { getUserPhone, getUserDevice } from '../../../api/user'
  import { Icon } from 'tdesign-icons-vue-next';
  const $router = useRouter(); // 路由实例
  const $route = useRoute()
  const backTopVisible = ref(false); // 回到顶部显隐
  // 用户手机号
  const phone = ref('')
  phone.value = sessionStorage.getItem('gas-user-phone') ? sessionStorage.getItem('gas-user-phone') as string : ''
  // 监听页面滚动
  window.onscroll = function () {
    if (window.scrollY > 200) {
      //scrollY距离顶部的距离
      backTopVisible.value = true;
    } else {
      backTopVisible.value = false;
    }
  };
  
  
// 查看设备详情
const detail = (item: any) => {
    $router.push({
        path: item.status === '报警' ? '/monitor-alarm' : '/monitor',
        query:{
          devCode: item.devCode
        }
    })
}
// 获取用户设备列表
const deviceList = ref()
const getDevice = () => {
  getUserDevice({
    phone:phone.value,
    // phone: '13879798637',
    pageNo:1,
    size:1000,
  }).then(res => {
    deviceList.value = res.data.records
  })
}
// 获取用户手机号
const getPhone = () => {
  // 获取code
  const code = $route.query.code
  console.log(code, 'code')
  getUserPhone({code,isAdmin:false}).then(res => {
    phone.value = res.data
    console.log(res.data, '用户手机号')
    sessionStorage.setItem('gas-user-phone', phone.value)
    // 获取设备列表
    getDevice()
  })
}
  onMounted(() => {
    if(phone.value) {
    //  获取设备列表
    getDevice()
    }
    else {
       // 获取用户手机号并且获取设备列表
        getPhone()
    }
  });
  </script>
  <style lang="scss" scoped>
  .container{
    padding: 20px;
    padding-top:58px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .device{
        margin-top: 10px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        width: 38%;
        position: relative;
        .title {
            font-size: 18px;
            font-weight: 700;
            margin: 10px 0;
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .status {
            font-size: 18px;
        }
        .icon{
            position: absolute;
            top:10px;
            right: 20px;
            color: #ccc;
            width: 24px;
            height: 24px;
        }
    }
  }
  </style>