<template>
  <div class="market-page">
    <!-- Header -->
    <div class="market-header">
      <div class="header-left">
        <div class="data-title">🌍 市场情报</div>
        <p class="header-desc">实时掌握市场动态，AI驱动的市场机会发现</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-secondary" @click="showMonitorModal = true">
          <i class="fas fa-bell"></i> 监控设置
        </button>
        <button class="btn btn-secondary" @click="showTrendModal = true">
          <i class="fas fa-chart-line"></i> 趋势分析
        </button>
        <button class="btn btn-secondary" @click="exportIntelligence">
          <i class="fas fa-download"></i> 导出报告
        </button>
        <button class="btn btn-primary" @click="showAddMonitorModal = true">
          <i class="fas fa-plus"></i> 添加监控
        </button>
      </div>
    </div>

    <!-- Quick Stats -->
    <div class="stats-row">
      <div class="stat-card" @click="filterByType('market')">
        <div class="stat-icon blue"><i class="fas fa-globe"></i></div>
        <div class="stat-content">
          <h3>{{ activeMarkets }}</h3>
          <p>活跃市场</p>
        </div>
        <div class="stat-trend up"><i class="fas fa-arrow-up"></i> 5个</div>
      </div>
      <div class="stat-card" @click="filterByType('competitor')">
        <div class="stat-icon purple"><i class="fas fa-chess"></i></div>
        <div class="stat-content">
          <h3>{{ monitoredCompetitors }}</h3>
          <p>竞品监控</p>
        </div>
        <div class="stat-badge">{{ newCompetitorNews }}</div>
      </div>
      <div class="stat-card" @click="filterByType('opportunity')">
        <div class="stat-icon green"><i class="fas fa-lightbulb"></i></div>
        <div class="stat-content">
          <h3>{{ marketOpportunities.length }}</h3>
          <p>市场机会</p>
        </div>
        <div class="stat-badge">{{ highPotentialCount }}</div>
      </div>
      <div class="stat-card" @click="filterByType('risk')">
        <div class="stat-icon red"><i class="fas fa-exclamation-triangle"></i></div>
        <div class="stat-content">
          <h3>{{ marketRisks.length }}</h3>
          <p>市场风险</p>
        </div>
        <div class="stat-badge danger">{{ criticalRisks }}</div>
      </div>
      <div class="stat-card" @click="filterByType('trend')">
        <div class="stat-icon cyan"><i class="fas fa-wave-square"></i></div>
        <div class="stat-content">
          <h3>{{ trendingTopics.length }}</h3>
          <p>热点话题</p>
        </div>
        <div class="stat-trend up"><i class="fas fa-fire"></i> 热</div>
      </div>
    </div>

    <!-- Tabs & Filters -->
    <div class="tabs-section">
      <div class="tabs">
        <div v-for="tab in tabs" :key="tab.key" 
             class="tab-item" :class="{ active: activeTab === tab.key }"
             @click="activeTab = tab.key">
          {{ tab.label }}
          <span class="tab-count">{{ tab.count }}</span>
        </div>
      </div>
      <div class="filter-controls">
        <input type="text" class="search-input" v-model="searchQuery" placeholder="搜索市场、竞品、话题...">
        <select class="filter-select" v-model="filterRegion">
          <option value="">全部地区</option>
          <option value="middle-east">中东</option>
          <option value="europe">欧洲</option>
          <option value="asia">亚洲</option>
          <option value="america">美洲</option>
        </select>
        <select class="filter-select" v-model="sortBy">
          <option value="latest">最新</option>
          <option value="hot">热度</option>
          <option value="importance">重要性</option>
        </select>
      </div>
    </div>

    <!-- Content Sections -->
    <div v-if="activeTab === 'overview'" class="content-section">
      <!-- Market Overview Grid -->
      <div class="overview-grid">
        <!-- Hot Markets -->
        <div class="card-section">
          <div class="section-header">
            <h4><i class="fas fa-fire"></i> 热门市场 TOP 5</h4>
            <button class="btn-link" @click="showMarketDetail">查看全部</button>
          </div>
          <div class="market-list">
            <div v-for="(market, index) in hotMarkets" :key="index" 
                 class="market-item" @click="openMarketDetail(market)">
              <div class="rank-badge" :class="{ gold: index === 0, silver: index === 1, bronze: index === 2 }">
                {{ index + 1 }}
              </div>
              <div class="market-info">
                <div class="market-name">{{ market.name }}</div>
                <div class="market-meta">
                  <span><i class="fas fa-chart-line"></i> {{ market.growth }}</span>
                  <span><i class="fas fa-users"></i> {{ market.population }}</span>
                </div>
              </div>
              <div class="market-score">
                <div class="score-value">{{ market.score }}</div>
                <div class="score-label">潜力指数</div>
              </div>
              <div class="market-indicators">
                <span class="indicator" :class="market.trend">
                  <i :class="market.trend === 'up' ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Competitor News -->
        <div class="card-section">
          <div class="section-header">
            <h4><i class="fas fa-chess"></i> 竞品动态</h4>
            <button class="btn-link" @click="showAllNews">查看全部</button>
          </div>
          <div class="news-list">
            <div v-for="news in competitorNews.slice(0, 5)" :key="news.id" 
                 class="news-item" :class="news.level"
                 @click="openCompetitorNewsDetail(news)">
              <div class="news-header">
                <span class="news-title">{{ news.title }}</span>
                <span class="news-level" :class="news.level">{{ getLevelLabel(news.level) }}</span>
              </div>
              <div class="news-content">
                <div class="news-company">
                  <i class="fas fa-building"></i> {{ news.company }}
                </div>
                <div class="news-description">{{ news.description }}</div>
              </div>
              <div class="news-footer">
                <span class="news-time">{{ news.time }}</span>
                <span class="news-impact">影响: {{ news.impact }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Market Opportunities -->
      <div class="opportunities-section">
        <div class="section-header">
          <h4><i class="fas fa-lightbulb"></i> 市场机会</h4>
          <div class="header-controls">
            <select class="filter-select-sm" v-model="opportunityFilter">
              <option value="">全部</option>
              <option value="high">高潜力</option>
              <option value="medium">中潜力</option>
              <option value="low">低潜力</option>
            </select>
            <button class="btn-link" @click="showOpportunitiesDetail">查看详情</button>
          </div>
        </div>
        <div class="opportunities-grid">
          <div v-for="opp in filteredOpportunities" :key="opp.id" 
               class="opportunity-card" :class="opp.potential"
               @click="openOpportunityDetail(opp)">
            <div class="opp-header">
              <span class="opp-icon">{{ opp.icon }}</span>
              <span class="opp-potential" :class="opp.potential">{{ opp.potential }}</span>
            </div>
            <div class="opp-title">{{ opp.market }}</div>
            <div class="opp-product">{{ opp.product }}</div>
            <div class="opp-insight">{{ opp.insight }}</div>
            <div class="opp-metrics">
              <span class="metric">
                <i class="fas fa-chart-bar"></i> 市场规模: {{ opp.marketSize }}
              </span>
              <span class="metric">
                <i class="fas fa-users"></i> 竞争: {{ opp.competition }}
              </span>
            </div>
            <div class="opp-footer">
              <span class="opp-score">评分: {{ opp.score }}/100</span>
              <button class="btn btn-sm btn-outline" @click.stop="trackOpportunity(opp)">
                <i class="fas fa-star"></i> 跟踪
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Market Risks -->
      <div class="risks-section">
        <div class="section-header">
          <h4><i class="fas fa-exclamation-triangle"></i> 市场风险</h4>
          <button class="btn-link" @click="showRisksDetail">查看全部</button>
        </div>
        <div class="risks-grid">
          <div v-for="risk in marketRisks" :key="risk.id" 
               class="risk-card" :class="risk.level"
               @click="openMarketRiskDetail(risk)">
            <div class="risk-header">
              <span class="risk-title">{{ risk.title }}</span>
              <span class="risk-level" :class="risk.level">{{ risk.level }}</span>
            </div>
            <div class="risk-description">{{ risk.description }}</div>
            <div class="risk-impact">
              <span class="impact-label">影响范围:</span>
              <span class="impact-regions">{{ risk.affectedRegions }}</span>
            </div>
            <div class="risk-action">
              <button class="btn btn-sm btn-outline" @click.stop="openMarketRiskDetail(risk)">
                <i class="fas fa-arrow-right"></i> 查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Trending Topics -->
    <div v-if="activeTab === 'trends'" class="content-section">
      <div class="section-header">
        <h4><i class="fas fa-wave-square"></i> 热点话题</h4>
        <button class="btn btn-secondary btn-sm" @click="refreshTrends">
          <i class="fas fa-sync"></i> 刷新
        </button>
      </div>
      <div class="trends-grid">
        <div v-for="topic in trendingTopics" :key="topic.id" 
             class="trend-card" @click="openTrendDetail(topic)">
          <div class="trend-header">
            <span class="trend-tag">{{ topic.category }}</span>
            <span class="trend-heat" :class="{ hot: topic.heat > 80, warm: topic.heat > 50 }">
              <i class="fas fa-fire"></i> {{ topic.heat }}
            </span>
          </div>
          <div class="trend-title">{{ topic.title }}</div>
          <div class="trend-description">{{ topic.description }}</div>
          <div class="trend-stats">
            <span>提及: {{ topic.mentions }}</span>
            <span>增长: {{ topic.growth }}%</span>
            <span>相关产品: {{ topic.relatedProducts }}</span>
          </div>
          <div class="trend-sources">
            <span v-for="source in topic.sources" :key="source" class="source-tag">{{ source }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Monitored Items -->
    <div v-if="activeTab === 'monitored'" class="content-section">
      <div class="section-header">
        <h4><i class="fas fa-bell"></i> 监控项目</h4>
        <button class="btn btn-secondary btn-sm" @click="showMonitorModal = true">
          <i class="fas fa-cog"></i> 管理监控
        </button>
      </div>
      <div class="monitored-list">
        <div v-for="item in monitoredItems" :key="item.id" 
             class="monitored-item" :class="item.type">
          <div class="item-header">
            <span class="item-type" :class="item.type">{{ item.type }}</span>
            <span class="item-name">{{ item.name }}</span>
            <span class="item-status" :class="item.status">{{ item.status }}</span>
          </div>
          <div class="item-content">
            <div class="item-description">{{ item.description }}</div>
            <div class="item-metrics">
              <span>最后更新: {{ item.lastUpdate }}</span>
              <span>更新频率: {{ item.frequency }}</span>
              <span>通知: {{ item.notifications }}</span>
            </div>
          </div>
          <div class="item-actions">
            <button class="btn btn-sm btn-outline" @click="editMonitor(item)">
              <i class="fas fa-edit"></i> 编辑
            </button>
            <button class="btn btn-sm btn-outline" @click="removeMonitor(item)">
              <i class="fas fa-trash"></i> 删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Intelligence Reports -->
    <div v-if="activeTab === 'reports'" class="content-section">
      <div class="section-header">
        <h4><i class="fas fa-file-alt"></i> 情报报告</h4>
        <button class="btn btn-secondary btn-sm" @click="generateReport">
          <i class="fas fa-plus"></i> 生成报告
        </button>
      </div>
      <div class="reports-list">
        <div v-for="report in intelligenceReports" :key="report.id" 
             class="report-item" @click="openReport(report)">
          <div class="report-header">
            <span class="report-title">{{ report.title }}</span>
            <span class="report-date">{{ report.date }}</span>
          </div>
          <div class="report-content">
            <div class="report-summary">{{ report.summary }}</div>
            <div class="report-stats">
              <span><i class="fas fa-chart-bar"></i> 数据点: {{ report.dataPoints }}</span>
              <span><i class="fas fa-globe"></i> 覆盖地区: {{ report.regions }}</span>
              <span><i class="fas fa-chess"></i> 竞品: {{ report.competitors }}</span>
            </div>
          </div>
          <div class="report-actions">
            <button class="btn btn-sm btn-outline" @click.stop="viewReport(report)">
              <i class="fas fa-eye"></i> 查看
            </button>
            <button class="btn btn-sm btn-outline" @click.stop="downloadReport(report)">
              <i class="fas fa-download"></i> 下载
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Add Monitor Modal -->
    <div v-if="showAddMonitorModal" class="modal-overlay" @click.self="showAddMonitorModal = false">
      <div class="modal add-monitor-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 添加监控</div>
          <button class="modal-close" @click="showAddMonitorModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">监控类型 <span class="required">*</span></label>
            <select class="form-select" v-model="newMonitor.type">
              <option value="market">市场</option>
              <option value="competitor">竞品</option>
              <option value="product">产品</option>
              <option value="keyword">关键词</option>
              <option value="region">地区</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">监控对象 <span class="required">*</span></label>
            <input type="text" class="form-input" v-model="newMonitor.target" placeholder="输入市场名称、竞品名称等">
          </div>
          <div class="form-group">
            <label class="form-label">监控指标</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.metrics" value="price">
                <span class="checkmark"></span>
                <span>价格变动</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.metrics" value="news">
                <span class="checkmark"></span>
                <span>新闻动态</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.metrics" value="product">
                <span class="checkmark"></span>
                <span>产品发布</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.metrics" value="trend">
                <span class="checkmark"></span>
                <span>趋势变化</span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">通知频率</label>
            <select class="form-select" v-model="newMonitor.frequency">
              <option value="realtime">实时</option>
              <option value="daily">每日</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">通知方式</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.notifications" value="email">
                <span class="checkmark"></span>
                <span>邮件</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.notifications" value="wechat">
                <span class="checkmark"></span>
                <span>微信</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="newMonitor.notifications" value="system">
                <span class="checkmark"></span>
                <span>系统通知</span>
              </label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddMonitorModal = false">取消</button>
          <button class="btn btn-primary" @click="createMonitor">
            <i class="fas fa-check"></i> 创建监控
          </button>
        </div>
      </div>
    </div>

    <!-- Monitor Settings Modal -->
    <div v-if="showMonitorModal" class="modal-overlay" @click.self="showMonitorModal = false">
      <div class="modal monitor-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-cog"></i> 监控设置</div>
          <button class="modal-close" @click="showMonitorModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="settings-section">
            <h5>全局设置</h5>
            <div class="setting-item">
              <label class="setting-label">启用所有监控</label>
              <input type="checkbox" class="toggle-switch" v-model="globalSettings.enableAll">
            </div>
            <div class="setting-item">
              <label class="setting-label">通知提醒</label>
              <select class="form-select" v-model="globalSettings.notificationLevel">
                <option value="all">全部</option>
                <option value="important">仅重要</option>
                <option value="critical">仅紧急</option>
              </select>
            </div>
            <div class="setting-item">
              <label class="setting-label">数据更新频率</label>
              <select class="form-select" v-model="globalSettings.updateFrequency">
                <option value="realtime">实时</option>
                <option value="hourly">每小时</option>
                <option value="daily">每日</option>
              </select>
            </div>
          </div>
          <div class="settings-section">
            <h5>监控项目 ({{ monitoredItems.length }})</h5>
            <div class="monitored-summary">
              <div v-for="item in monitoredItems" :key="item.id" class="summary-item">
                <span class="item-name">{{ item.name }}</span>
                <input type="checkbox" class="toggle-switch" v-model="item.enabled">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showMonitorModal = false">关闭</button>
          <button class="btn btn-primary" @click="saveMonitorSettings">
            <i class="fas fa-save"></i> 保存设置
          </button>
        </div>
      </div>
    </div>

    <!-- Trend Analysis Modal -->
    <div v-if="showTrendModal" class="modal-overlay" @click.self="showTrendModal = false">
      <div class="modal trend-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-chart-line"></i> 趋势分析</div>
          <button class="modal-close" @click="showTrendModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="trend-controls">
            <select class="form-select" v-model="trendMetric">
              <option value="market">市场规模</option>
              <option value="growth">增长率</option>
              <option value="competition">竞争强度</option>
              <option value="demand">需求量</option>
            </select>
            <select class="form-select" v-model="trendPeriod">
              <option value="3m">3个月</option>
              <option value="6m">6个月</option>
              <option value="1y">1年</option>
              <option value="all">全部</option>
            </select>
          </div>
          <div class="trend-chart">
            <div class="chart-placeholder">
              <i class="fas fa-chart-line"></i>
              <p>趋势图表加载中...</p>
            </div>
          </div>
          <div class="trend-insights">
            <h5>趋势洞察</h5>
            <div class="insight-item">
              <span class="insight-label">最高增长:</span>
              <span class="insight-value">中东市场 +35%</span>
            </div>
            <div class="insight-item">
              <span class="insight-label">最快下降:</span>
              <span class="insight-value">南美市场 -8%</span>
            </div>
            <div class="insight-item">
              <span class="insight-label">最稳定:</span>
              <span class="insight-value">欧洲市场 ±2%</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showTrendModal = false">关闭</button>
          <button class="btn btn-primary" @click="exportTrendReport">
            <i class="fas fa-download"></i> 导出趋势报告
          </button>
        </div>
      </div>
    </div>

    <!-- Competitor News Detail Modal -->
    <div v-if="showCompetitorDetailModal" class="modal-overlay" @click.self="showCompetitorDetailModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-chess"></i> {{ selectedCompetitorDetail?.title }}
          </div>
          <button class="modal-close" @click="showCompetitorDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedCompetitorDetail">
          <div class="detail-section">
            <h5>基本信息</h5>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">竞品公司</span>
                <span class="value">{{ selectedCompetitorDetail.details.company }}</span>
              </div>
              <div class="info-item">
                <span class="label">动态标题</span>
                <span class="value">{{ selectedCompetitorDetail.details.title }}</span>
              </div>
              <div class="info-item">
                <span class="label">发生时间</span>
                <span class="value">{{ selectedCompetitorDetail.details.time }}</span>
              </div>
              <div class="info-item">
                <span class="label">重要程度</span>
                <span class="value" :class="selectedCompetitorDetail.details.level">{{ getLevelLabel(selectedCompetitorDetail.details.level) }}</span>
              </div>
              <div class="info-item">
                <span class="label">影响程度</span>
                <span class="value">{{ selectedCompetitorDetail.details.impact }}</span>
              </div>
              <div class="info-item">
                <span class="label">紧急程度</span>
                <span class="value danger">{{ selectedCompetitorDetail.details.urgency }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>动态描述</h5>
            <p class="reason-text">{{ selectedCompetitorDetail.details.description }}</p>
          </div>

          <div class="detail-section">
            <h5>风险分析</h5>
            <p class="reason-text">{{ selectedCompetitorDetail.details.analysis }}</p>
          </div>

          <div class="detail-section">
            <h5>影响范围</h5>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">影响市场</span>
                <span class="value">{{ selectedCompetitorDetail.details.affectedMarkets }}</span>
              </div>
              <div class="info-item">
                <span class="label">影响客户</span>
                <span class="value">{{ selectedCompetitorDetail.details.affectedCustomers }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>我们的竞争优势</h5>
            <div class="actions-list">
              <div v-for="(advantage, index) in selectedCompetitorDetail.details.ourAdvantage" :key="index" class="action-item">
                <i class="fas fa-check-circle"></i>
                <span>{{ advantage }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>应对建议</h5>
            <div class="suggestion-box">
              <i class="fas fa-lightbulb"></i>
              <p style="white-space: pre-line;">{{ selectedCompetitorDetail.details.recommendation }}</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showCompetitorDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="showCompetitorDetailModal = false">
            <i class="fas fa-check"></i> 已了解
          </button>
        </div>
      </div>
    </div>

    <!-- Market Risk Detail Modal -->
    <div v-if="showRiskDetailModal" class="modal-overlay" @click.self="showRiskDetailModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-exclamation-triangle"></i> {{ selectedRiskDetail?.title }}
          </div>
          <button class="modal-close" @click="showRiskDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedRiskDetail">
          <div class="detail-section">
            <h5>风险概况</h5>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">风险标题</span>
                <span class="value">{{ selectedRiskDetail.details.title }}</span>
              </div>
              <div class="info-item">
                <span class="label">风险等级</span>
                <span class="value danger">{{ selectedRiskDetail.details.level }}</span>
              </div>
              <div class="info-item">
                <span class="label">发生概率</span>
                <span class="value">{{ selectedRiskDetail.details.probability }}</span>
              </div>
              <div class="info-item">
                <span class="label">影响程度</span>
                <span class="value">{{ selectedRiskDetail.details.impact }}</span>
              </div>
              <div class="info-item">
                <span class="label">影响范围</span>
                <span class="value">{{ selectedRiskDetail.details.affectedRegions }}</span>
              </div>
              <div class="info-item">
                <span class="label">预计损失</span>
                <span class="value danger">{{ selectedRiskDetail.details.estimatedLoss }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>风险描述</h5>
            <p class="reason-text">{{ selectedRiskDetail.details.description }}</p>
          </div>

          <div class="detail-section">
            <h5>根本原因</h5>
            <p class="reason-text">{{ selectedRiskDetail.details.rootCause }}</p>
          </div>

          <div class="detail-section">
            <h5>影响产品</h5>
            <div class="actions-list">
              <div v-for="(product, index) in selectedRiskDetail.details.affectedProducts" :key="index" class="action-item">
                <i class="fas fa-box"></i>
                <span>{{ product }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>风险缓解措施</h5>
            <div class="actions-list">
              <div v-for="(measure, index) in selectedRiskDetail.details.mitigation" :key="index" class="action-item">
                <i class="fas fa-shield-alt"></i>
                <span>{{ measure }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h5>应急预案</h5>
            <div class="suggestion-box">
              <i class="fas fa-exclamation-circle"></i>
              <p style="white-space: pre-line;">{{ selectedRiskDetail.details.contingencyPlan }}</p>
            </div>
          </div>

          <div class="detail-section">
            <h5>监控信息</h5>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">当前状态</span>
                <span class="value">{{ selectedRiskDetail.details.status }}</span>
              </div>
              <div class="info-item">
                <span class="label">下次评审</span>
                <span class="value">{{ selectedRiskDetail.details.nextReview }}</span>
              </div>
              <div class="info-item">
                <span class="label">影响客户数</span>
                <span class="value">{{ selectedRiskDetail.details.affectedCustomers }}</span>
              </div>
              <div class="info-item">
                <span class="label">预计周期</span>
                <span class="value">{{ selectedRiskDetail.details.timeline }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showRiskDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="showRiskDetailModal = false">
            <i class="fas fa-check"></i> 已知悉
          </button>
        </div>
      </div>
    </div>
    <div v-if="showDetailModal" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-info-circle"></i> {{ selectedDetail?.title }}
          </div>
          <button class="modal-close" @click="showDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedDetail">
          <!-- Market Detail -->
          <div v-if="selectedDetail.type === 'market'" class="detail-content">
            <div class="detail-section">
              <h5>市场概况</h5>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">市场名称</span>
                  <span class="value">{{ selectedDetail.details.name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">预计增长</span>
                  <span class="value">{{ selectedDetail.details.growth }}</span>
                </div>
                <div class="info-item">
                  <span class="label">人口规模</span>
                  <span class="value">{{ selectedDetail.details.population }}</span>
                </div>
                <div class="info-item">
                  <span class="label">潜力指数</span>
                  <span class="value">{{ selectedDetail.details.score }}/100</span>
                </div>
                <div class="info-item">
                  <span class="label">市场规模</span>
                  <span class="value">{{ selectedDetail.details.marketSize }}</span>
                </div>
                <div class="info-item">
                  <span class="label">GDP增长</span>
                  <span class="value">{{ selectedDetail.details.gdpGrowth }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>主要产业</h5>
              <p class="reason-text">{{ selectedDetail.details.mainIndustries }}</p>
            </div>

            <div class="detail-section">
              <h5>关键参与者</h5>
              <p class="reason-text">{{ selectedDetail.details.keyPlayers }}</p>
            </div>

            <div class="detail-section">
              <h5>市场机会</h5>
              <div class="actions-list">
                <div v-for="(opp, index) in selectedDetail.details.opportunities" :key="index" class="action-item">
                  <i class="fas fa-star"></i>
                  <span>{{ opp }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>市场风险</h5>
              <div class="actions-list">
                <div v-for="(risk, index) in selectedDetail.details.risks" :key="index" class="action-item danger">
                  <i class="fas fa-exclamation-circle"></i>
                  <span>{{ risk }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>建议</h5>
              <div class="suggestion-box">
                <i class="fas fa-lightbulb"></i>
                <p>{{ selectedDetail.details.recommendation }}</p>
              </div>
            </div>
          </div>

          <!-- Opportunity Detail -->
          <div v-if="selectedDetail.type === 'opportunity'" class="detail-content">
            <div class="detail-section">
              <h5>机会概况</h5>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">市场</span>
                  <span class="value">{{ selectedDetail.details.market }}</span>
                </div>
                <div class="info-item">
                  <span class="label">产品</span>
                  <span class="value">{{ selectedDetail.details.product }}</span>
                </div>
                <div class="info-item">
                  <span class="label">潜力等级</span>
                  <span class="value" :class="selectedDetail.details.potential">{{ selectedDetail.details.potential }}</span>
                </div>
                <div class="info-item">
                  <span class="label">评分</span>
                  <span class="value">{{ selectedDetail.details.score }}/100</span>
                </div>
                <div class="info-item">
                  <span class="label">市场规模</span>
                  <span class="value">{{ selectedDetail.details.marketSize }}</span>
                </div>
                <div class="info-item">
                  <span class="label">竞争强度</span>
                  <span class="value">{{ selectedDetail.details.competition }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>市场洞察</h5>
              <p class="reason-text">{{ selectedDetail.details.insight }}</p>
            </div>

            <div class="detail-section">
              <h5>进入策略</h5>
              <div class="suggestion-box">
                <i class="fas fa-map-marker-alt"></i>
                <p style="white-space: pre-line;">{{ selectedDetail.details.entryStrategy }}</p>
              </div>
            </div>

            <div class="detail-section">
              <h5>投资信息</h5>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">市场增长</span>
                  <span class="value">{{ selectedDetail.details.marketGrowth }}</span>
                </div>
                <div class="info-item">
                  <span class="label">目标客户</span>
                  <span class="value">{{ selectedDetail.details.targetCustomers }}</span>
                </div>
                <div class="info-item">
                  <span class="label">进入周期</span>
                  <span class="value">{{ selectedDetail.details.timeline }}</span>
                </div>
                <div class="info-item">
                  <span class="label">投资需求</span>
                  <span class="value">{{ selectedDetail.details.investmentRequired }}</span>
                </div>
                <div class="info-item">
                  <span class="label">预期ROI</span>
                  <span class="value">{{ selectedDetail.details.expectedROI }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Trend Detail -->
          <div v-if="selectedDetail.type === 'trend'" class="detail-content">
            <div class="detail-section">
              <h5>话题概况</h5>
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">话题</span>
                  <span class="value">{{ selectedDetail.details.title }}</span>
                </div>
                <div class="info-item">
                  <span class="label">分类</span>
                  <span class="value">{{ selectedDetail.details.category }}</span>
                </div>
                <div class="info-item">
                  <span class="label">热度</span>
                  <span class="value">{{ selectedDetail.details.heat }}/100</span>
                </div>
                <div class="info-item">
                  <span class="label">提及数</span>
                  <span class="value">{{ selectedDetail.details.mentions }}</span>
                </div>
                <div class="info-item">
                  <span class="label">增长率</span>
                  <span class="value">{{ selectedDetail.details.growth }}%</span>
                </div>
                <div class="info-item">
                  <span class="label">相关产品</span>
                  <span class="value">{{ selectedDetail.details.relatedProducts }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>话题描述</h5>
              <p class="reason-text">{{ selectedDetail.details.description }}</p>
            </div>

            <div class="detail-section">
              <h5>关键洞察</h5>
              <div class="actions-list">
                <div v-for="(insight, index) in selectedDetail.details.keyInsights" :key="index" class="action-item">
                  <i class="fas fa-lightbulb"></i>
                  <span>{{ insight }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>业务影响</h5>
              <div class="suggestion-box">
                <i class="fas fa-chart-line"></i>
                <p>{{ selectedDetail.details.businessImplication }}</p>
              </div>
            </div>

            <div class="detail-section">
              <h5>建议行动</h5>
              <div class="actions-list">
                <div v-for="(action, index) in selectedDetail.details.actionItems" :key="index" class="action-item">
                  <i class="fas fa-check-circle"></i>
                  <span>{{ action }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h5>信息来源</h5>
              <div class="sources-list">
                <span v-for="source in selectedDetail.details.sources" :key="source" class="source-tag">{{ source }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDetailModal = false">关闭</button>
          <button class="btn btn-primary" @click="trackOpportunity(selectedDetail.data)" v-if="selectedDetail?.type === 'opportunity'">
            <i class="fas fa-star"></i> 跟踪机会
          </button>
        </div>
      </div>
    </div>
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const activeTab = ref('overview')
const searchQuery = ref('')
const filterRegion = ref('')
const sortBy = ref('latest')
const opportunityFilter = ref('')
const showAddMonitorModal = ref(false)
const showMonitorModal = ref(false)
const showTrendModal = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
const showDetailModal = ref(false)
const selectedDetail = ref(null)
const showCompetitorDetailModal = ref(false)
const selectedCompetitorDetail = ref(null)
const showRiskDetailModal = ref(false)
const selectedRiskDetail = ref(null)

// Trend modal
const trendMetric = ref('market')
const trendPeriod = ref('6m')

// New monitor form
const newMonitor = ref({
  type: 'market',
  target: '',
  metrics: [],
  frequency: 'daily',
  notifications: []
})

// Global settings
const globalSettings = ref({
  enableAll: true,
  notificationLevel: 'important',
  updateFrequency: 'daily'
})

// Tabs
const tabs = [
  { key: 'overview', label: '概览', count: 0 },
  { key: 'trends', label: '热点话题', count: 12 },
  { key: 'monitored', label: '监控项目', count: 8 },
  { key: 'reports', label: '情报报告', count: 5 }
]

// Stats
const activeMarkets = 5
const monitoredCompetitors = 12
const newCompetitorNews = 3
const marketOpportunities = ref([])
const highPotentialCount = 4
const marketRisks = ref([])
const criticalRisks = 1
const trendingTopics = ref([])

// Hot Markets
const hotMarkets = ref([
  { id: 1, name: '中东地区', growth: '预计增长35%', population: '4.2亿', score: 95, trend: 'up', region: 'middle-east' },
  { id: 2, name: '东南亚', growth: '预计增长28%', population: '6.8亿', score: 88, trend: 'up', region: 'asia' },
  { id: 3, name: '北美市场', growth: '预计增长18%', population: '5.7亿', score: 82, trend: 'up', region: 'america' },
  { id: 4, name: '欧洲', growth: '预计增长12%', population: '7.4亿', score: 75, trend: 'flat', region: 'europe' },
  { id: 5, name: '南美', growth: '预计增长8%', population: '4.3亿', score: 68, trend: 'down', region: 'america' }
])

// Competitor News
const competitorNews = ref([
  { id: 1, title: '三星发布新品', company: '三星', description: '三星发布新一代990 Pro SSD，性能提升40%，建议更新话术', time: '2小时前', level: 'danger', impact: '高' },
  { id: 2, title: '西部数据降价', company: '西部数据', description: '西部数据企业级SSD降价10%，需关注竞争压力', time: '昨天', level: 'warning', impact: '中' },
  { id: 3, title: '英特尔新产品线', company: '英特尔', description: '英特尔推出新的数据中心存储解决方案', time: '3天前', level: 'info', impact: '中' },
  { id: 4, title: '美光收购案', company: '美光', description: '美光收购存储技术公司，扩大产品线', time: '1周前', level: 'info', impact: '低' },
  { id: 5, title: 'SK海力士投资', company: 'SK海力士', description: 'SK海力士在韩国投资新工厂，产能提升30%', time: '1周前', level: 'warning', impact: '中' }
])

// Market Opportunities
marketOpportunities.value = [
  { id: 1, icon: '🇸🇦', market: '沙特阿拉伯', product: '企业级SSD', insight: '政府数字化采购增加，Vision 2030计划推动', potential: 'high', marketSize: '¥2.5B', competition: '低', score: 92 },
  { id: 2, icon: '🇦🇪', market: '阿联酋', product: '数据中心存储', insight: '迪拜数据中心扩建，云计算需求增长', potential: 'high', marketSize: '¥1.8B', competition: '中', score: 88 },
  { id: 3, icon: '🇸🇬', market: '新加坡', product: '云存储方案', insight: '东南亚云计算中心，区域枢纽地位', potential: 'medium', marketSize: '¥1.2B', competition: '高', score: 75 },
  { id: 4, icon: '🇩🇪', market: '德国', product: '工业级存储', insight: '工业4.0需求增长，制造业升级', potential: 'medium', marketSize: '¥2.1B', competition: '高', score: 72 },
  { id: 5, icon: '🇮🇳', market: '印度', product: '消费级SSD', insight: '互联网用户增长，数据中心建设加速', potential: 'high', marketSize: '¥3.2B', competition: '中', score: 85 },
  { id: 6, icon: '🇧🇷', market: '巴西', product: '企业存储', insight: '拉美最大经济体，数字化转型机会', potential: 'medium', marketSize: '¥0.9B', competition: '低', score: 68 }
]

// Market Risks
marketRisks.value = [
  { id: 1, title: '芯片供应链风险', level: 'critical', description: '全球芯片短缺可能持续，影响产品交期', affectedRegions: '全球' },
  { id: 2, title: '贸易政策变化', level: 'high', description: '美国对华芯片出口管制升级，可能影响供应链', affectedRegions: '中东、亚洲' },
  { id: 3, title: '汇率波动', level: 'medium', description: '美元升值可能增加采购成本', affectedRegions: '新兴市场' },
  { id: 4, title: '竞争加剧', level: 'medium', description: '新进入者增加，价格竞争压力上升', affectedRegions: '全球' }
]

// Trending Topics
trendingTopics.value = [
  { id: 1, category: '技术趋势', title: 'AI芯片需求爆发', description: '生成式AI应用推动高性能芯片需求', heat: 95, mentions: 2847, growth: 45, relatedProducts: 'GPU、高端SSD', sources: ['TechCrunch', '36氪', 'VentureBeat'] },
  { id: 2, category: '市场动态', title: '云计算市场扩张', description: '企业上云加速，数据中心投资增加', heat: 88, mentions: 2156, growth: 32, relatedProducts: '企业级存储', sources: ['Gartner', 'IDC', '云计算周刊'] },
  { id: 3, category: '政策导向', title: '数据安全法规', description: '各国加强数据隐私保护法规', heat: 82, mentions: 1923, growth: 28, relatedProducts: '安全存储', sources: ['政策新闻', '法律周刊'] },
  { id: 4, category: '产业动向', title: '绿色存储', description: '低功耗、环保存储产品受关注', heat: 76, mentions: 1654, growth: 22, relatedProducts: '节能SSD', sources: ['ESG报告', '环保新闻'] },
  { id: 5, category: '竞争格局', title: '存储芯片整合', description: '大型厂商并购小型创新公司', heat: 71, mentions: 1432, growth: 18, relatedProducts: '全线产品', sources: ['并购新闻', '行业分析'] },
  { id: 6, category: '应用创新', title: '边缘计算存储', description: '边缘计算场景对存储的新需求', heat: 68, mentions: 1289, growth: 15, relatedProducts: '边缘存储', sources: ['技术博客', '行业论坛'] }
]

// Monitored Items
const monitoredItems = ref([
  { id: 1, type: 'competitor', name: '三星电子', description: '监控三星SSD产品线动态和价格变化', lastUpdate: '2小时前', frequency: '实时', notifications: 3, status: 'active', enabled: true },
  { id: 2, type: 'market', name: '中东市场', description: '监控中东地区市场规模和增长趋势', lastUpdate: '1天前', frequency: '每日', notifications: 1, status: 'active', enabled: true },
  { id: 3, type: 'product', name: 'NVMe SSD', description: '监控NVMe SSD产品类别的市场动态', lastUpdate: '3小时前', frequency: '实时', notifications: 5, status: 'active', enabled: true },
  { id: 4, type: 'keyword', name: '数据中心', description: '监控"数据中心"相关新闻和趋势', lastUpdate: '2小时前', frequency: '每日', notifications: 2, status: 'active', enabled: true },
  { id: 5, type: 'competitor', name: '西部数据', description: '监控西部数据产品和市场动向', lastUpdate: '1天前', frequency: '每日', notifications: 1, status: 'active', enabled: true },
  { id: 6, type: 'region', name: '东南亚', description: '监控东南亚地区市场机会和风险', lastUpdate: '1天前', frequency: '每周', notifications: 0, status: 'active', enabled: true },
  { id: 7, type: 'keyword', name: 'AI芯片', description: '监控AI芯片相关动态', lastUpdate: '2小时前', frequency: '实时', notifications: 8, status: 'active', enabled: true },
  { id: 8, type: 'product', name: '企业级存储', description: '监控企业级存储产品市场', lastUpdate: '3小时前', frequency: '每日', notifications: 2, status: 'active', enabled: true }
])

// Intelligence Reports
const intelligenceReports = ref([
  { id: 1, title: '2026年Q1市场情报报告', date: '2026-03-20', summary: '全球存储市场持续增长，中东和东南亚成为新增长极', dataPoints: 247, regions: 12, competitors: 8 },
  { id: 2, title: '竞品动态分析报告', date: '2026-03-15', summary: '三星、西部数据等主要竞品最新动向分析', dataPoints: 156, regions: 8, competitors: 5 },
  { id: 3, title: '市场机会评估报告', date: '2026-03-10', summary: '识别出6个高潜力市场机会，评估进入策略', dataPoints: 189, regions: 6, competitors: 12 },
  { id: 4, title: '风险预警报告', date: '2026-03-05', summary: '芯片供应链风险、贸易政策变化等关键风险分析', dataPoints: 98, regions: 15, competitors: 10 },
  { id: 5, title: '趋势分析报告', date: '2026-02-28', summary: 'AI芯片、云计算、绿色存储等热点趋势深度分析', dataPoints: 312, regions: 20, competitors: 15 }
])

// Computed
const filteredOpportunities = computed(() => {
  let result = marketOpportunities.value
  if (opportunityFilter.value) {
    result = result.filter(opp => opp.potential === opportunityFilter.value)
  }
  return result
})

// Methods
const getLevelLabel = (level) => {
  const map = { danger: '紧急', warning: '重要', info: '信息' }
  return map[level] || level
}

const filterByType = (type) => {
  toast(`查看${type}详情`, 'info')
}

const openMarketDetail = (market) => {
  selectedDetail.value = {
    type: 'market',
    title: `${market.name} - 市场详情`,
    data: market,
    details: {
      name: market.name,
      growth: market.growth,
      population: market.population,
      score: market.score,
      trend: market.trend,
      marketSize: '¥2.5B',
      gdpGrowth: '4.2%',
      mainIndustries: '石油、金融、电信、零售',
      keyPlayers: '沙特阿美、沙特电信、沙特银行',
      opportunities: [
        '政府数字化采购增加',
        'Vision 2030计划推动',
        '数据中心建设加速',
        '云计算需求增长'
      ],
      risks: [
        '地缘政治风险',
        '汇率波动',
        '贸易政策变化'
      ],
      recommendation: '中东市场潜力巨大，建议加大投入。重点关注沙特和阿联酋市场。'
    }
  }
  showDetailModal.value = true
}

const showMarketDetail = () => {
  toast('查看全部热门市场', 'info')
}

const showAllNews = () => {
  toast('查看全部竞品动态', 'info')
}

const showOpportunitiesDetail = () => {
  toast('查看全部市场机会', 'info')
}

const openOpportunityDetail = (opp) => {
  selectedDetail.value = {
    type: 'opportunity',
    title: `${opp.market} - 市场机会详情`,
    data: opp,
    details: {
      market: opp.market,
      product: opp.product,
      icon: opp.icon,
      insight: opp.insight,
      potential: opp.potential,
      marketSize: opp.marketSize,
      competition: opp.competition,
      score: opp.score,
      marketGrowth: '35%',
      targetCustomers: '50-100',
      entryStrategy: '1. 建立本地代理\n2. 参加行业展会\n3. 与当地企业合作\n4. 提供定制化解决方案',
      timeline: '6-12个月',
      investmentRequired: '¥500K-1M',
      expectedROI: '200-300%'
    }
  }
  showDetailModal.value = true
}

const trackOpportunity = (opp) => {
  toast(`已跟踪${opp.market}市场机会`, 'success')
}

const showRisksDetail = () => {
  toast('查看全部市场风险', 'info')
}

const handleRisk = (risk) => {
  toast(`查看${risk.title}的应对建议`, 'info')
}

const openTrendDetail = (topic) => {
  selectedDetail.value = {
    type: 'trend',
    title: `${topic.title} - 热点话题详情`,
    data: topic,
    details: {
      title: topic.title,
      category: topic.category,
      heat: topic.heat,
      mentions: topic.mentions,
      growth: topic.growth,
      relatedProducts: topic.relatedProducts,
      sources: topic.sources,
      description: topic.description,
      keyInsights: [
        '生成式AI应用推动高性能芯片需求',
        '数据中心投资增加，存储需求旺盛',
        '企业级应用对性能要求提高',
        '新兴市场云计算普及加速'
      ],
      businessImplication: '我们的高端SSD产品将受益于这一趋势，建议加大营销投入。',
      actionItems: [
        '推出AI优化的SSD产品',
        '加强与云计算厂商的合作',
        '开发针对性的营销方案',
        '建立技术领先的品牌形象'
      ]
    }
  }
  showDetailModal.value = true
}

const refreshTrends = () => {
  toast('正在刷新热点话题...', 'info')
  setTimeout(() => {
    toast('热点话题已更新', 'success')
  }, 1500)
}

const editMonitor = (item) => {
  toast(`编辑${item.name}监控`, 'info')
}

const removeMonitor = (item) => {
  toast(`已删除${item.name}监控`, 'success')
}

const createMonitor = () => {
  showAddMonitorModal.value = false
  toast('监控已创建', 'success')
}

const saveMonitorSettings = () => {
  showMonitorModal.value = false
  toast('监控设置已保存', 'success')
}

const exportTrendReport = () => {
  toast('趋势报告导出中...', 'success')
}

const exportIntelligence = () => {
  toast('情报报告导出中...', 'success')
}

const generateReport = () => {
  toast('正在生成情报报告...', 'info')
  setTimeout(() => {
    toast('情报报告已生成', 'success')
  }, 2000)
}

const openReport = (report) => {
  toast(`查看${report.title}`, 'info')
}

const viewReport = (report) => {
  toast(`查看${report.title}`, 'info')
}

const downloadReport = (report) => {
  toast(`${report.title}下载中...`, 'success')
}

const toast = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => { showToast.value = false }, 3000)
}

const openCompetitorNewsDetail = (news) => {
  selectedCompetitorDetail.value = {
    type: 'competitor-news',
    title: `${news.title} - 竞品动态详情`,
    data: news,
    details: {
      title: news.title,
      company: news.company,
      description: news.description,
      time: news.time,
      level: news.level,
      impact: news.impact,
      analysis: '竞品发布新产品，性能提升40%，价格下调15%。这可能对我们的市场份额造成3-5%的影响。',
      ourAdvantage: [
        '更好的客户服务',
        '更灵活的定制方案',
        '更强的技术支持',
        '更稳定的供应链'
      ],
      recommendation: '1. 立即评估竞品产品\n2. 分析我们的竞争优势\n3. 制定应对策略\n4. 加强客户沟通',
      affectedMarkets: '全球',
      affectedCustomers: '50-100',
      urgency: '高'
    }
  }
  showCompetitorDetailModal.value = true
}

const openMarketRiskDetail = (risk) => {
  selectedRiskDetail.value = {
    type: 'market-risk',
    title: `${risk.title} - 市场风险详情`,
    data: risk,
    details: {
      title: risk.title,
      description: risk.description,
      affectedRegions: risk.affectedRegions,
      level: risk.level,
      probability: '高',
      impact: '中等',
      rootCause: risk.rootCause || '全球芯片短缺持续，主要供应商产能受限',
      timeline: '3-6个月',
      affectedProducts: [
        'NVMe SSD 2TB',
        'SATA SSD 2TB',
        '企业级SSD 4TB'
      ],
      affectedCustomers: 45,
      estimatedLoss: '¥2-5M',
      mitigation: [
        '开发备用供应商',
        '增加库存储备',
        '优化生产计划',
        '与客户沟通交期调整',
        '寻求替代方案'
      ],
      contingencyPlan: '1. 启动备用供应商\n2. 加班生产\n3. 优先供应重点客户\n4. 提供替代产品方案',
      status: '监控中',
      nextReview: '2026-03-30'
    }
  }
  showRiskDetailModal.value = true
}
</script>

<style scoped>
.market-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.market-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.header-left { display: flex; flex-direction: column; gap: 4px; }
.data-title { font-size: 20px; font-weight: 600; }
.header-desc { font-size: 13px; color: var(--text-secondary); }
.header-actions { display: flex; gap: 8px; }

/* Stats Row */
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 12px; }
.stat-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.stat-icon.blue { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.stat-icon.purple { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.stat-icon.green { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.stat-icon.red { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.stat-icon.cyan { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.stat-content h3 { font-size: 18px; font-weight: 700; margin: 0; }
.stat-content p { font-size: 11px; color: var(--text-muted); margin: 0; }
.stat-trend { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(16, 185, 129, 0.2); color: var(--success); display: flex; align-items: center; gap: 4px; }
.stat-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.stat-badge.danger { background: rgba(239, 68, 68, 0.2); color: #EF4444; }

/* Tabs */
.tabs-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tabs { display: flex; gap: 4px; }
.tab-item { padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.tab-item:hover { background: var(--bg-hover); }
.tab-item.active { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; }
.tab-count { font-size: 11px; padding: 2px 6px; background: var(--bg-dark); border-radius: 10px; }
.tab-item.active .tab-count { background: var(--primary); color: white; }
.filter-controls { display: flex; gap: 8px; }
.search-input { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; width: 200px; }
.filter-select { padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.filter-select-sm { padding: 6px 10px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 12px; }

/* Content Section */
.content-section { flex: 1; overflow-y: auto; }

/* Overview Grid */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.card-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header h4 { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.section-header h4 i { color: var(--primary); }
.btn-link { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; }

/* Market List */
.market-list { display: flex; flex-direction: column; gap: 10px; }
.market-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-hover); border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.market-item:hover { background: rgba(99, 102, 241, 0.1); }
.rank-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.rank-badge.gold { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.rank-badge.silver { background: rgba(156, 163, 175, 0.2); color: #9CA3AF; }
.rank-badge.bronze { background: rgba(217, 119, 6, 0.2); color: #D97706; }
.market-info { flex: 1; min-width: 0; }
.market-name { font-size: 13px; font-weight: 600; }
.market-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 12px; }
.market-score { text-align: center; }
.score-value { font-size: 16px; font-weight: 700; }
.score-label { font-size: 10px; color: var(--text-muted); }
.market-indicators { }
.indicator { font-size: 12px; }
.indicator.up { color: var(--success); }
.indicator.down { color: #EF4444; }

/* News List */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item { padding: 12px; background: var(--bg-hover); border-radius: 10px; border-left: 3px solid var(--border); cursor: pointer; transition: all 0.2s; }
.news-item:hover { background: rgba(99, 102, 241, 0.1); }
.news-item.danger { border-left-color: #EF4444; }
.news-item.warning { border-left-color: #F59E0B; }
.news-item.info { border-left-color: #6366F1; }
.news-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.news-title { font-size: 13px; font-weight: 600; }
.news-level { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.news-level.danger { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.news-level.warning { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.news-level.info { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.news-content { margin-bottom: 8px; }
.news-company { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.news-description { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.news-footer { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }

/* Opportunities Section */
.opportunities-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.opportunities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.opportunity-card { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.opportunity-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.opportunity-card.high { border-left: 4px solid #10B981; }
.opportunity-card.medium { border-left: 4px solid #F59E0B; }
.opportunity-card.low { border-left: 4px solid #6366F1; }
.opp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.opp-icon { font-size: 24px; }
.opp-potential { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.opp-potential.high { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.opp-potential.medium { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.opp-potential.low { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.opp-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.opp-product { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.opp-insight { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 10px; }
.opp-metrics { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.metric { display: flex; align-items: center; gap: 4px; }
.opp-footer { display: flex; justify-content: space-between; align-items: center; }
.opp-score { font-size: 12px; font-weight: 600; }

/* Risks Section */
.risks-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.risks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.risk-card { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; padding: 16px; border-left: 4px solid var(--border); }
.risk-card.critical { border-left-color: #EF4444; }
.risk-card.high { border-left-color: #F59E0B; }
.risk-card.medium { border-left-color: #6366F1; }
.risk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.risk-title { font-size: 13px; font-weight: 600; }
.risk-level { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.risk-level.critical { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.risk-level.high { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.risk-level.medium { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.risk-description { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.risk-impact { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.impact-label { font-weight: 600; }
.impact-regions { color: var(--text-secondary); }
.risk-action { }

/* Trends Grid */
.trends-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.trend-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.trend-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.trend-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trend-tag { font-size: 10px; padding: 2px 8px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }
.trend-heat { font-size: 11px; padding: 2px 8px; border-radius: 10px; display: flex; align-items: center; gap: 4px; }
.trend-heat.hot { background: rgba(239, 68, 68, 0.2); color: #EF4444; }
.trend-heat.warm { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.trend-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.trend-description { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.trend-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.trend-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.source-tag { font-size: 10px; padding: 2px 8px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }

/* Monitored List */
.monitored-list { display: flex; flex-direction: column; gap: 12px; }
.monitored-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.monitored-item.competitor { border-left: 4px solid #8B5CF6; }
.monitored-item.market { border-left: 4px solid #6366F1; }
.monitored-item.product { border-left: 4px solid #10B981; }
.monitored-item.keyword { border-left: 4px solid #F59E0B; }
.monitored-item.region { border-left: 4px solid #06B6D4; }
.item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.item-type { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.item-type.competitor { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; }
.item-type.market { background: rgba(99, 102, 241, 0.2); color: #6366F1; }
.item-type.product { background: rgba(16, 185, 129, 0.2); color: #10B981; }
.item-type.keyword { background: rgba(245, 158, 11, 0.2); color: #F59E0B; }
.item-type.region { background: rgba(6, 182, 212, 0.2); color: #06B6D4; }
.item-name { font-size: 13px; font-weight: 600; flex: 1; }
.item-status { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: rgba(16, 185, 129, 0.2); color: #10B981; }
.item-content { margin-bottom: 10px; }
.item-description { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.item-metrics { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.item-actions { display: flex; gap: 8px; }

/* Reports List */
.reports-list { display: flex; flex-direction: column; gap: 12px; }
.report-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s; }
.report-item:hover { border-color: var(--primary); }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.report-title { font-size: 14px; font-weight: 600; }
.report-date { font-size: 11px; color: var(--text-muted); }
.report-content { margin-bottom: 10px; }
.report-summary { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.report-stats { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.report-actions { display: flex; gap: 8px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.add-monitor-modal { max-width: 500px; }
.monitor-modal { max-width: 600px; }
.trend-modal { max-width: 700px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.modal-close { width: 32px; height: 32px; background: var(--bg-hover); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border); }

/* Form */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.form-input, .form-select { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--primary); }
.required { color: var(--danger); }
.checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.checkbox-item input { width: 16px; height: 16px; }
.checkmark { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.checkbox-item input:checked ~ .checkmark { background: var(--primary); border-color: var(--primary); color: white; }

/* Settings */
.settings-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.settings-section h5 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.setting-label { font-size: 12px; }
.toggle-switch { width: 40px; height: 24px; border-radius: 12px; background: var(--bg-hover); border: 1px solid var(--border); cursor: pointer; }
.monitored-summary { display: flex; flex-direction: column; gap: 8px; }
.summary-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 12px; }

/* Trend Controls */
.trend-controls { display: flex; gap: 12px; margin-bottom: 20px; }
.trend-chart { height: 200px; background: var(--bg-hover); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.chart-placeholder { text-align: center; color: var(--text-muted); }
.chart-placeholder i { font-size: 32px; margin-bottom: 8px; }
.trend-insights { }
.trend-insights h5 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.insight-item { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 12px; margin-bottom: 8px; }
.insight-label { color: var(--text-muted); }
.insight-value { font-weight: 600; }

/* Detail Content */
.detail-content { }
.detail-section { margin-bottom: 24px; }
.detail-section h5 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.info-item .label { font-size: 11px; color: var(--text-muted); }
.info-item .value { font-size: 14px; font-weight: 600; }
.info-item .value.high { color: #10B981; }
.info-item .value.medium { color: #F59E0B; }
.info-item .value.low { color: #6366F1; }
.reason-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.suggestion-box { display: flex; gap: 12px; padding: 14px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.suggestion-box i { color: var(--success); font-size: 18px; flex-shrink: 0; }
.suggestion-box p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.actions-list { display: flex; flex-direction: column; gap: 8px; }
.action-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 13px; }
.action-item i { color: var(--success); }
.action-item.danger i { color: #EF4444; }
.sources-list { display: flex; flex-wrap: wrap; gap: 8px; }
.source-tag { font-size: 11px; padding: 4px 10px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }

/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 2000; }
.toast.success { border-color: var(--success); }
.toast.success i { color: var(--success); }
.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(20px); }

/* Detail Modal Styles */
.detail-modal { max-width: 700px; }
.detail-content { }
.detail-section { margin-bottom: 24px; }
.detail-section h5 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.info-item .label { font-size: 11px; color: var(--text-muted); }
.info-item .value { font-size: 14px; font-weight: 600; }
.info-item .value.high { color: #10B981; }
.info-item .value.medium { color: #F59E0B; }
.info-item .value.low { color: #6366F1; }
.reason-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; padding: 12px; background: var(--bg-hover); border-radius: 8px; }
.suggestion-box { display: flex; gap: 12px; padding: 14px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; }
.suggestion-box i { color: var(--success); font-size: 18px; flex-shrink: 0; }
.suggestion-box p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.actions-list { display: flex; flex-direction: column; gap: 8px; }
.action-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 13px; }
.action-item i { color: var(--success); }
.action-item.danger i { color: #EF4444; }
.sources-list { display: flex; flex-wrap: wrap; gap: 8px; }
.source-tag { font-size: 11px; padding: 4px 10px; background: var(--bg-hover); border-radius: 10px; color: var(--text-secondary); }

/* Responsive */
@media (max-width: 1400px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .opportunities-grid { grid-template-columns: repeat(2, 1fr); }
  .trends-grid { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .opportunities-grid { grid-template-columns: 1fr; }
}
</style>
