<!-- 管理员-首页 -->
<template>
  <NavBar title="首页" />
  <div class="home">
    <!-- 设备监控 -->
    <div class="equipment-monitor">
      <p class="title">设备监控</p>
      <div class="contain">
        <div class="box" v-for="(item, index) in menus" :key="item.id" @click="goDetail(item.type)">
          <span :class="`${menus[index].id}`">{{ item.value }}</span>
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="button-area">
      <t-button theme="primary" @click="changePage('/equipment')">
        <QrcodeIcon style="margin-right: 8px" />
        <span>设备管理</span>
      </t-button>
      <t-button theme="danger" @click="changePage('/alarm')">
        <NotificationIcon style="margin-right: 8px" />
        <span>报警管理</span>
      </t-button>
    </div>

    <!-- 监测点位 -->
    <div class="monitor-pt">
      <div class="title">
        <span class="title-text">监测点位</span>
        <span class="more" @click="changePage('/equipment')"
          >查看更多<ChevronRightDoubleSIcon size="28"
        /></span>
      </div>
      <EquipmentList :equipmentList="list" :showPartList="true" @checkEquipmentDetail="checkEquipmentDetail"/>
    </div>
  </div>
  <t-back-top v-show="backTopVisible" text="顶部" theme="round" />
</template>
<script lang="ts" name="Home" setup>
import {
  ChevronRightDoubleSIcon,
  NotificationIcon,
  QrcodeIcon,
} from "tdesign-icons-vue-next";
import { useRouter } from "vue-router";
import NavBar from "../../../components/navBar/navBar.vue";
import EquipmentList from "../home/components/equipmentList.vue";
import { IEquipmentList } from "./components/equipmentList-interface";
import { getEquipmentCount, getEquipmentList } from '../../../api/home'
const menus = ref([
  {
    id: "total",
    name: "总设备",
    value: "0",
    type:"",
  },
  {
    id: "online",
    name: "在线设备",
    value: "0",
    type: "0",
  },
  {
    id: "alarm",
    name: "报警设备",
    value: "0",
    type: "1",
  },
  {
    id: "offline",
    name: "离线设备",
    value: "0",
    type: "2",
  },
]);
const $router = useRouter(); // 路由实例
const list = ref<IEquipmentList[]>([]); // 设备列表
const backTopVisible = ref(false); // 回到顶部显隐
// 点击设备管理
const changePage = (path: string) => {
  console.log($router);

  $router.push({ path: path });
};
// 点击不同类型设备跳转到设备列表页
const goDetail = (value: string) => {
   $router.push({
    path:'/equipment',
    query:{
      // 当前设备状态
      value,
      // 是否传参标识
      flag:'true'
    }
   })
}
// 监听页面滚动
window.onscroll = function () {
  if (window.scrollY > 200) {
    //scrollY距离顶部的距离
    backTopVisible.value = true;
  } else {
    backTopVisible.value = false;
  }
};

// 获取设备统计
const fetchEquipmentCount = () => {
  getEquipmentCount().then((res) => {
    console.log(res);
    menus.value[0].value = res.data.devCount // 总
    menus.value[1].value = res.data.onCount // 在线
    menus.value[2].value = res.data.alarmCount // 报警
    menus.value[3].value = res.data.offCount // 离线
  })
}

// 获取设备列表
const fetchEquipmentList = () => {
  const params = {
    pageNo: 1,
    pageSize: 5,
    shop: ''
  }
  getEquipmentList(params).then((res) => {
    list.value = res.data.records
  })
}

// 查看设备详情
const checkEquipmentDetail = (item: IEquipmentList) => {
  $router.push({ path: '/detail', query:  {...item }});
}

onMounted(() => {
  fetchEquipmentCount() // 获取设备统计
  fetchEquipmentList() // 获取设备列表
});
</script>
<style lang="scss" scoped>
@import "../../../assets/style/variables.scss";

.home {
  width: 100%;
  padding: 60px 10px 20px 10px;
  box-sizing: border-box;
  .equipment-monitor {
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    .title {
      font-size: 22px;
      font-weight: 600;
      margin: 10px 0;
      text-align: center;
      margin-bottom: 20px;
    }
    .contain {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .box {
        width: 50%;
        display: flex;
        flex-direction: column;
        font-size: 32px;
        margin: 10px 0;
        align-items: center;
        .name {
          font-size: 16px;
          margin-top: 8px;
        }
        .total {
          color: #101010;
        }
        .online {
          color: #1ca951;
        }
        .alarm {
          color: #d54941;
        }
        .offline {
          color: #6c6c6c;
        }
      }
    }
  }
  .button-area {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
  }

  .monitor-pt {
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-text {
        font-size: 22px;
        font-weight: 600;
        margin: 10px 0;
        text-align: center;
      }
      .more {
        font-size: 18px;
        font-weight: 600;
        color: $theme-color;
      }
    }
  }
}
</style>