<template>
  <div class="chart-container wrapper">
    <h2 class="card-title">环境监测实时数据</h2>
    <div class="env-grid">
      <div class="row1">
        <div class="item">
          <img src="@/assets/jinrun/wendu.png" alt="" />
          <div class="name">温度 {{ tableData.temperature }}°C</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/shidu.png" alt="" />
          <div class="name">湿度 {{ tableData.humidity }}%RH</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/pm25.png" alt="" />
          <div class="name">PM2.5 {{ tableData.pm25 }}μg/m³</div>
        </div>
      </div>
      <div class="row2">
        <div class="item">
          <img src="@/assets/jinrun/fengxiang.png" alt="" />
          <div class="name">风向 {{ tableData.windDirection }}</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/fengsu.png" alt="" />
          <div class="name">风速 {{ tableData.windSpeed }}m/s</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/qiya.png" alt="" />
          <div class="name">气压 {{ tableData.pressure }}Kpa</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/pm10.png" alt="" />
          <div class="name">PM10 {{ tableData.pm10 }}μg/m³</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { getEnvironmentData } from '@/api/index-dp';

import {
 useMessage
} from 'naive-ui';

const message = useMessage();

// 轮询相关变量
const pollingTimer = ref<number | null>(null);
const POLLING_INTERVAL = 10000; // 10秒

const tableData = ref({});

const fetchData = async () => {
  try {
    const response = await getEnvironmentData();
    if (response.data.code == 200) {
      tableData.value = response.data.data
    } else {
      message.error(response.data.msg)
    }
  } catch (error) {
    console.error('获取环境监测数据失败:', error);
    message.error('获取环境监测数据失败');
  }
}

// 开始轮询
const startPolling = () => {
  // 先清除已存在的定时器
  if (pollingTimer.value) {
    clearInterval(pollingTimer.value);
  }
  
  // 立即获取一次数据
  fetchData();
  
  // 设置定时器，每10秒获取一次数据
  pollingTimer.value = window.setInterval(() => {
    fetchData();
  }, POLLING_INTERVAL);
};

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

// 组件挂载时启动轮询
onMounted(() => {
  startPolling();
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  stopPolling();
});
</script>

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  padding-top: 0.45rem;
      margin-top: .26rem;

  .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);
  }
  width: 100%;
  margin-top: 0.3rem;
  background-image: url("@/assets/jinrun/module-bg.png");
background-size: cover;
  background-repeat: no-repeat;
}

.env-grid {
  .row1{
    margin-bottom: .2rem;
  }
  .row1,
  .row2 {
    display: flex;
    justify-content: space-between;
    gap: 0.1rem;
    font-weight: 400;
    font-size: 0.16rem;
    color: #ffffff;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .name {
      text-align: center;
    }
    img {
      width: 0.88rem;
      height: 0.71rem;
      margin-bottom: .1rem;
    }
  }
}
</style>