<template>
  <div class="card institution-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">
              <!-- 银行机构 -->
              <BankOrgSection :data="data" :period="period.key" />
              
              <!-- 非银机构 -->
              <NBankOrgSection :data="data" :period="period.key" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
import BankOrgSection from './BankOrgSection.vue'
import NBankOrgSection from './NBankOrgSection.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 bankOrgs = getBankOrgDetails(props.data, 'm12')
  const nbankOrgs = getNBankOrgDetails(props.data, 'm12')
  const bankTotal = Object.values(bankOrgs).reduce((sum, val) => sum + (val || 0), 0)
  const nbankTotal = Object.values(nbankOrgs).reduce((sum, val) => sum + (val || 0), 0)
  return bankTotal + nbankTotal
})
</script>

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


