<template>
  <view class="parameter-record-page">
    <!-- 固定头部 -->
    <view class="fixed-header">
      <text class="header-title">移动式检修车间</text>
    </view>
    
    <!-- 内容区域 -->
    <view class="tabbar-content">
      <!-- 日期选择器 -->
      <view class="date-selector">
        <picker mode="date" :value="selectedDate" @change="onDateChange">
          <view class="date-picker">
            <text class="date-text">{{ selectedDate }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
        <view class="connection-status" :class="connectionStatus.isConnected ? 'connected' : 'disconnected'">
          {{ connectionStatus.isConnected ? 'MQTT已连接' : 'MQTT未连接' }}
        </view>
      </view>
    
    <!-- 温度趋势图表 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">温度趋势</text>
        <view class="status-indicator">
          <view class="status-dot temperature-dot"></view>
          <text class="status-text">正常</text>
        </view>
      </view>
      <view class="chart-container">
        <canvas canvas-id="temperatureChart" class="chart-canvas"></canvas>
      </view>
    </view>
    
    <!-- 湿度趋势图表 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">湿度趋势</text>
        <view class="status-indicator">
          <view class="status-dot humidity-dot"></view>
          <text class="status-text">正常</text>
        </view>
      </view>
      <view class="chart-container">
        <canvas canvas-id="humidityChart" class="chart-canvas"></canvas>
      </view>
    </view>
    
    <!-- PM2.5趋势图表 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">PM2.5趋势</text>
        <view class="status-indicator">
          <view class="status-dot pm25-dot"></view>
          <text class="status-text">正常</text>
        </view>
      </view>
      <view class="chart-container">
        <canvas canvas-id="pm25Chart" class="chart-canvas"></canvas>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import mqttDataManager from '@/utils/mqttDataManager.js'

export default {
  data() {
    return {
      selectedDate: '2025-09-01',
      // 24小时数据 (0-23点)
      temperatureData: [22, 25, 28, 32, 35, 38, 40, 38, 35, 32, 28, 25, 22, 20, 18, 20, 22, 25, 28, 30, 32, 30, 28, 25],
      humidityData: [45, 50, 55, 60, 65, 70, 75, 70, 65, 60, 55, 50, 45, 40, 35, 40, 45, 50, 55, 60, 65, 60, 55, 50],
      pm25Data: [15, 18, 22, 25, 28, 32, 35, 32, 28, 25, 22, 18, 15, 12, 10, 12, 15, 18, 22, 25, 28, 25, 22, 18],
      connectionStatus: {
        isConnected: false,
        lastUpdate: null
      }
    }
  },
  onLoad() {
    console.log('参数记录页面加载')
    this.$nextTick(() => {
      this.drawCharts()
    })
    this.initMqttListener()
  },
  onUnload() {
    // 页面卸载时移除监听器
    if (this.dataUpdateHandler) {
      mqttDataManager.removeListener('dataUpdate', this.dataUpdateHandler)
    }
    if (this.statusUpdateHandler) {
      mqttDataManager.removeListener('connectionStatus', this.statusUpdateHandler)
    }
  },
  methods: {
    // 初始化MQTT监听
    initMqttListener() {
      // 监听数据更新
      this.dataUpdateHandler = (data) => {
        console.log('参数记录页面收到MQTT数据:', data)
        this.updateChartData(data)
      }
      mqttDataManager.addListener('dataUpdate', this.dataUpdateHandler)
      
      // 监听连接状态
      this.statusUpdateHandler = (status) => {
        this.connectionStatus = status
        console.log('参数记录页面连接状态更新:', status)
      }
      mqttDataManager.addListener('connectionStatus', this.statusUpdateHandler)
      
      // 获取初始连接状态
      this.connectionStatus = mqttDataManager.getConnectionStatus()
    },
    
    // 更新图表数据
    updateChartData(data) {
      console.log('📊 参数记录页面更新数据:', data)
      
      // 只处理WSD设备的数据
      if (data.deviceType === 'WSD') {
        const now = new Date()
        const currentHour = now.getHours()
        
        // 更新对应小时的数据
        if (data.temperature !== undefined) {
          this.temperatureData[currentHour] = Math.round(data.temperature)
          console.log(`✅ 温度数据已更新 - 小时${currentHour}:`, this.temperatureData[currentHour])
        }
        if (data.humidity !== undefined) {
          this.humidityData[currentHour] = Math.round(data.humidity)
          console.log(`✅ 湿度数据已更新 - 小时${currentHour}:`, this.humidityData[currentHour])
        }
        
        // 重新绘制图表
        this.$nextTick(() => {
          this.drawCharts()
        })
        
        console.log('✅ 图表数据更新完成:', {
          temperature: this.temperatureData[currentHour],
          humidity: this.humidityData[currentHour],
          hour: currentHour
        })
      } else {
        console.log('⚠️ 非WSD设备数据，跳过图表更新:', data.deviceType)
      }
    },
    onDateChange(e) {
      this.selectedDate = e.detail.value
      this.$nextTick(() => {
        this.drawCharts()
      })
    },
    drawCharts() {
      this.drawTemperatureChart()
      this.drawHumidityChart()
      this.drawPM25Chart()
    },
    drawTemperatureChart() {
      const ctx = uni.createCanvasContext('temperatureChart', this)
      this.drawLineChart(ctx, this.temperatureData, '#ff6b35', '°C')
    },
    drawHumidityChart() {
      const ctx = uni.createCanvasContext('humidityChart', this)
      this.drawLineChart(ctx, this.humidityData, '#4a90e2', '%')
    },
    drawPM25Chart() {
      const ctx = uni.createCanvasContext('pm25Chart', this)
      this.drawLineChart(ctx, this.pm25Data, '#7ed321', 'μg/m³')
    },
    drawLineChart(ctx, data, color, unit) {
      const canvasWidth = 300
      const canvasHeight = 200
      const padding = 40
      const chartWidth = canvasWidth - padding * 2
      const chartHeight = canvasHeight - padding * 2
      
      // 清空画布
      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
      
      // 绘制网格
      ctx.setStrokeStyle('#f0f0f0')
      ctx.setLineWidth(1)
      
      // 水平网格线
      for (let i = 0; i <= 5; i++) {
        const y = padding + (chartHeight / 5) * i
        ctx.beginPath()
        ctx.moveTo(padding, y)
        ctx.lineTo(padding + chartWidth, y)
        ctx.stroke()
      }
      
      // 垂直网格线
      for (let i = 0; i <= 6; i++) {
        const x = padding + (chartWidth / 6) * i
        ctx.beginPath()
        ctx.moveTo(x, padding)
        ctx.lineTo(x, padding + chartHeight)
        ctx.stroke()
      }
      
      // 绘制数据线
      ctx.setStrokeStyle(color)
      ctx.setLineWidth(3)
      ctx.beginPath()
      
      data.forEach((value, index) => {
        const x = padding + (chartWidth / 23) * index
        const y = padding + chartHeight - (value / 100) * chartHeight
        
        if (index === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      })
      ctx.stroke()
      
      // 绘制数据点
      ctx.setFillStyle(color)
      data.forEach((value, index) => {
        const x = padding + (chartWidth / 23) * index
        const y = padding + chartHeight - (value / 100) * chartHeight
        
        ctx.beginPath()
        ctx.arc(x, y, 4, 0, 2 * Math.PI)
        ctx.fill()
      })
      
      // 绘制X轴标签
      ctx.setFillStyle('#666')
      ctx.setFontSize(12)
      ctx.setTextAlign('center')
      
      const timeLabels = ['00', '04', '08', '12', '16', '20', '23']
      timeLabels.forEach((label, index) => {
        const x = padding + (chartWidth / 6) * index
        ctx.fillText(label, x, canvasHeight - 10)
      })
      
      // 绘制Y轴标签
      ctx.setTextAlign('right')
      for (let i = 0; i <= 5; i++) {
        const y = padding + chartHeight - (chartHeight / 5) * i + 5
        const value = (100 / 5) * i
        ctx.fillText(value.toString(), padding - 10, y)
      }
      
      ctx.draw()
    }
  }
}
</script>

<style lang="scss" scoped>
.parameter-record-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.date-selector {
  background: white;
  border-radius: 8rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.connection-status {
  font-size: 24rpx;
  font-weight: bold;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.connection-status.connected {
  background-color: #e8f5e8;
  color: #4caf50;
}

.connection-status.disconnected {
  background-color: #ffebee;
  color: #ff4444;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 15rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 6rpx;
}

.date-text {
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  color: #999;
  font-size: 20rpx;
}

.chart-card {
  background: white;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.chart-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.chart-subtitle {
  font-size: 22rpx;
  color: #666;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6rpx;
  background-color: #e8f5e8;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
}

.status-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
}

.temperature-dot {
  background-color: #ff6b35;
}

.humidity-dot {
  background-color: #4a90e2;
}

.pm25-dot {
  background-color: #7ed321;
}

.status-text {
  font-size: 20rpx;
  color: #4caf50;
}

.chart-container {
  display: flex;
  justify-content: center;
}

.chart-canvas {
  width: 280px;
  height: 180px;
}
</style>