<!-- 用户-我的设备 -->
<template>
  <NavBar title="我的设备" />
  <div class="container" v-if="deviceList.length">
    <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-empty v-else style="margin-top: 60px;" :icon="userIcon" description="暂无设备" />
  <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, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
const $router = useRouter(); // 路由实例
const $route = useRoute()
const userIcon = () => h(InfoCircleFilledIcon);
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
  let code = $route.query.code
  console.log(code, 'code')
  if (!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-around;
  flex-wrap: wrap;

  .device {
    margin-top: 10px;
    padding: 18px;
    background-color: #fff;
    border-radius: 10px;
    width: 36%;
    position: relative;

    .title {
      font-size: 16px;
      font-weight: 700;
      margin: 10px 0;
      // overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      // white-space: wrap;
      word-wrap: break-word;
      word-break: normal;
    }

    .status {
      font-size: 16px;
    }

    .icon {
      position: absolute;
      top: 10px;
      right: 20px;
      color: #ccc;
      width: 24px;
      height: 24px;
    }
  }
}
</style>