<script setup lang="ts">
import { computed } from "vue";

import type { MarketWorkspaceData } from "../../../shared/api/market";
import EmptyState from "../../../shared/components/EmptyState.vue";

const props = defineProps<{ data: MarketWorkspaceData }>();
const levels = computed(() => props.data.items ?? []);
const overview = computed(() => props.data.overview ?? {});
const breadthTotal = computed(() => Number(overview.value.up_count ?? 0) + Number(overview.value.down_count ?? 0) + Number(overview.value.flat_count ?? 0));
const breadthRate = (value: unknown) => breadthTotal.value ? Number(value ?? 0) / breadthTotal.value * 100 : 0;
const conclusion = computed(() => {
  const samples = levels.value.reduce((sum, row) => sum + Number(row.count ?? 0), 0);
  const advanced = levels.value.reduce((sum, row) => sum + Number(row.advanced ?? 0), 0);
  const rate = advanced / Math.max(samples, 1) * 100;
  if (rate >= 40) return "连板晋级表现较强，短线接力保持活跃。";
  if (rate >= 20) return "连板晋级表现中性，结构分化较为明显。";
  return "连板晋级表现偏弱，市场兑现压力较高。";
});
</script>

<template>
  <header class="page-header market-page-header">
    <div><h1>涨停表现</h1><p class="page-subtitle">昨日涨停的晋级、兑现与断板 · 数据日期 {{ data.trade_date }}</p></div>
    <span v-if="data.message" class="tag warning">{{ data.message }}</span>
  </header>
  <section v-if="levels.length" class="performance-layout">
    <div class="performance-levels">
      <article v-for="level in levels" :key="String(level.level)" class="card performance-level-card">
        <header><strong>{{ level.level }}板</strong><span>{{ level.count }}只</span></header>
        <div class="performance-outcomes">
          <span><b class="up">{{ level.advanced }}</b>晋级</span><span><b class="up">{{ level.red }}</b>红盘</span><span><b>{{ level.broken }}</b>断板</span><span><b class="warning">{{ level.opened }}</b>炸板</span><span><b class="down">{{ level.limit_down }}</b>跌停</span>
        </div>
        <footer><span>晋级率 {{ level.advance_rate }}%</span><span>兑现率 {{ level.positive_rate }}%</span><span>平均涨幅 {{ Number(level.average_change) > 0 ? "+" : "" }}{{ level.average_change }}%</span></footer>
      </article>
    </div>
    <aside class="card performance-conclusion"><header class="card-header"><h2>今日结论</h2></header><div class="card-body"><p>{{ conclusion }}</p><dl><div><dt>封板率</dt><dd>{{ overview.seal_rate }}%</dd></div><div><dt>涨停</dt><dd>{{ overview.limit_up }}家</dd></div><div><dt>炸板</dt><dd>{{ overview.broken }}家</dd></div><div><dt>跌停</dt><dd>{{ overview.limit_down }}家</dd></div></dl></div></aside>
  </section>
  <EmptyState v-else class="card" title="暂无昨日涨停样本" description="最近真实快照中没有可统计的昨日涨停记录。" />
  <section class="card breadth-card">
    <header class="card-header"><h2>市场宽度</h2><span class="faint">全市场上涨、平盘与下跌分布</span></header>
    <div class="breadth-body">
      <div class="breadth-legend"><span>上涨 <strong class="up">{{ overview.up_count }}</strong></span><span>平盘 <strong>{{ overview.flat_count }}</strong></span><span>下跌 <strong class="down">{{ overview.down_count }}</strong></span><span>红盘率 <strong>{{ breadthRate(overview.up_count).toFixed(1) }}%</strong></span></div>
      <div class="breadth-track" aria-label="市场宽度比例"><span class="breadth-up" :style="{ width: `${breadthRate(overview.up_count)}%` }"></span><span class="breadth-flat" :style="{ width: `${breadthRate(overview.flat_count)}%` }"></span><span class="breadth-down" :style="{ width: `${breadthRate(overview.down_count)}%` }"></span></div>
    </div>
  </section>
</template>
