<template>
  <article :class="['commercial-metric-card', metric.status]">
    <header>
      <div>
        <span>{{ metric.category === 'contributionMargin' ? '合同代理口径' : '事实口径' }}</span>
        <h4>{{ metric.label }}</h4>
      </div>
      <em>{{ metric.statusLabel }}</em>
    </header>

    <div v-if="metric.values.length" class="commercial-metric-values">
      <div v-for="item in metric.values" :key="item.currency">
        <strong>{{ item.displayValue }}</strong>
        <small>{{ item.currency }} · {{ basisLabel(item.basis) }}</small>
      </div>
    </div>
    <div v-else-if="metric.ratios.length" class="commercial-metric-values ratio">
      <div v-for="item in metric.ratios" :key="item.currency">
        <strong>{{ item.displayValue }}</strong>
        <small>{{ item.currency }} · 净收益 {{ item.numeratorLabel }} / 收费 {{ item.denominatorLabel }}</small>
      </div>
    </div>
    <strong v-else class="commercial-unavailable-value">不可用</strong>

    <p>{{ metric.reason }}</p>
    <p v-if="metric.multiCurrency" class="commercial-currency-guard">
      <i class="mdi mdi-shield-check-outline" aria-hidden="true"></i>
      多币种按币种独立展示，未执行隐式汇率换算或合计。
    </p>
    <details v-if="metric.requiredInputs.length || metric.notes.length">
      <summary>{{ metric.status === 'unavailable' ? '查看缺失证据' : '查看口径说明' }}</summary>
      <ul>
        <li v-for="item in metric.requiredInputs" :key="`required-${item}`">待补：{{ item }}</li>
        <li v-for="item in metric.notes" :key="`note-${item}`">{{ item }}</li>
      </ul>
    </details>
  </article>
</template>

<script setup>
defineProps({
  metric: { type: Object, required: true }
})

const BASIS_LABELS = {
  verified_savings_ledger: '财务确认 Savings Ledger',
  contract_charge_proxy: '合同收费代理值',
  internal_cost_ledger: '内部成本事件台账',
  contract_contribution_proxy: '合同贡献代理值',
  customer_approved_labor_baseline: '客户批准工时基线'
}

function basisLabel(value) {
  return BASIS_LABELS[value] || String(value || '后端事实口径')
}
</script>
