<template>
  <section class="application-budget-analysis" aria-label="预算分析">
    <div class="application-budget-analysis__head">
      <span><i class="mdi mdi-chart-donut"></i>预算分析</span>
      <strong v-if="analysis && !loading">{{ scoreLabel }}</strong>
    </div>

    <div v-if="loading" class="application-budget-analysis__state">正在读取预算管控模型...</div>
    <div v-else-if="error" class="application-budget-analysis__state danger">{{ error }}</div>
    <div v-else-if="analysis" class="application-budget-analysis__body">
      <div class="application-budget-analysis__metrics">
        <article v-for="metric in metrics" :key="metric.key">
          <span>{{ metric.label }}</span>
          <strong>{{ metric.value }}</strong>
        </article>
      </div>

      <div class="application-budget-analysis__summary">
        <div :class="['application-budget-score', analysis.risk_level || 'low']">
          <span>{{ analysis.score }}</span>
          <em>综合评分</em>
        </div>
        <p>{{ analysis.summary }}</p>
      </div>

      <div class="application-budget-analysis__lists">
        <div>
          <span>规则依据</span>
          <ul>
            <li v-for="item in analysis.basis" :key="item">{{ item }}</li>
          </ul>
        </div>
        <div>
          <span>模型建议</span>
          <ul>
            <li v-for="item in analysis.suggestions" :key="item">{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

import { fetchExpenseClaimBudgetAnalysis } from '../../services/reimbursements.js'

const props = defineProps({
  claimId: { type: String, default: '' }
})

const analysis = ref(null)
const loading = ref(false)
const error = ref('')

const scoreLabel = computed(() => {
  const labels = {
    recommended: '建议通过',
    caution: '谨慎通过',
    review: '需要复核',
    block: '不建议直接通过',
    reference: '参考口径'
  }
  return labels[String(analysis.value?.rating || '').trim()] || '模型建议'
})

const metrics = computed(() => {
  const metric = analysis.value?.metrics || {}
  return [
    { key: 'total', label: '当前预算额度', value: formatMoney(metric.total_amount) },
    { key: 'ratio', label: '此次费用占预算', value: formatPercent(metric.claim_amount_ratio) },
    { key: 'after', label: '审批后使用率', value: formatPercent(metric.after_usage_rate) },
    { key: 'available', label: '当前可用预算', value: formatMoney(metric.available_amount) }
  ]
})

watch(
  () => props.claimId,
  (claimId) => {
    loadAnalysis(claimId)
  },
  { immediate: true }
)

async function loadAnalysis(claimId) {
  const normalizedClaimId = String(claimId || '').trim()
  analysis.value = null
  error.value = ''
  if (!normalizedClaimId) {
    return
  }

  loading.value = true
  try {
    analysis.value = await fetchExpenseClaimBudgetAnalysis(normalizedClaimId)
  } catch (err) {
    error.value = err?.message || '预算分析加载失败，请稍后重试。'
  } finally {
    loading.value = false
  }
}

function formatMoney(value) {
  const amount = Number(value)
  if (!Number.isFinite(amount)) {
    return '待匹配'
  }
  return `${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} 元`
}

function formatPercent(value) {
  const amount = Number(value)
  if (!Number.isFinite(amount)) {
    return '0.00%'
  }
  return `${amount.toFixed(2)}%`
}
</script>

<style scoped>
.application-budget-analysis {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.application-budget-analysis__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.application-budget-analysis__head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
}

.application-budget-analysis__head i {
  color: var(--theme-primary-active);
  font-size: 18px;
}

.application-budget-analysis__head strong {
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(var(--theme-primary-rgb), .1);
  color: var(--theme-primary-active);
  font-size: 12px;
}

.application-budget-analysis__state {
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
}

.application-budget-analysis__state.danger {
  background: #fff1f2;
  color: #be123c;
}

.application-budget-analysis__body {
  display: grid;
  gap: 14px;
}

.application-budget-analysis__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.application-budget-analysis__metrics article {
  min-width: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.application-budget-analysis__metrics span,
.application-budget-analysis__lists span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.application-budget-analysis__metrics strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
}

.application-budget-analysis__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.application-budget-analysis__summary p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.7;
}

.application-budget-score {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eef6ff;
  color: #2563eb;
}

.application-budget-score.medium {
  background: #fff7ed;
  color: #c2410c;
}

.application-budget-score.high {
  background: #fff1f2;
  color: #be123c;
}

.application-budget-score span {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.application-budget-score em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.application-budget-analysis__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.application-budget-analysis__lists > div {
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.application-budget-analysis__lists ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #334155;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .application-budget-analysis__metrics,
  .application-budget-analysis__lists {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .application-budget-analysis__metrics,
  .application-budget-analysis__lists,
  .application-budget-analysis__summary {
    grid-template-columns: 1fr;
  }
}
</style>

