<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 tableData = ref({});

const fetchData = async () => {
  const response = await getEnvironmentData();
  if (response.data.code == 200) {
    tableData.value = response.data.data
  } else {
    message.error(response.data.msg)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  
});
</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>