<template>
  <div :bordered="false" class="device-status-card">
    <h2 class="card-title">设备状态总览</h2>
    <!-- <div class="card-header">
      
    </div> -->
    <div class="status-grid">
      <div v-for="item in deviceStatusList" :key="item.id" class="status-item">
        <div :class="['percent', item.color]">{{ item.onlinePercent }}%</div>
        <div class="right-content">
          <div class="name">{{ item.name }}</div>
          <div class="detail">
            <span class="online">在线: {{ item.online }}</span
            ><br />
            <span class="offline">离线: {{ item.unline }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer"></div>
  </div>
</template>

<script setup lang="ts">
import {
  useMessage
} from 'naive-ui';
import { ref, onMounted, onUnmounted } from "vue";
import { getDeviceStatusInfo } from '@/api/index-dp';

const message = useMessage();

// 定义设备状态数据接口
interface DeviceStatus {
  id: string;
  name: string;
  percent: number;
  color: string;
  onlineCount: number;
  offlineCount: number;
  online: number;
  unline: number;
  onlinePercent: number;
}

// 设备状态数据列表
const deviceStatusList = ref<DeviceStatus[]>([]);

// 轮询定时器引用
let pollingTimer: number | null = null;

// 获取设备状态数据函数
const fetchDeviceStatus = async () => {
  try {
    const response = await getDeviceStatusInfo();
    if (response.data.code == 200) {
      deviceStatusList.value = response.data.data;
    } else {
      message.error(response.data.msg);
    }
  } catch (error) {
    console.error("获取设备状态数据失败:", error);
    message.error("获取设备状态数据失败");
  }
};

// 开始轮询
const startPolling = () => {
  // 先清除已存在的定时器
  if (pollingTimer) {
    clearInterval(pollingTimer);
  }
  
  // 每10秒轮询一次
  pollingTimer = window.setInterval(() => {
    fetchDeviceStatus();
  }, 10000);
};

// 停止轮询
const stopPolling = () => {
  if (pollingTimer) {
    clearInterval(pollingTimer);
    pollingTimer = null;
  }
};

// 组件挂载时获取数据并开始轮询
onMounted(() => {
  // 立即获取一次数据
  fetchDeviceStatus();
  
  // 开始轮询
  startPolling();
});

// 组件卸载时停止轮询，防止内存泄漏
onUnmounted(() => {
  stopPolling();
});
</script>

<style scoped lang="scss">
.device-status-card {
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  padding-top: 0.45rem;
  // background: var(--n-bg-color-secondary);
  background-image: url("@/assets/jinrun/module-bg.png");
  background-size: cover;
  
  .card-title {
    position: absolute;
    left: 0.25rem;
    top: -0.15rem;
    font-weight: 500;
    font-size: 0.2rem;
    color: #ffffff;
    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
  }
  
  .card-header {
    position: relative;
    width: 4.48rem;
    height: 0.46rem;
    // margin-bottom: 0.15rem;
    // background-image: url('@/assets/jinrun/module-title.png');
    // background-size: cover;
    //     margin-left: -0.1rem;
  }

  .status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem;

    .status-item {
      display: flex;
      align-items: center;
      padding: 0.1rem;
      // background: rgba(10, 25, 71, 0.6);
      border-radius: 0.05rem;

      .percent {
        width: 0.9rem;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.22rem;
        font-weight: bold;
        margin-right: 0.1rem;
        min-width: 0.8rem;
        text-align: center;
        color: #fff;
        background-image: url("@/assets/jinrun/blue.png");
        background-size: cover;
        // padding: 0.05rem 0.1rem;
        // border-radius: 0.05rem;
        
        &.blue {
          background-image: url("@/assets/jinrun/blue.png");
        }
        
        &.yellow {
          background-image: url("@/assets/jinrun/yellow.png");
        }
        
        &.cyan {
          background-image: url("@/assets/jinrun/cyan.png");
        }
        
        &.green {
          background-image: url("@/assets/jinrun/green.png");
        }
      }

      .right-content {
        flex: 1;
        text-align: left;
      }

      .name {
        font-weight: 400;
        font-size: 0.18rem;
        color: #11e0ff;
        margin-bottom: 0.03rem;
      }

      .detail {
        font-size: 0.12rem;

        .online {
          font-weight: 400;
          font-size: 0.16rem;
          color: #ffffff;
          margin-right: 0.1rem;
          margin-bottom: 0.04rem;
          display: inline-block;
        }

        .offline {
          font-weight: 400;
          font-size: 0.16rem;
          color: #ffce22;
        }
      }
    }
  }
}
</style>