/* 总览视图 */
const DashboardView = {
  template: `
  <div class="space-y-5">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
      <div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
        <div class="text-xs text-slate-500">总资产</div>
        <div class="text-2xl font-bold mt-1">{{ store.overview.total || 0 }}</div>
      </div>
      <div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-red-200 dark:border-red-900/50">
        <div class="text-xs text-slate-500">30天内到期</div>
        <div class="text-2xl font-bold mt-1 text-red-600 dark:text-red-400">{{ store.overview.expiring_30 || 0 }}</div>
      </div>
      <div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-slate-200 dark:border-slate-800">
        <div class="text-xs text-slate-500">本年支出</div>
        <div class="text-2xl font-bold mt-1">{{ store.overview.year_cost || 0 }}</div>
      </div>
      <div class="bg-white dark:bg-slate-900 rounded-xl p-4 border border-amber-200 dark:border-amber-900/50">
        <div class="text-xs text-slate-500">异常状态</div>
        <div class="text-2xl font-bold mt-1 text-amber-600 dark:text-amber-400">{{ store.overview.abnormal_count || 0 }}</div>
      </div>
    </div>

    <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4" v-if="store.expiring.length">
      <h2 class="text-sm font-semibold mb-3">续费倒计时（30天内）</h2>
      <div class="space-y-2">
        <div v-for="a in store.expiring" :key="a.id" class="flex justify-between items-center px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800/50">
          <div class="min-w-0">
            <span class="font-medium text-sm truncate">{{ a.name }}</span>
            <span class="text-xs text-slate-400 ml-2">{{ a.provider_name || a.provider }}</span>
          </div>
          <span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.expiryBadge(a.days_to_expiry)">{{ a.days_to_expiry }}天 · {{ a.cost }}{{ a.currency }}</span>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
      <h2 class="text-sm font-semibold mb-3">按类型分布</h2>
      <div class="flex flex-wrap gap-2">
        <span v-for="(n, t) in store.overview.by_type" :key="t" class="text-xs px-3 py-1.5 rounded-lg" :class="Fmt.typeBadge(t)">{{ Fmt.TYPE_LABELS[t] }} {{ n }}</span>
        <span v-if="!store.overview.by_type || !Object.keys(store.overview.by_type).length" class="text-xs text-slate-400">暂无数据</span>
      </div>
    </div>
  </div>`,
  setup() { return { store, Fmt }; },
};