{% extends "base.html" %}
{% block title %}股票详情{% endblock %}
{% block page_title %}<span id="headName">加载中…</span>{% endblock %}
{% block content %}
<div class="card" id="headCard">
  <div class="flex between wrap">
    <div class="flex">
      <div>
        <div style="font-size:22px;font-weight:800"><span id="stName">—</span> <span id="stCode" style="color:var(--muted);font-size:15px"></span></div>
        <div class="mt8 flex" style="gap:14px;color:var(--muted);font-size:13px">
          <span id="stIndustry">—</span><span id="stBoard">—</span>
          <span>市值 <b id="stCap" style="color:var(--text)"></b></span>
          <span>PE <b id="stPe" style="color:var(--text)"></b></span>
          <span>PB <b id="stPb" style="color:var(--text)"></b></span>
        </div>
      </div>
      <div style="margin-left:28px">
        <div id="stPrice" class="num" style="font-size:32px;font-weight:800">—</div>
        <div class="flex mt8" style="gap:14px">
          <span id="stChg" class="num" style="font-weight:700">—</span>
          <span id="stChg5" class="num" style="font-size:13px;color:var(--muted)"></span>
          <span id="stChg20" class="num" style="font-size:13px;color:var(--muted)"></span>
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="card" style="padding:12px 18px;text-align:center">
        <div class="kpi-label" style="font-size:12px;color:var(--muted)">综合评分</div>
        <div class="score-wrap" style="justify-content:center;margin-top:4px">
          <div class="score-ring" id="ring"></div>
        </div>
        <div class="mt8"><span class="tag tag-观望" id="stRating">—</span></div>
      </div>
      <div style="display:flex;flex-direction:column;gap:8px;justify-content:center">
        <button class="btn btn-primary" id="watchBtn">⭐ 加入自选</button>
        <button class="btn" onclick="location.href='/?watch=1'">去仪表盘</button>
      </div>
    </div>
  </div>
  <div class="mt16 kpi-grid" id="kpiBox"></div>
  <div class="mt16" id="reasonBox" style="color:var(--text2);line-height:1.9"></div>
</div>

<div class="grid grid-2-1 mt16">
  <div class="card">
    <div class="card-title"><span class="bar"></span>K线走势（日线）</div>
    <div id="klineChart" style="height:420px"></div>
    <div class="flex mt8">
      <button class="btn" data-days="30">1月</button>
      <button class="btn" data-days="60">3月</button>
      <button class="btn btn-primary" data-days="120">半年</button>
      <button class="btn" data-days="180">1年</button>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="bar"></span>六因子评分</div>
    <div id="scoreBarsBox" class="mt8"></div>
    <div class="card-title mt16" style="font-size:14px"><span class="bar" style="background:var(--gold)"></span>评分说明</div>
    <div style="color:var(--text2);font-size:12px;line-height:1.9">
      趋势(25) 均线多头排列<br>动量(20) 5日涨幅<br>技术(15) RSI健康度<br>量能(10) 量比<br>消息(15) 近7日新闻情感<br>机构(15) 评级+持仓动向
    </div>
  </div>
</div>

<div class="card mt16">
  <div class="card-title"><span class="bar" style="background:var(--gold)"></span>AI 深度分析（RAG 增强）</div>
  <div class="input-group">
    <input class="input" id="focusInput" placeholder="输入关注点，如：业绩预期 / 技术面 / 机构持仓（可选）" style="flex:1;min-width:220px">
    <button class="btn btn-primary" id="analyzeBtn">🤖 生成研报</button>
  </div>
  <div id="reportBox" class="mt16">
    <div class="empty">点击「生成研报」，系统将基于 新闻RAG检索 + 技术指标 + 机构数据 调用 DeepSeek 生成结构化研报（首次生成约需 30-90 秒）</div>
  </div>
  <div class="card-title mt16" style="font-size:14px"><span class="bar" style="background:var(--cyan)"></span>历史分析记录</div>
  <div id="historyBox"><div class="loading">加载中…</div></div>
</div>

<div class="card mt16">
  <div class="pill-bar" id="tabs">
    <button class="pill active" data-tab="news">相关新闻</button>
    <button class="pill" data-tab="ratings">机构评级</button>
    <button class="pill" data-tab="holdings">基金持仓</button>
    <button class="pill" data-tab="profile">公司概况</button>
  </div>
  <div id="tabBox"><div class="loading">加载中…</div></div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/stock_detail.js') }}"></script>
{% endblock %}