<template>
  <div class="card application-total-section">
    <div class="rounded-lg border border-gray-200 pb-2 mb-4">
      <div class="flex items-center mb-4 p-4">
        <span class="font-bold text-gray-800 text-lg">申请总次数 (银行+非银) {{ totalCount }}次</span>
      </div>
      
      <!-- Tab切换 -->
      <div class="px-4 mb-4">
        <van-tabs v-model:active="activeTab" color="var(--color-primary)">
          <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
            <div class="p-4">
              <!-- 银行机构 -->
              <BankInstitutionSection :data="data" :period="period.key" />
              
              <!-- 非银机构 -->
              <NBankInstitutionSection :data="data" :period="period.key" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
import BankInstitutionSection from './BankInstitutionSection.vue'
import NBankInstitutionSection from './NBankInstitutionSection.vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

const activeTab = ref(5) // 默认显示12个月

const periods = [
  { key: 'd7', label: '7天' },
  { key: 'd15', label: '15天' },
  { key: 'm1', label: '1个月' },
  { key: 'm3', label: '3个月' },
  { key: 'm6', label: '6个月' },
  { key: 'm12', label: '12个月' }
]

// 计算总申请次数（12个月）
const totalCount = computed(() => {
  const counts = getApplicationCounts(props.data, 'm12')
  return counts.total
})
</script>

<style scoped>
.card {
  background: #ffffff;
}
</style>


