<template>
  <div class="gamma-card">
    <div class="gamma-title"><span>🏦</span> 借贷画像</div>
    <div class="loan-profile-grid">
      <div v-for="item in items" :key="item.label" class="loan-item">
        <div class="loan-icon" :class="item.color">{{ item.icon }}</div>
        <div>
          <div class="loan-text">{{ item.label }}</div>
          <div class="loan-value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { cellText } from '../reportHelper';

const props = defineProps({
  loanTotal: { type: Object, default: () => ({}) },
});

const items = computed(() => {
  const d = props.loanTotal || {};
  return [
    { label: '机构查询总次数', value: cellText(d.queryCount), icon: '📑', color: 'purple' },
    { label: '借贷机构数（2年内）', value: cellText(d.orgCount), icon: '🏢', color: 'green' },
    { label: '正常还款订单占比', value: cellText(d.repayRate), icon: '🤲', color: 'orange' },
    { label: '预估网贷授信额度', value: cellText(d.creditLimit), icon: '📄', color: 'pink' },
    { label: '网贷产品数', value: cellText(d.productCount), icon: '📦', color: 'red' },
    { label: '已结清订单数', value: cellText(d.settledCount), icon: '👤', color: 'blue' },
    { label: '借款总金额（2年内）', value: d.loanAmount != null ? `${d.loanAmount} 元` : '— 元', icon: '💴', color: 'orange' },
    { label: '逾期总金额（2年内）', value: cellText(d.overdueAmount), icon: '📄', color: 'pink' },
  ];
});
</script>

<style lang="scss" scoped>
.loan-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.loan-item {
  background: #f9fafc;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.loan-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.loan-icon.purple { background: #6c5ce7; }
.loan-icon.green { background: #00b894; }
.loan-icon.orange { background: #fdcb6e; }
.loan-icon.pink { background: #e84393; }
.loan-icon.red { background: #e74c3c; }
.loan-icon.blue { background: #3498db; }

.loan-text { font-size: 14px; line-height: 1.4; }
.loan-value { font-size: 16px; font-weight: 600; margin-top: 4px; }

@media (max-width: 768px) {
  .loan-profile-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
