<template>
  <view class="dashboard-page">
    <!-- 顶部统计卡片 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view
          class="stat-card"
          v-for="stat in statsData"
          :key="stat.key"
          @click="handleStatClick(stat)"
        >
          <view class="stat-icon" :style="{ backgroundColor: stat.color }">
            {{ stat.icon }}
          </view>
          <view class="stat-content">
            <text class="stat-value">{{ stat.value }}</text>
            <text class="stat-label">{{ stat.label }}</text>
            <view class="stat-trend" :class="stat.trend" v-if="stat.change">
              <text class="trend-text">{{ stat.change }}</text>
              <text class="trend-icon">{{ stat.trend === 'up' ? '↗' : '↘' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 快捷操作 -->
    <Card title="快捷操作" class="quick-actions-card">
      <view class="quick-actions">
        <view
          class="action-item"
          v-for="action in quickActions"
          :key="action.key"
          @click="handleQuickAction(action)"
        >
          <view class="action-icon">{{ action.icon }}</view>
          <text class="action-text">{{ action.text }}</text>
        </view>
      </view>
    </Card>
    
    <!-- 数据概览图表 -->
    <Card title="数据概览" class="overview-card">
      <view class="chart-tabs">
        <view
          class="chart-tab"
          :class="{ active: activeChartTab === tab.key }"
          v-for="tab in chartTabs"
          :key="tab.key"
          @click="handleChartTabChange(tab.key)"
        >
          {{ tab.label }}
        </view>
      </view>
      
      <Chart
        :type="currentChartType"
        :data="chartData"
        :options="chartOptions"
        :width="680"
        :height="400"
        @click="handleChartClick"
      />
      
      <!-- 图表控制 -->
      <view class="chart-controls">
        <Picker
          mode="selector"
          :range="timeRangeOptions"
          range-key="label"
          v-model="selectedTimeRange"
          @change="handleTimeRangeChange"
        >
          <view class="control-picker">
            <text class="picker-text">{{ selectedTimeRange.label }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </Picker>
        
        <view class="chart-type-buttons">
          <button
            class="chart-type-btn"
            :class="{ active: currentChartType === type }"
            v-for="type in chartTypes"
            :key="type"
            @click="handleChartTypeChange(type)"
          >
            {{ getChartTypeLabel(type) }}
          </button>
        </view>
      </view>
    </Card>
    
    <!-- 养殖状态 -->
    <Card title="养殖状态" class="breeding-status-card">
      <view class="status-overview">
        <view class="status-summary">
          <view class="summary-item">
            <text class="summary-label">总存栏</text>
            <text class="summary-value">{{ breedingStatus.totalStock }}头</text>
          </view>
          <view class="summary-item">
            <text class="summary-label">健康率</text>
            <text class="summary-value health-rate">{{ breedingStatus.healthRate }}%</text>
          </view>
          <view class="summary-item">
            <text class="summary-label">平均重量</text>
            <text class="summary-value">{{ breedingStatus.avgWeight }}kg</text>
          </view>
        </view>
        
        <!-- 状态分布饼图 -->
        <view class="status-chart">
          <Chart
            type="doughnut"
            :data="statusChartData"
            :options="statusChartOptions"
            :width="300"
            :height="300"
            :show-legend="false"
          />
        </view>
      </view>
      
      <!-- 状态详情列表 -->
      <view class="status-details">
        <view
          class="status-item"
          v-for="item in breedingStatus.details"
          :key="item.status"
          @click="handleStatusClick(item)"
        >
          <view class="status-info">
            <view class="status-color" :style="{ backgroundColor: item.color }"></view>
            <text class="status-name">{{ item.name }}</text>
          </view>
          <view class="status-data">
            <text class="status-count">{{ item.count }}头</text>
            <text class="status-percent">{{ item.percent }}%</text>
          </view>
        </view>
      </view>
    </Card>
    
    <!-- 健康监控 -->
    <Card title="健康监控" class="health-monitor-card">
      <view class="health-alerts" v-if="healthAlerts.length">
        <view class="alerts-header">
          <text class="alerts-title">健康预警</text>
          <text class="alerts-count">{{ healthAlerts.length }}条</text>
        </view>
        
        <view class="alerts-list">
          <view
            class="alert-item"
            :class="alert.level"
            v-for="alert in healthAlerts"
            :key="alert.id"
            @click="handleAlertClick(alert)"
          >
            <view class="alert-icon">
              {{ getAlertIcon(alert.level) }}
            </view>
            <view class="alert-content">
              <text class="alert-title">{{ alert.title }}</text>
              <text class="alert-desc">{{ alert.description }}</text>
              <text class="alert-time">{{ alert.time }}</text>
            </view>
            <view class="alert-action">
              <button class="action-btn" @click.stop="handleAlertAction(alert)">
                处理
              </button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 健康趋势 -->
      <view class="health-trend">
        <text class="trend-title">健康趋势</text>
        <Chart
          type="line"
          :data="healthTrendData"
          :options="healthTrendOptions"
          :width="680"
          :height="250"
        />
      </view>
    </Card>
    
    <!-- 生产数据 -->
    <Card title="生产数据" class="production-card">
      <view class="production-metrics">
        <view
          class="metric-item"
          v-for="metric in productionMetrics"
          :key="metric.key"
        >
          <view class="metric-header">
            <text class="metric-name">{{ metric.name }}</text>
            <view class="metric-trend" :class="metric.trend">
              <text class="trend-value">{{ metric.change }}</text>
              <text class="trend-arrow">{{ metric.trend === 'up' ? '↗' : '↘' }}</text>
            </view>
          </view>
          
          <view class="metric-value">{{ metric.value }}</view>
          <view class="metric-target">
            <text class="target-label">目标: {{ metric.target }}</text>
            <view class="progress-bar">
              <view
                class="progress-fill"
                :style="{ width: metric.progress + '%' }"
              ></view>
            </view>
          </view>
        </view>
      </view>
    </Card>
    
    <!-- 最近活动 -->
    <Card title="最近活动" class="recent-activities-card">
      <view class="activities-list">
        <view
          class="activity-item"
          v-for="activity in recentActivities"
          :key="activity.id"
          @click="handleActivityClick(activity)"
        >
          <view class="activity-icon" :class="activity.type">
            {{ getActivityIcon(activity.type) }}
          </view>
          <view class="activity-content">
            <text class="activity-title">{{ activity.title }}</text>
            <text class="activity-desc">{{ activity.description }}</text>
            <text class="activity-time">{{ activity.time }}</text>
          </view>
          <view class="activity-status" :class="activity.status">
            {{ getActivityStatusText(activity.status) }}
          </view>
        </view>
      </view>
      
      <view class="activities-more" v-if="hasMoreActivities">
        <button class="more-btn" @click="handleLoadMoreActivities">
          查看更多
        </button>
      </view>
    </Card>
    
    <!-- 天气信息 -->
    <Card title="天气信息" class="weather-card">
      <view class="weather-current">
        <view class="weather-main">
          <view class="weather-icon">{{ weatherData.current.icon }}</view>
          <view class="weather-temp">{{ weatherData.current.temperature }}°C</view>
          <text class="weather-desc">{{ weatherData.current.description }}</text>
        </view>
        
        <view class="weather-details">
          <view class="detail-item">
            <text class="detail-label">湿度</text>
            <text class="detail-value">{{ weatherData.current.humidity }}%</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">风速</text>
            <text class="detail-value">{{ weatherData.current.windSpeed }}km/h</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">气压</text>
            <text class="detail-value">{{ weatherData.current.pressure }}hPa</text>
          </view>
        </view>
      </view>
      
      <!-- 未来天气 -->
      <view class="weather-forecast">
        <text class="forecast-title">未来天气</text>
        <view class="forecast-list">
          <view
            class="forecast-item"
            v-for="day in weatherData.forecast"
            :key="day.date"
          >
            <text class="forecast-date">{{ day.date }}</text>
            <view class="forecast-icon">{{ day.icon }}</view>
            <text class="forecast-temp">{{ day.minTemp }}°~{{ day.maxTemp }}°</text>
          </view>
        </view>
      </view>
    </Card>
  </view>
</template>

<script>
import { ref, reactive, computed, onMounted, onShow } from 'vue'
import Card from '@/common/components/card/card.vue'
import Chart from '@/common/components/chart/chart.vue'
import Picker from '@/common/components/picker/picker.vue'
import { farmApi, weatherApi } from '@/common/api'

export default {
  name: 'DashboardPage',
  components: {
    Card,
    Chart,
    Picker
  },
  setup() {
    // 响应式数据
    const activeChartTab = ref('livestock')
    const currentChartType = ref('line')
    const selectedTimeRange = ref({ label: '近30天', value: '30d' })
    
    const dashboardData = ref({})
    const chartData = ref({ labels: [], datasets: [] })
    const breedingStatus = ref({})
    const healthAlerts = ref([])
    const productionMetrics = ref([])
    const recentActivities = ref([])
    const weatherData = ref({ current: {}, forecast: [] })
    const hasMoreActivities = ref(true)
    
    // 配置数据
    const statsData = computed(() => [
      {
        key: 'totalLivestock',
        icon: '🐄',
        label: '总存栏',
        value: dashboardData.value.totalLivestock || '0',
        change: '+12',
        trend: 'up',
        color: '#2e8b57'
      },
      {
        key: 'healthyCount',
        icon: '💚',
        label: '健康数量',
        value: dashboardData.value.healthyCount || '0',
        change: '+5',
        trend: 'up',
        color: '#52c41a'
      },
      {
        key: 'dailyProduction',
        icon: '🥛',
        label: '日产量',
        value: dashboardData.value.dailyProduction || '0L',
        change: '+8.5%',
        trend: 'up',
        color: '#1890ff'
      },
      {
        key: 'monthlyRevenue',
        icon: '💰',
        label: '月收入',
        value: dashboardData.value.monthlyRevenue || '¥0',
        change: '+15.2%',
        trend: 'up',
        color: '#faad14'
      }
    ])
    
    const quickActions = [
      { key: 'addRecord', icon: '📝', text: '添加记录' },
      { key: 'healthCheck', icon: '🩺', text: '健康检查' },
      { key: 'feeding', icon: '🌾', text: '饲料管理' },
      { key: 'breeding', icon: '🐮', text: '繁殖管理' },
      { key: 'report', icon: '📊', text: '生成报告' },
      { key: 'alert', icon: '🚨', text: '预警设置' }
    ]
    
    const chartTabs = [
      { key: 'livestock', label: '存栏数量' },
      { key: 'health', label: '健康状况' },
      { key: 'production', label: '生产数据' },
      { key: 'revenue', label: '收入分析' }
    ]
    
    const timeRangeOptions = [
      { label: '近7天', value: '7d' },
      { label: '近30天', value: '30d' },
      { label: '近3个月', value: '3m' },
      { label: '近6个月', value: '6m' },
      { label: '近1年', value: '1y' }
    ]
    
    const chartTypes = ['line', 'bar', 'area']
    
    // 计算属性
    const chartOptions = computed(() => ({
      responsive: true,
      animation: true,
      grid: {
        show: true,
        color: '#f0f0f0'
      },
      axis: {
        x: {
          show: true,
          color: '#666'
        },
        y: {
          show: true,
          color: '#666'
        }
      },
      colors: ['#2e8b57', '#ff4757', '#3742fa', '#ffa502']
    }))
    
    const statusChartData = computed(() => ({
      labels: breedingStatus.value.details?.map(item => item.name) || [],
      datasets: [{
        data: breedingStatus.value.details?.map(item => item.count) || [],
        colors: breedingStatus.value.details?.map(item => item.color) || []
      }]
    }))
    
    const statusChartOptions = computed(() => ({
      responsive: true,
      centerText: `${breedingStatus.value.totalStock || 0}头`,
      showLabels: false
    }))
    
    const healthTrendData = computed(() => ({
      labels: ['1周前', '6天前', '5天前', '4天前', '3天前', '2天前', '昨天', '今天'],
      datasets: [{
        label: '健康率',
        data: [95, 96, 94, 97, 95, 98, 96, 97],
        color: '#52c41a'
      }]
    }))
    
    const healthTrendOptions = computed(() => ({
      responsive: true,
      animation: true,
      grid: {
        show: true,
        color: '#f0f0f0'
      },
      axis: {
        x: { show: true, color: '#666' },
        y: { show: true, color: '#666', min: 90, max: 100 }
      },
      colors: ['#52c41a']
    }))
    
    // 方法
    const loadDashboardData = async () => {
      try {
        const response = await farmApi.getDashboardData({
          timeRange: selectedTimeRange.value.value
        })
        
        dashboardData.value = response.data
        updateChartData()
      } catch (error) {
        console.error('加载仪表板数据失败:', error)
      }
    }
    
    const loadBreedingStatus = async () => {
      try {
        const response = await farmApi.getBreedingStatus()
        breedingStatus.value = response.data
      } catch (error) {
        console.error('加载养殖状态失败:', error)
      }
    }
    
    const loadHealthAlerts = async () => {
      try {
        const response = await farmApi.getHealthAlerts({ limit: 5 })
        healthAlerts.value = response.data
      } catch (error) {
        console.error('加载健康预警失败:', error)
      }
    }
    
    const loadProductionMetrics = async () => {
      try {
        const response = await farmApi.getProductionMetrics()
        productionMetrics.value = response.data
      } catch (error) {
        console.error('加载生产数据失败:', error)
      }
    }
    
    const loadRecentActivities = async () => {
      try {
        const response = await farmApi.getRecentActivities({ limit: 10 })
        recentActivities.value = response.data.list
        hasMoreActivities.value = response.data.hasMore
      } catch (error) {
        console.error('加载最近活动失败:', error)
      }
    }
    
    const loadWeatherData = async () => {
      try {
        const response = await weatherApi.getCurrentWeather()
        weatherData.value = response.data
      } catch (error) {
        console.error('加载天气数据失败:', error)
      }
    }
    
    const updateChartData = () => {
      if (!dashboardData.value.chartData) return
      
      const data = dashboardData.value.chartData[activeChartTab.value]
      if (!data) return
      
      chartData.value = {
        labels: data.labels,
        datasets: data.datasets
      }
    }
    
    const getChartTypeLabel = (type) => {
      const labels = {
        line: '折线',
        bar: '柱状',
        area: '面积'
      }
      return labels[type] || type
    }
    
    const getAlertIcon = (level) => {
      const icons = {
        high: '🚨',
        medium: '⚠️',
        low: 'ℹ️'
      }
      return icons[level] || 'ℹ️'
    }
    
    const getActivityIcon = (type) => {
      const icons = {
        health: '🩺',
        feeding: '🌾',
        breeding: '🐮',
        production: '🥛',
        maintenance: '🔧',
        alert: '🚨'
      }
      return icons[type] || '📝'
    }
    
    const getActivityStatusText = (status) => {
      const texts = {
        completed: '已完成',
        pending: '进行中',
        failed: '失败',
        cancelled: '已取消'
      }
      return texts[status] || status
    }
    
    const handleStatClick = (stat) => {
      // 根据统计项跳转到对应页面
      const routes = {
        totalLivestock: '/pages/livestock/list',
        healthyCount: '/pages/health/monitor',
        dailyProduction: '/pages/production/records',
        monthlyRevenue: '/pages/finance/revenue'
      }
      
      const route = routes[stat.key]
      if (route) {
        uni.navigateTo({ url: route })
      }
    }
    
    const handleQuickAction = (action) => {
      const routes = {
        addRecord: '/pages/records/add',
        healthCheck: '/pages/health/check',
        feeding: '/pages/feeding/manage',
        breeding: '/pages/breeding/manage',
        report: '/pages/report/generate',
        alert: '/pages/settings/alerts'
      }
      
      const route = routes[action.key]
      if (route) {
        uni.navigateTo({ url: route })
      }
    }
    
    const handleChartTabChange = (tab) => {
      activeChartTab.value = tab
      updateChartData()
    }
    
    const handleTimeRangeChange = (e) => {
      selectedTimeRange.value = e.value
      loadDashboardData()
    }
    
    const handleChartTypeChange = (type) => {
      currentChartType.value = type
    }
    
    const handleChartClick = (e) => {
      console.log('图表点击:', e)
    }
    
    const handleStatusClick = (item) => {
      uni.navigateTo({
        url: `/pages/livestock/list?status=${item.status}`
      })
    }
    
    const handleAlertClick = (alert) => {
      uni.navigateTo({
        url: `/pages/health/alert-detail?id=${alert.id}`
      })
    }
    
    const handleAlertAction = (alert) => {
      uni.navigateTo({
        url: `/pages/health/handle-alert?id=${alert.id}`
      })
    }
    
    const handleActivityClick = (activity) => {
      uni.navigateTo({
        url: `/pages/activities/detail?id=${activity.id}`
      })
    }
    
    const handleLoadMoreActivities = () => {
      uni.navigateTo({
        url: '/pages/activities/list'
      })
    }
    
    // 生命周期
    onMounted(() => {
      loadDashboardData()
      loadBreedingStatus()
      loadHealthAlerts()
      loadProductionMetrics()
      loadRecentActivities()
      loadWeatherData()
    })
    
    onShow(() => {
      // 页面显示时刷新数据
      loadDashboardData()
      loadHealthAlerts()
    })
    
    return {
      activeChartTab,
      currentChartType,
      selectedTimeRange,
      statsData,
      quickActions,
      chartTabs,
      timeRangeOptions,
      chartTypes,
      chartData,
      chartOptions,
      breedingStatus,
      statusChartData,
      statusChartOptions,
      healthAlerts,
      healthTrendData,
      healthTrendOptions,
      productionMetrics,
      recentActivities,
      hasMoreActivities,
      weatherData,
      getChartTypeLabel,
      getAlertIcon,
      getActivityIcon,
      getActivityStatusText,
      handleStatClick,
      handleQuickAction,
      handleChartTabChange,
      handleTimeRangeChange,
      handleChartTypeChange,
      handleChartClick,
      handleStatusClick,
      handleAlertClick,
      handleAlertAction,
      handleActivityClick,
      handleLoadMoreActivities
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.stats-section {
  padding: 32rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx 24rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.stat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}

.stat-content {
  flex: 1;
  
  .stat-value {
    display: block;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .stat-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 8rpx;
  
  &.up {
    color: #52c41a;
  }
  
  &.down {
    color: #ff4757;
  }
  
  .trend-text {
    font-size: 22rpx;
    font-weight: 500;
  }
  
  .trend-icon {
    font-size: 20rpx;
  }
}

.quick-actions-card {
  margin: 16rpx 32rpx;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 32rpx 16rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.action-icon {
  font-size: 48rpx;
}

.action-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.overview-card {
  margin: 16rpx 32rpx;
}

.chart-tabs {
  display: flex;
  margin-bottom: 24rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.chart-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 24rpx;
  font-size: 26rpx;
  color: #666;
  border-bottom: 4rpx solid transparent;
  
  &.active {
    color: #2e8b57;
    border-bottom-color: #2e8b57;
    font-weight: 600;
  }
}

.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
}

.control-picker {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 24rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  
  .picker-text {
    font-size: 24rpx;
    color: #333;
  }
  
  .picker-arrow {
    font-size: 20rpx;
    color: #666;
  }
}

.chart-type-buttons {
  display: flex;
  gap: 8rpx;
}

.chart-type-btn {
  padding: 8rpx 16rpx;
  background-color: #f8f9fa;
  color: #666;
  border-radius: 6rpx;
  font-size: 22rpx;
  
  &.active {
    background-color: #2e8b57;
    color: #fff;
  }
}

.breeding-status-card {
  margin: 16rpx 32rpx;
}

.status-overview {
  display: flex;
  align-items: center;
  gap: 32rpx;
  margin-bottom: 32rpx;
}

.status-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .summary-label {
    font-size: 26rpx;
    color: #666;
  }
  
  .summary-value {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    
    &.health-rate {
      color: #52c41a;
    }
  }
}

.status-chart {
  width: 300rpx;
  height: 300rpx;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.status-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.status-color {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}

.status-name {
  font-size: 26rpx;
  color: #333;
}

.status-data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
  
  .status-count {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
  }
  
  .status-percent {
    font-size: 22rpx;
    color: #666;
  }
}

.health-monitor-card {
  margin: 16rpx 32rpx;
}

.health-alerts {
  margin-bottom: 32rpx;
}

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

.alerts-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.alerts-count {
  font-size: 24rpx;
  color: #ff4757;
  font-weight: 500;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  
  &.high {
    background-color: #fff2f0;
    border-left: 6rpx solid #ff4757;
  }
  
  &.medium {
    background-color: #fffbe6;
    border-left: 6rpx solid #faad14;
  }
  
  &.low {
    background-color: #f6ffed;
    border-left: 6rpx solid #52c41a;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.alert-icon {
  font-size: 32rpx;
}

.alert-content {
  flex: 1;
  
  .alert-title {
    display: block;
    font-size: 26rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .alert-desc {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .alert-time {
    font-size: 22rpx;
    color: #999;
  }
}

.alert-action {
  .action-btn {
    padding: 8rpx 16rpx;
    background-color: #2e8b57;
    color: #fff;
    border-radius: 6rpx;
    font-size: 22rpx;
  }
}

.health-trend {
  .trend-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
  }
}

.production-card {
  margin: 16rpx 32rpx;
}

.production-metrics {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.metric-item {
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

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

.metric-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 8rpx;
  
  &.up {
    color: #52c41a;
  }
  
  &.down {
    color: #ff4757;
  }
  
  .trend-value {
    font-size: 22rpx;
    font-weight: 500;
  }
  
  .trend-arrow {
    font-size: 20rpx;
  }
}

.metric-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.metric-target {
  .target-label {
    display: block;
    font-size: 22rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background-color: #e5e5e5;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #2e8b57;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.recent-activities-card {
  margin: 16rpx 32rpx;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.activity-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  
  &.health {
    background-color: #f0f8f0;
  }
  
  &.feeding {
    background-color: #fff7e6;
  }
  
  &.breeding {
    background-color: #e6f7ff;
  }
  
  &.production {
    background-color: #f6ffed;
  }
  
  &.maintenance {
    background-color: #f0f0f0;
  }
  
  &.alert {
    background-color: #fff2f0;
  }
}

.activity-content {
  flex: 1;
  
  .activity-title {
    display: block;
    font-size: 26rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .activity-desc {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .activity-time {
    font-size: 22rpx;
    color: #999;
  }
}

.activity-status {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  
  &.completed {
    background-color: #f6ffed;
    color: #52c41a;
  }
  
  &.pending {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  &.failed {
    background-color: #fff2f0;
    color: #ff4757;
  }
  
  &.cancelled {
    background-color: #f0f0f0;
    color: #666;
  }
}

.activities-more {
  text-align: center;
}

.more-btn {
  padding: 16rpx 48rpx;
  background-color: #f8f9fa;
  color: #666;
  border-radius: 8rpx;
  font-size: 26rpx;
  
  &:active {
    background-color: #e9ecef;
  }
}

.weather-card {
  margin: 16rpx 32rpx;
}

.weather-current {
  display: flex;
  align-items: center;
  gap: 32rpx;
  margin-bottom: 32rpx;
}

.weather-main {
  flex: 1;
  text-align: center;
  
  .weather-icon {
    font-size: 80rpx;
    margin-bottom: 16rpx;
  }
  
  .weather-temp {
    display: block;
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .weather-desc {
    font-size: 24rpx;
    color: #666;
  }
}

.weather-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .detail-label {
    font-size: 24rpx;
    color: #666;
  }
  
  .detail-value {
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
  }
}

.weather-forecast {
  .forecast-title {
    display: block;
    font-size: 26rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
  }
}

.forecast-list {
  display: flex;
  gap: 16rpx;
  overflow-x: auto;
}

.forecast-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  min-width: 120rpx;
  
  .forecast-date {
    font-size: 22rpx;
    color: #666;
  }
  
  .forecast-icon {
    font-size: 32rpx;
  }
  
  .forecast-temp {
    font-size: 22rpx;
    color: #333;
  }
}
</style>