<template>
  <view class="market-analysis-page">
    <!-- 顶部筛选 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view
          class="filter-tab"
          :class="{ active: activeTab === tab.value }"
          v-for="tab in filterTabs"
          :key="tab.value"
          @click="handleTabChange(tab.value)"
        >
          {{ tab.label }}
        </view>
      </view>
      
      <view class="filter-controls">
        <Picker
          mode="selector"
          :range="regionOptions"
          range-key="label"
          v-model="selectedRegion"
          @change="handleRegionChange"
        >
          <view class="filter-picker">
            <text class="picker-text">{{ selectedRegion.label }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </Picker>
        
        <Picker
          mode="selector"
          :range="timeRangeOptions"
          range-key="label"
          v-model="selectedTimeRange"
          @change="handleTimeRangeChange"
        >
          <view class="filter-picker">
            <text class="picker-text">{{ selectedTimeRange.label }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </Picker>
      </view>
    </view>
    
    <!-- 市场概览 -->
    <Card title="市场概览" class="overview-card">
      <view class="overview-grid">
        <view class="overview-item" v-for="item in marketOverview" :key="item.key">
          <view class="item-value" :class="item.trend">
            {{ item.value }}
            <text class="trend-icon" v-if="item.trend">
              {{ item.trend === 'up' ? '↗' : '↘' }}
            </text>
          </view>
          <text class="item-label">{{ item.label }}</text>
          <text class="item-change" :class="item.trend" v-if="item.change">
            {{ item.change }}
          </text>
        </view>
      </view>
    </Card>
    
    <!-- 价格走势图 -->
    <Card title="价格走势" class="chart-card">
      <view class="chart-controls">
        <view
          class="chart-tab"
          :class="{ active: activeChartType === type }"
          v-for="type in chartTypes"
          :key="type"
          @click="handleChartTypeChange(type)"
        >
          {{ getChartTypeLabel(type) }}
        </view>
      </view>
      
      <Chart
        :type="activeChartType"
        :data="chartData"
        :options="chartOptions"
        :width="680"
        :height="400"
        @click="handleChartClick"
      />
      
      <!-- 图表说明 -->
      <view class="chart-legend">
        <view
          class="legend-item"
          v-for="item in chartLegend"
          :key="item.key"
        >
          <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
          <text class="legend-text">{{ item.label }}</text>
        </view>
      </view>
    </Card>
    
    <!-- 品种分析 -->
    <Card title="品种分析" class="category-card">
      <view class="category-list">
        <view
          class="category-item"
          v-for="category in categoryAnalysis"
          :key="category.id"
          @click="handleCategoryClick(category)"
        >
          <view class="category-info">
            <view class="category-header">
              <text class="category-name">{{ category.name }}</text>
              <view class="category-trend" :class="category.trend">
                <text class="trend-text">{{ category.trendText }}</text>
                <text class="trend-icon">{{ category.trend === 'up' ? '↗' : '↘' }}</text>
              </view>
            </view>
            
            <view class="category-data">
              <view class="data-item">
                <text class="data-label">平均价格</text>
                <text class="data-value">¥{{ category.avgPrice }}/头</text>
              </view>
              <view class="data-item">
                <text class="data-label">成交量</text>
                <text class="data-value">{{ category.volume }}头</text>
              </view>
              <view class="data-item">
                <text class="data-label">涨跌幅</text>
                <text class="data-value" :class="category.trend">
                  {{ category.changePercent }}%
                </text>
              </view>
            </view>
          </view>
          
          <!-- 迷你图表 -->
          <view class="mini-chart">
            <Chart
              type="line"
              :data="category.miniChartData"
              :options="miniChartOptions"
              :width="200"
              :height="80"
              :show-legend="false"
              :enable-tooltip="false"
            />
          </view>
        </view>
      </view>
    </Card>
    
    <!-- 地区分析 -->
    <Card title="地区分析" class="region-card">
      <view class="region-tabs">
        <view
          class="region-tab"
          :class="{ active: activeRegionTab === tab }"
          v-for="tab in regionTabs"
          :key="tab"
          @click="handleRegionTabChange(tab)"
        >
          {{ tab }}
        </view>
      </view>
      
      <view class="region-content">
        <!-- 地图视图 -->
        <view class="region-map" v-if="activeRegionTab === '地图'">
          <Map
            :center="mapCenter"
            :markers="regionMarkers"
            :width="680"
            :height="400"
            :show-toolbar="false"
            :show-search="false"
            @markerTap="handleRegionMarkerTap"
          />
        </view>
        
        <!-- 列表视图 -->
        <view class="region-list" v-else>
          <view
            class="region-item"
            v-for="region in regionAnalysis"
            :key="region.id"
            @click="handleRegionItemClick(region)"
          >
            <view class="region-info">
              <text class="region-name">{{ region.name }}</text>
              <text class="region-desc">{{ region.description }}</text>
            </view>
            
            <view class="region-data">
              <view class="data-row">
                <text class="data-label">平均价格</text>
                <text class="data-value">¥{{ region.avgPrice }}</text>
              </view>
              <view class="data-row">
                <text class="data-label">成交量</text>
                <text class="data-value">{{ region.volume }}头</text>
              </view>
              <view class="data-row">
                <text class="data-label">活跃度</text>
                <view class="activity-bar">
                  <view
                    class="activity-fill"
                    :style="{ width: region.activity + '%' }"
                  ></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </Card>
    
    <!-- 市场预测 -->
    <Card title="市场预测" class="forecast-card">
      <view class="forecast-content">
        <view class="forecast-summary">
          <view class="summary-item">
            <text class="summary-label">短期趋势</text>
            <text class="summary-value" :class="forecast.shortTerm.trend">
              {{ forecast.shortTerm.text }}
            </text>
          </view>
          <view class="summary-item">
            <text class="summary-label">中期趋势</text>
            <text class="summary-value" :class="forecast.mediumTerm.trend">
              {{ forecast.mediumTerm.text }}
            </text>
          </view>
          <view class="summary-item">
            <text class="summary-label">长期趋势</text>
            <text class="summary-value" :class="forecast.longTerm.trend">
              {{ forecast.longTerm.text }}
            </text>
          </view>
        </view>
        
        <view class="forecast-chart">
          <Chart
            type="line"
            :data="forecastChartData"
            :options="forecastChartOptions"
            :width="680"
            :height="300"
          />
        </view>
        
        <view class="forecast-factors">
          <text class="factors-title">影响因素</text>
          <view class="factors-list">
            <view
              class="factor-item"
              v-for="factor in forecast.factors"
              :key="factor.id"
            >
              <view class="factor-icon" :class="factor.impact">
                {{ factor.impact === 'positive' ? '📈' : '📉' }}
              </view>
              <view class="factor-content">
                <text class="factor-name">{{ factor.name }}</text>
                <text class="factor-desc">{{ factor.description }}</text>
              </view>
              <view class="factor-weight">
                <text class="weight-text">{{ factor.weight }}%</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </Card>
    
    <!-- 交易建议 -->
    <Card title="交易建议" class="suggestion-card">
      <view class="suggestion-list">
        <view
          class="suggestion-item"
          v-for="suggestion in tradingSuggestions"
          :key="suggestion.id"
        >
          <view class="suggestion-header">
            <view class="suggestion-type" :class="suggestion.type">
              {{ getSuggestionTypeText(suggestion.type) }}
            </view>
            <text class="suggestion-time">{{ suggestion.time }}</text>
          </view>
          
          <text class="suggestion-title">{{ suggestion.title }}</text>
          <text class="suggestion-content">{{ suggestion.content }}</text>
          
          <view class="suggestion-tags">
            <text
              class="suggestion-tag"
              v-for="tag in suggestion.tags"
              :key="tag"
            >
              {{ tag }}
            </text>
          </view>
          
          <view class="suggestion-actions">
            <button class="action-btn like-btn" @click="handleSuggestionLike(suggestion)">
              👍 {{ suggestion.likes }}
            </button>
            <button class="action-btn share-btn" @click="handleSuggestionShare(suggestion)">
              分享
            </button>
          </view>
        </view>
      </view>
    </Card>
  </view>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import Card from '@/common/components/card/card.vue'
import Chart from '@/common/components/chart/chart.vue'
import Map from '@/common/components/map/map.vue'
import Picker from '@/common/components/picker/picker.vue'
import { marketApi } from '@/common/api'

export default {
  name: 'MarketAnalysisPage',
  components: {
    Card,
    Chart,
    Map,
    Picker
  },
  setup() {
    // 响应式数据
    const activeTab = ref('price')
    const activeChartType = ref('line')
    const activeRegionTab = ref('地图')
    const selectedRegion = ref({ label: '全国', value: 'all' })
    const selectedTimeRange = ref({ label: '近30天', value: '30d' })
    
    const marketData = ref({})
    const chartData = ref({ labels: [], datasets: [] })
    const categoryAnalysis = ref([])
    const regionAnalysis = ref([])
    const forecast = ref({})
    const tradingSuggestions = ref([])
    
    // 配置数据
    const filterTabs = [
      { label: '价格分析', value: 'price' },
      { label: '成交分析', value: 'volume' },
      { label: '趋势分析', value: 'trend' }
    ]
    
    const regionOptions = [
      { label: '全国', value: 'all' },
      { label: '华北', value: 'north' },
      { label: '华东', value: 'east' },
      { label: '华南', value: 'south' },
      { label: '西南', value: 'southwest' },
      { label: '西北', value: 'northwest' }
    ]
    
    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 regionTabs = ['地图', '列表']
    
    // 计算属性
    const marketOverview = computed(() => [
      {
        key: 'avgPrice',
        label: '平均价格',
        value: '¥12,580',
        change: '+2.3%',
        trend: 'up'
      },
      {
        key: 'totalVolume',
        label: '总成交量',
        value: '15,680头',
        change: '+5.7%',
        trend: 'up'
      },
      {
        key: 'activeTraders',
        label: '活跃交易者',
        value: '2,340人',
        change: '+1.2%',
        trend: 'up'
      },
      {
        key: 'marketCap',
        label: '市场总值',
        value: '¥1.97亿',
        change: '-0.8%',
        trend: 'down'
      }
    ])
    
    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 miniChartOptions = computed(() => ({
      responsive: true,
      animation: false,
      padding: { top: 5, right: 5, bottom: 5, left: 5 },
      grid: { show: false },
      axis: { x: { show: false }, y: { show: false } },
      colors: ['#2e8b57']
    }))
    
    const forecastChartOptions = computed(() => ({
      responsive: true,
      animation: true,
      grid: {
        show: true,
        color: '#f0f0f0'
      },
      axis: {
        x: {
          show: true,
          color: '#666'
        },
        y: {
          show: true,
          color: '#666'
        }
      },
      colors: ['#2e8b57', '#ff6b81', '#70a1ff']
    }))
    
    const chartLegend = computed(() => [
      { key: 'current', label: '当前价格', color: '#2e8b57' },
      { key: 'average', label: '平均价格', color: '#ff4757' },
      { key: 'volume', label: '成交量', color: '#3742fa' }
    ])
    
    const mapCenter = computed(() => ({
      longitude: 116.397428,
      latitude: 39.90923
    }))
    
    const regionMarkers = computed(() => 
      regionAnalysis.value.map(region => ({
        id: region.id,
        longitude: region.longitude,
        latitude: region.latitude,
        title: region.name,
        iconPath: '/static/images/region-marker.png',
        width: 30,
        height: 30,
        callout: {
          content: `${region.name}\n¥${region.avgPrice}`,
          display: 'ALWAYS'
        }
      }))
    )
    
    const forecastChartData = computed(() => ({
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      datasets: [
        {
          label: '历史价格',
          data: [12000, 12500, 12200, 12800, 13000, 12580],
          color: '#2e8b57'
        },
        {
          label: '预测价格',
          data: [null, null, null, null, 13000, 13200, 13500, 13800],
          color: '#ff6b81',
          lineDash: [5, 5]
        }
      ]
    }))
    
    // 方法
    const loadMarketData = async () => {
      try {
        const response = await marketApi.getMarketAnalysis({
          region: selectedRegion.value.value,
          timeRange: selectedTimeRange.value.value,
          type: activeTab.value
        })
        
        marketData.value = response.data
        updateChartData()
      } catch (error) {
        console.error('加载市场数据失败:', error)
      }
    }
    
    const loadCategoryAnalysis = async () => {
      try {
        const response = await marketApi.getCategoryAnalysis({
          region: selectedRegion.value.value,
          timeRange: selectedTimeRange.value.value
        })
        
        categoryAnalysis.value = response.data.map(item => ({
          ...item,
          miniChartData: {
            labels: item.priceHistory.map((_, index) => `${index + 1}日`),
            datasets: [{
              data: item.priceHistory,
              color: item.trend === 'up' ? '#2e8b57' : '#ff4757'
            }]
          }
        }))
      } catch (error) {
        console.error('加载品种分析失败:', error)
      }
    }
    
    const loadRegionAnalysis = async () => {
      try {
        const response = await marketApi.getRegionAnalysis({
          timeRange: selectedTimeRange.value.value
        })
        
        regionAnalysis.value = response.data
      } catch (error) {
        console.error('加载地区分析失败:', error)
      }
    }
    
    const loadForecast = async () => {
      try {
        const response = await marketApi.getMarketForecast({
          region: selectedRegion.value.value
        })
        
        forecast.value = response.data
      } catch (error) {
        console.error('加载市场预测失败:', error)
      }
    }
    
    const loadTradingSuggestions = async () => {
      try {
        const response = await marketApi.getTradingSuggestions({
          region: selectedRegion.value.value,
          limit: 10
        })
        
        tradingSuggestions.value = response.data
      } catch (error) {
        console.error('加载交易建议失败:', error)
      }
    }
    
    const updateChartData = () => {
      if (!marketData.value.priceData) return
      
      const { priceData } = marketData.value
      
      chartData.value = {
        labels: priceData.labels,
        datasets: [
          {
            label: '价格',
            data: priceData.prices,
            color: '#2e8b57'
          },
          {
            label: '成交量',
            data: priceData.volumes,
            color: '#ff4757'
          }
        ]
      }
    }
    
    const getChartTypeLabel = (type) => {
      const labels = {
        line: '折线图',
        bar: '柱状图',
        area: '面积图'
      }
      return labels[type] || type
    }
    
    const getSuggestionTypeText = (type) => {
      const texts = {
        buy: '买入',
        sell: '卖出',
        hold: '持有',
        watch: '观望'
      }
      return texts[type] || type
    }
    
    const handleTabChange = (tab) => {
      activeTab.value = tab
      loadMarketData()
    }
    
    const handleRegionChange = (e) => {
      selectedRegion.value = e.value
      loadMarketData()
      loadCategoryAnalysis()
      loadForecast()
      loadTradingSuggestions()
    }
    
    const handleTimeRangeChange = (e) => {
      selectedTimeRange.value = e.value
      loadMarketData()
      loadCategoryAnalysis()
      loadRegionAnalysis()
    }
    
    const handleChartTypeChange = (type) => {
      activeChartType.value = type
    }
    
    const handleChartClick = (e) => {
      console.log('图表点击:', e)
    }
    
    const handleCategoryClick = (category) => {
      uni.navigateTo({
        url: `/pages/market/category-detail?id=${category.id}`
      })
    }
    
    const handleRegionTabChange = (tab) => {
      activeRegionTab.value = tab
    }
    
    const handleRegionMarkerTap = (e) => {
      const region = regionAnalysis.value.find(r => r.id === e.detail.markerId)
      if (region) {
        handleRegionItemClick(region)
      }
    }
    
    const handleRegionItemClick = (region) => {
      uni.navigateTo({
        url: `/pages/market/region-detail?id=${region.id}`
      })
    }
    
    const handleSuggestionLike = (suggestion) => {
      // 点赞逻辑
      suggestion.likes++
    }
    
    const handleSuggestionShare = (suggestion) => {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: '',
        title: suggestion.title,
        summary: suggestion.content,
        imageUrl: ''
      })
    }
    
    // 生命周期
    onMounted(() => {
      loadMarketData()
      loadCategoryAnalysis()
      loadRegionAnalysis()
      loadForecast()
      loadTradingSuggestions()
    })
    
    return {
      activeTab,
      activeChartType,
      activeRegionTab,
      selectedRegion,
      selectedTimeRange,
      filterTabs,
      regionOptions,
      timeRangeOptions,
      chartTypes,
      regionTabs,
      marketOverview,
      chartData,
      chartOptions,
      miniChartOptions,
      forecastChartOptions,
      chartLegend,
      categoryAnalysis,
      regionAnalysis,
      mapCenter,
      regionMarkers,
      forecast,
      forecastChartData,
      tradingSuggestions,
      getChartTypeLabel,
      getSuggestionTypeText,
      handleTabChange,
      handleRegionChange,
      handleTimeRangeChange,
      handleChartTypeChange,
      handleChartClick,
      handleCategoryClick,
      handleRegionTabChange,
      handleRegionMarkerTap,
      handleRegionItemClick,
      handleSuggestionLike,
      handleSuggestionShare
    }
  }
}
</script>

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

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

