<template>
  <div class="data-module">
    <div class="module-header">
      <h3>环境监测</h3>
      <span class="time-range">{{ timeRange }}</span>
    </div>
    <div class="module-body">
      <div class="env-data-grid">
        <div class="env-item" v-for="(envData, index) in envDataList" :key="index">
          <span class="env-icon" :class="envData.icon"></span>
          <span class="env-label">{{ envData.label }}</span>
          <span class="env-value">{{ envData.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnvironmentalMonitoring',
  props: {
    timeRange: {
      type: String,
      default: '今日'
    },
    envDataList: {
      type: Array,
      default: () => [
        {
          icon: 'temp',
          label: '平均温度',
          value: '26.3°C'
        },
        {
          icon: 'humidity',
          label: '平均湿度',
          value: '65.8%'
        },
        {
          icon: 'pressure',
          label: '平均气压',
          value: '101.5kPa'
        },
        {
          icon: 'wind',
          label: '平均风速',
          value: '3.2m/s'
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 组件样式将从主页面继承 */
</style>