<!--
 * @Author: chris
 * @Date: 2025-10-22 16:00:00
 * @LastEditors: chris
 * @LastEditTime: 2025-10-22 16:00:00
-->
<script setup lang="ts">
const echarts = require('../../uni_modules/lime-echart_1.0.5/static/echarts.min2.js')

import LineChart from './components/lineChart.vue'

// 定义页面标题
definePage({
  navigationBarTitleText: '气象监测',
})

// 气象指标类型定义
interface WeatherIndicator {
  id: string
  name: string
  value: number
  unit: string
  color: string
  description: string
}

// 时间序列数据类型
interface TimeSeriesData {
  time: string
  value: number
}

// 模拟的气象指标数据
const weatherIndicators: WeatherIndicator[] = [
  { id: 'temperature', name: '温度', value: 28.5, unit: '°C', color: '#FF6B6B', description: '空气温度' },
  { id: 'light', name: '光照', value: 850, unit: 'lux', color: '#FFD93D', description: '光照强度' },
  { id: 'windSpeed', name: '风速', value: 3.2, unit: 'm/s', color: '#4ECDC4', description: '平均风速' },
  { id: 'windDirection', name: '风向', value: 135, unit: '°', color: '#45B7D1', description: '风向角度' },
  { id: 'rainfall', name: '降雨量', value: 0, unit: 'mm', color: '#6C5CE7', description: '累计降雨量' },
]

// 当前选中的指标
const selectedIndicator = ref<string>('temperature')

// 生成模拟的24小时时间序列数据
function generateTimeSeriesData(indicatorId: string): TimeSeriesData[] {
  const data: TimeSeriesData[] = []
  const now = new Date()

  // 根据不同指标设置不同的波动范围
  let baseValue = 0
  let min = 0
  let max = 0

  switch (indicatorId) {
    case 'temperature':
      baseValue = 28
      min = 18
      max = 35
      break
    case 'light':
      baseValue = 800
      min = 0
      max = 1200
      break
    case 'windSpeed':
      baseValue = 3.0
      min = 0
      max = 8.0
      break
    case 'windDirection':
      baseValue = 135
      min = 0
      max = 360
      break
    case 'rainfall':
      baseValue = 0
      min = 0
      max = 20
      break
  }

  // 生成24小时的数据
  for (let i = 23; i >= 0; i--) {
    const time = new Date(now.getTime() - i * 60 * 60 * 1000)
    const hour = time.getHours()
    // 添加一些时间相关的波动
    let timeFactor = 0

    // 温度和光照有明显的昼夜变化
    if (indicatorId === 'temperature') {
      timeFactor = Math.sin(((hour - 6) / 24) * Math.PI * 2) * 0.3
    }
    else if (indicatorId === 'light') {
      // 白天光照强，晚上光照弱
      if (hour >= 6 && hour <= 18) {
        timeFactor = Math.sin(((hour - 6) / 12) * Math.PI) * 0.8
      }
      else {
        timeFactor = -0.9
      }
    }
    else if (indicatorId === 'windDirection') {
      // 风向变化更复杂，用随机波动
      timeFactor = (Math.random() - 0.5) * 0.5
    }
    else if (indicatorId === 'rainfall') {
      // 降雨是随机事件
      timeFactor = Math.random() > 0.8 ? Math.random() * 0.5 : -0.1
    }
    else {
      timeFactor = (Math.random() - 0.5) * 0.2
    }

    // 添加随机波动
    const randomFactor = (Math.random() - 0.5) * 0.2
    let value = baseValue * (1 + timeFactor + randomFactor)

    // 确保值在合理范围内
    value = Math.max(min, Math.min(max, value))

    // 根据指标类型格式化值
    if (indicatorId === 'temperature' || indicatorId === 'windSpeed') {
      value = Number.parseFloat(value.toFixed(1))
    }
    else if (indicatorId === 'windDirection') {
      value = Math.round(value)
    }
    else if (indicatorId === 'light') {
      value = Math.round(value)
    }
    else {
      value = Number.parseFloat(value.toFixed(1))
    }

    data.push({
      time: `${hour.toString().padStart(2, '0')}:00`,
      value,
    })
  }

  return data
};

// 时间序列数据
const timeSeriesData = ref<TimeSeriesData[]>([])

// 图表数据
const chartData = ref<any>({})

// 切换选中的指标
function handleIndicatorClick(indicatorId: string) {
  selectedIndicator.value = indicatorId
  updateChart()
}

// 更新图表
function updateChart() {
  const currentIndicator = weatherIndicators.find(ind => ind.id === selectedIndicator.value)
  if (!currentIndicator)
    return

  timeSeriesData.value = generateTimeSeriesData(selectedIndicator.value)

  chartData.value = {
    title: `${currentIndicator.name} 24小时变化趋势`,
    unit: currentIndicator.unit,
    color: currentIndicator.color,
    data: timeSeriesData.value,
  }
}

// 页面加载时初始化数据
onMounted(() => {
  updateChart()
})
</script>

<template>
  <view class="weather-monitor-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="header-title">气象监测数据</text>
      <text class="header-subtitle">实时监测环境气象指标</text>
    </view>

    <!-- 气象指标卡片网格 -->
    <view class="indicators-grid">
      <view
        v-for="indicator in weatherIndicators"
        :key="indicator.id"
        class="indicator-card"
        :class="{ active: selectedIndicator === indicator.id }"
        :style="{ borderColor: indicator.color }"
        @click="handleIndicatorClick(indicator.id)"
      >
        <view class="indicator-name">
          {{ indicator.name }}
        </view>
        <view class="indicator-value" :style="{ color: indicator.color }">
          {{ indicator.value }}<span class="indicator-unit">{{ indicator.unit }}</span>
        </view>
        <view class="indicator-description">
          {{ indicator.description }}
        </view>
      </view>
    </view>

    <!-- 曲线图区域 -->
    <view class="chart-container">
      <line-chart
        :echarts="echarts"
        :chart-data="chartData"
        :canvas-id="`weather-chart-${selectedIndicator}`"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.weather-monitor-page {
  @apply p-20rpx bg-[#f8f8f8] min-h-100vh;
}

.page-header {
  @apply text-center mb-30rpx;
}

.header-title {
  @apply text-36rpx font-bold text-[#333];
}

.header-subtitle {
  @apply text-24rpx text-[#666] mt-10rpx block;
}

.indicators-grid {
  @apply grid grid-cols-[repeat(auto-fit,minmax(300rpx,1fr))] gap-20rpx justify-center mb-30rpx;
}

.indicator-card {
  @apply bg-white px-20rpx py-16rpx rounded-16rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] border-l-[#e0e0e0] border-l-8rpx border-l-solid min-w-[280rpx] min-h-[120rpx] h-auto cursor-pointer transition-all duration-300 ease-in-out flex justify-center flex-col;
}

.indicator-card.active {
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transform: translateY(-2rpx);
}

.indicator-name {
  @apply text-26rpx color-[#666] mb-4rpx;
}

.indicator-value {
  @apply text-34rpx font-bold mb-2rpx;
}

.indicator-unit {
  @apply text-22rpx ml-4rpx;
}

.indicator-description {
  @apply text-18rpx color-[#999] mt-4rpx;
}

.chart-container {
  @apply bg-[#fff] rounded-16rpx p-20rpx shadow-[0_2rpx_10rpx_rgba(0,0,0,0.05)] mt-20rpx;
}
</style>
