<!--
 * @Author: chris
 * @Date: 2025-10-22 10:46:12
 * @LastEditors: chris
 * @LastEditTime: 2025-11-17 16:53:08
-->
<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 SoilIndicator {
  id: string
  name: string
  value: number
  unit: string
  color: string
  description: string
}

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

// 模拟的土壤指标数据
const soilIndicators: SoilIndicator[] = [
  { id: 'temperature', name: '温度', value: 25.5, unit: '°C', color: '#FF6B6B', description: '土壤温度' },
  { id: 'humidity', name: '湿度', value: 65.2, unit: '%', color: '#4ECDC4', description: '土壤湿度' },
  { id: 'ph', name: 'pH值', value: 6.8, unit: '', color: '#45B7D1', description: '土壤酸碱度' },
  { id: 'ec', name: '电导率', value: 2.3, unit: 'mS/cm', color: '#FF8C42', description: '土壤电导率(EC)' },
  { id: 'nitrogen', name: '氮含量', value: 120, unit: 'mg/kg', color: '#96CEB4', description: '土壤氮含量' },
  { id: 'phosphorus', name: '磷含量', value: 45, unit: 'mg/kg', color: '#FFEAA7', description: '土壤磷含量' },
  { id: 'potassium', name: '钾含量', value: 180, unit: 'mg/kg', color: '#DDA0DD', 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 = 25
      min = 20
      max = 30
      break
    case 'humidity':
      baseValue = 65
      min = 50
      max = 80
      break
    case 'ph':
      baseValue = 6.8
      min = 5.5
      max = 8.0
      break
    case 'ec':
      baseValue = 2.3
      min = 0.5
      max = 4.0
      break
    case 'nitrogen':
      baseValue = 120
      min = 80
      max = 160
      break
    case 'phosphorus':
      baseValue = 45
      min = 20
      max = 70
      break
    case 'potassium':
      baseValue = 180
      min = 140
      max = 220
      break
  }

  // 生成24小时的数据
  for (let i = 23; i >= 0; i--) {
    const time = new Date(now.getTime() - i * 60 * 60 * 1000)
    const hour = time.getHours()
    // 添加一些时间相关的波动
    const timeFactor = Math.sin((hour / 24) * Math.PI * 2) * 0.1
    // 添加随机波动
    const randomFactor = (Math.random() - 0.5) * 0.2
    let value = baseValue * (1 + timeFactor + randomFactor)

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

    // 根据指标类型格式化值
    if (indicatorId === 'ph' || indicatorId === 'ec') {
      value = Number.parseFloat(value.toFixed(1))
    }
    else {
      value = Math.round(value * 10) / 10
    }

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

  return data
};

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

// 图表数据
const chartData = ref({
  times: [],
  values: [],
  title: '',
  unit: '',
  color: '#4dabf7',
})

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

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

  timeSeriesData.value = generateTimeSeriesData(selectedIndicator.value)

  chartData.value = {
    times: timeSeriesData.value.map(item => item.time),
    values: timeSeriesData.value.map(item => item.value),
    title: `${currentIndicator.name} 24小时变化趋势`,
    unit: currentIndicator.unit,
    color: currentIndicator.color,
  }
};

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

<template>
  <view class="soil-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 soilIndicators"
        :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 id="soilChart" :echarts="echarts" :chart-data="chartData" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.soil-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 min-h-[120rpx];
}

.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>
