{% extends "base.html" %}

{% block title %}我的持仓 · 慢慢看{% endblock %}

{% block content %}
<section class="band" x-data="kanHoldPage(window.KAN_HOLD)" x-cloak>
  <div class="band-title">
    <div>
      <strong>我的持仓</strong>
      <div class="meta">成本和数量只保存在本机，用于计算盈亏、仓位和价格位置。</div>
    </div>
    <div class="status-line">
      <label class="check">
        <input type="checkbox" x-model="masked">
        隐藏金额
      </label>
      <span class="meta">
        {% if hold.data_cutoff %}数据截止 {{ hold.data_cutoff }} · {% endif %}
        现价使用 {% if hold.price_mode == "realtime" %}盘中实时价{% elif hold.price_mode == "close" %}最近收盘价{% else %}暂无可用价格{% endif %}
      </span>
    </div>
  </div>

  <template x-if="!hold.ok">
    <div class="empty empty-action" role="alert">
      <strong x-text="hold.error || '持仓数据暂不可用'"></strong>
      <template x-if="hold.error === '持仓文件无法读取'">
        <span>请先备份 positions.json，再到数据设置查看数据目录。为避免覆盖原数据，本页已停止写入。</span>
      </template>
      <template x-if="hold.error !== '持仓文件无法读取'">
        <span>请稍后重新打开本页；当前页面已停止写入，不会改动本地持仓。</span>
      </template>
      <a x-show="hold.error === '持仓文件无法读取'" class="stock-link" href="{{ session_url(request, '/settings') }}">打开数据设置</a>
    </div>
  </template>

  <div x-show="hold.ok" class="summary-grid" aria-label="账户概览">
    <div class="summary-cell">
      <div class="field-label">总资产</div>
      <div class="field-value" x-text="formatMoney(hold.account.total_assets)"></div>
    </div>
    <div class="summary-cell">
      <div class="field-label">持仓市值</div>
      <div class="field-value" x-text="formatMoney(hold.account.total_market_value)"></div>
    </div>
    <div class="summary-cell">
      <div class="field-label">可用现金</div>
      <div class="field-value" x-text="formatMoney(hold.account.cash)"></div>
    </div>
    <div class="summary-cell">
      <div class="field-label">总仓位</div>
      <div class="field-value" x-text="formatPct(hold.account.total_position_pct)"></div>
      <div class="mini-track" x-show="hold.account.total_position_pct !== null">
        <span class="mini-dot" :style="`--pct: ${hold.account.total_position_pct || 0}%;`"></span>
      </div>
    </div>
  </div>

  <div x-show="hold.ok && hold.rows.length > 1" class="chart-section">
    <div class="toolbar"><strong>仓位分布</strong></div>
    <div id="hold-pie" class="chart" style="height:260px;" role="img" aria-label="持仓仓位分布饼图"></div>
  </div>

  <div x-show="hold.ok" class="entry-grid">
    <form class="entry-form" @submit.prevent="saveCash()">
      <div>
        <strong>更新可用现金</strong>
        <div class="meta">填 0 表示当前没有可用现金。</div>
      </div>
      <label for="hold-cash">现金金额（元）</label>
      <input id="hold-cash" type="number" min="0" step="0.01" inputmode="decimal" x-model="cashInput" required>
      <button class="primary" type="submit" :disabled="saving">保存现金</button>
    </form>

    <form class="entry-form" @submit.prevent="submitPosition()">
      <div>
        <strong x-text="editingCode ? '修改持仓' : '添加一只持仓'"></strong>
        <div class="meta">按券商当前显示的摊薄成本和持股数量录入。</div>
      </div>
      <div class="input-grid">
        <label for="hold-code">股票代码</label>
        <input id="hold-code" type="text" inputmode="numeric" maxlength="6" placeholder="例如 600519" x-model.trim="positionForm.code" :disabled="Boolean(editingCode)" required>
        <label for="hold-cost">持仓成本（元/股）</label>
        <input id="hold-cost" type="number" min="0.0001" step="0.0001" inputmode="decimal" x-model="positionForm.cost" required>
        <label for="hold-shares">持股数量（股）</label>
        <input id="hold-shares" type="number" min="1" step="1" inputmode="numeric" x-model="positionForm.shares" required>
      </div>
      <div class="controls">
        <button class="primary" type="submit" :disabled="saving" x-text="editingCode ? '保存修改' : '添加持仓'"></button>
        <button type="button" x-show="editingCode" @click="cancelEdit()">取消</button>
      </div>
    </form>
  </div>
  <div x-show="hold.ok" class="form-message" role="status" aria-live="polite" x-text="message"></div>

  <template x-if="hold.ok && hold.rows.length === 0">
    <div class="empty empty-action">
      <strong>还没有持仓记录</strong>
      <span>在上方录入第一只持仓后，这里会显示今日盈亏、累计盈亏、仓位和关键周期位置。</span>
    </div>
  </template>

  <div x-show="hold.ok && hold.rows.length > 0" class="table-wrap hold-results-table">
    <table>
      <thead>
        <tr>
          <th>名称代码</th>
          <th>成本</th>
          <th>股数</th>
          <th>现价</th>
          <th>今日盈亏</th>
          <th>累计盈亏</th>
          <th>仓位%</th>
          <th>30日位置%</th>
          <th>60日位置%</th>
          <th>180日位置%</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="row in hold.rows" :key="row.code">
          <tr class="static-row">
            <td>
              <span x-show="row.name !== row.code" x-text="row.name"></span>
              <span class="code" x-text="row.code"></span>
            </td>
            <td x-text="formatCost(row.cost)"></td>
            <td x-text="formatInt(row.shares)"></td>
            <td x-text="formatPrice(row.price)"></td>
            <td :class="pnlClass(row.daily_pnl)" x-text="formatPnl(row.daily_pnl, row.daily_pnl_pct)"></td>
            <td :class="pnlClass(row.total_pnl)" x-text="formatPnl(row.total_pnl, row.total_pnl_pct)"></td>
            <td x-text="formatPct(row.weight_pct)"></td>
            <td :class="positionClass(row.p30_pct)" x-text="formatPct(row.p30_pct)"></td>
            <td :class="positionClass(row.p60_pct)" x-text="formatPct(row.p60_pct)"></td>
            <td :class="positionClass(row.p180_pct)" x-text="formatPct(row.p180_pct)"></td>
            <td>
              <div class="row-actions">
                <button type="button" @click="startEdit(row)">修改</button>
                <button class="danger" type="button" @click="removePosition(row)">删除</button>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <div x-show="hold.ok && hold.rows.length > 0" class="hold-result-list">
    <template x-for="row in hold.rows" :key="row.code">
      <article class="find-result-card">
        <div class="find-result-heading">
          <strong><span x-show="row.name !== row.code" x-text="row.name"></span> <span class="code" x-text="row.code"></span></strong>
          <strong x-text="formatPrice(row.price)"></strong>
        </div>
        <div class="find-result-positions">
          <span>今日 <strong :class="pnlClass(row.daily_pnl)" x-text="formatPnl(row.daily_pnl, row.daily_pnl_pct)"></strong></span>
          <span>累计 <strong :class="pnlClass(row.total_pnl)" x-text="formatPnl(row.total_pnl, row.total_pnl_pct)"></strong></span>
          <span>仓位 <strong x-text="formatPct(row.weight_pct)"></strong></span>
        </div>
        <div class="find-result-positions">
          <span>30 日 <strong :class="positionClass(row.p30_pct)" x-text="formatPct(row.p30_pct)"></strong></span>
          <span>60 日 <strong :class="positionClass(row.p60_pct)" x-text="formatPct(row.p60_pct)"></strong></span>
          <span>180 日 <strong :class="positionClass(row.p180_pct)" x-text="formatPct(row.p180_pct)"></strong></span>
        </div>
        <div class="meta"><span x-text="`${formatInt(row.shares)} 股`"></span> · 成本 <span x-text="formatCost(row.cost)"></span></div>
        <div class="row-actions">
          <button type="button" @click="startEdit(row)">修改</button>
          <button class="danger" type="button" @click="removePosition(row)">删除</button>
        </div>
      </article>
    </template>
  </div>

  <div class="toolbar" x-show="hold.ok && hold.notes.length > 0">
    <template x-for="note in hold.notes" :key="note">
      <span class="meta" x-text="note"></span>
    </template>
  </div>

  <div class="toolbar" x-show="hold.ok && hold.rows.length > 0">
    <span class="meta" x-text="`共 ${hold.rows.length} 只持仓`"></span>
    <button type="button" @click="exportHoldCsv()">导出 CSV</button>
  </div>
</section>
{% endblock %}

{% block footer_extra %}<br>{{ hold_disclaimer }}{% endblock %}

{% block scripts %}
<script>
  window.KAN_HOLD = {{ hold|tojson }};
</script>
{% endblock %}