.filter-tabs {
  display: flex;
  margin-bottom: 24rpx;
}

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

.filter-controls {
  display: flex;
  gap: 24rpx;
}

.filter-picker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  
  .picker-text {
    font-size: 26rpx;
    color: #333;
  }
  
  .picker-arrow {
    font-size: 20rpx;
    color: #666;
  }
}

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

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

.overview-item {
  text-align: center;
  
  .item-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
    
    &.up {
      color: #2e8b57;
    }
    
    &.down {
      color: #ff4757;
    }
    
    .trend-icon {
      font-size: 24rpx;
    }
  }
  
  .item-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .item-change {
    font-size: 22rpx;
    font-weight: 500;
    
    &.up {
      color: #2e8b57;
    }
    
    &.down {
      color: #ff4757;
    }
  }
}

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

.chart-controls {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.chart-tab {
  padding: 12rpx 24rpx;
  background-color: #f8f9fa;
  border-radius: 6rpx;
  font-size: 24rpx;
  color: #666;
  
  &.active {
    background-color: #2e8b57;
    color: #fff;
  }
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 32rpx;
  margin-top: 24rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

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

.legend-text {
  font-size: 22rpx;
  color: #666;
}

.category-card,
.region-card,
.forecast-card,
.suggestion-card {
  margin: 16rpx 32rpx;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

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

.category-info {
  flex: 1;
}

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

.category-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.category-trend {
  display: flex;
  align-items: center;
  gap: 8rpx;
  
  &.up {
    color: #2e8b57;
  }
  
  &.down {
    color: #ff4757;
  }
  
  .trend-text {
    font-size: 24rpx;
  }
  
  .trend-icon {
    font-size: 20rpx;
  }
}

.category-data {
  display: flex;
  gap: 32rpx;
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  
  .data-label {
    font-size: 22rpx;
    color: #666;
  }
  
  .data-value {
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
    
    &.up {
      color: #2e8b57;
    }
    
    &.down {
      color: #ff4757;
    }
  }
}

.mini-chart {
  width: 200rpx;
  height: 80rpx;
}

.region-tabs {
  display: flex;
  margin-bottom: 24rpx;
}

.region-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-right: 16rpx;
  
  &:last-child {
    margin-right: 0;
  }
  
  &.active {
    background-color: #2e8b57;
    color: #fff;
  }
}

.region-map {
  border-radius: 12rpx;
  overflow: hidden;
}

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

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

.region-info {
  .region-name {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .region-desc {
    font-size: 24rpx;
    color: #666;
  }
}

.region-data {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  min-width: 200rpx;
}

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

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

.activity-fill {
  height: 100%;
  background-color: #2e8b57;
  border-radius: 4rpx;
}

.forecast-content {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.forecast-summary {
  display: flex;
  justify-content: space-around;
}

.summary-item {
  text-align: center;
  
  .summary-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .summary-value {
    font-size: 28rpx;
    font-weight: 600;
    
    &.up {
      color: #2e8b57;
    }
    
    &.down {
      color: #ff4757;
    }
    
    &.stable {
      color: #ffa502;
    }
  }
}

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

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

.factor-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
}

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

.factor-content {
  flex: 1;
  
  .factor-name {
    display: block;
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 4rpx;
  }
  
  .factor-desc {
    font-size: 22rpx;
    color: #666;
  }
}

.factor-weight {
  .weight-text {
    font-size: 24rpx;
    color: #2e8b57;
    font-weight: 600;
  }
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

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

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

.suggestion-type {
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  color: #fff;
  
  &.buy {
    background-color: #2e8b57;
  }
  
  &.sell {
    background-color: #ff4757;
  }
  
  &.hold {
    background-color: #ffa502;
  }
  
  &.watch {
    background-color: #666;
  }
}

.suggestion-time {
  font-size: 22rpx;
  color: #666;
}

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

.suggestion-content {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.suggestion-tag {
  padding: 6rpx 12rpx;
  background-color: #e9ecef;
  color: #666;
  font-size: 22rpx;
  border-radius: 12rpx;
}

.suggestion-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  
  &.like-btn {
    background-color: #fff;
    color: #666;
    border: 2rpx solid #e5e5e5;
  }
  
  &.share-btn {
    background-color: #2e8b57;
    color: #fff;
  }
  
  &:active {
    opacity: 0.8;
  }
}
</style>