<template>
  <view class="content">
    <view class="text-area">
      <text class="title"></text>
    </view>
    <div class="app-container">
    <div class="header-title" ref="searchHeightRef">
      <!-- <view class="title-line"></view> -->
      <text class="title-text">资产总览</text>
    </div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
          <uni-icons type="medal-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">净资产</div>
          <div class="num">{{ ((parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2) }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总负债</div>
          <div class="num">{{ ((parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2) * 1).toFixed(2)}}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="contact-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">人情欠款</div>
          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清贷款本息</div>
          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">信用卡已用额度</div>
          <div class="num">{{ creditBalance}}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="loop" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清分期本息</div>
          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
        </div>
      </div>
    </div>

<div class="header-con" v-show="auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
  <div class="item">
    <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
      <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
    </view>
    <div class="info-sum">
      <div class="title">储蓄卡余额</div>
      <div class="num">{{ debitBalance }}<span>元</span></div>
    </div>
  </div>
  <div class="item">
    <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
      <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
    </view>
    <div class="info-sum">
      <div class="title">储蓄账户余额</div>
      <div class="num">{{ debitTotalBalance }}<span>元</span></div>
    </div>
  </div>
</div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard','invest:creditQueryRecord:list')"  ref="searchHeightRef">
      <div class="item" v-show="auth.hasPermi('invest:creditCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
          <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">信用卡可用额度</div>
          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月硬查询</div>
          <div class="num">{{ lastSixMonths }}<span>次</span></div>
        </div>
      </div>
    </div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')"  ref="searchHeightRef">
  <div class="item">
    <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
      <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
    </view>
    <div class="info-sum">
      <div class="title">投资账户余额</div>
      <div class="num">{{ investBalance }}<span>元</span></div>
    </div>
  </div>
  <div class="item">
    <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
      <uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
    </view>
    <div class="info-sum">
      <div class="title">本月投资收益</div>
      <div class="num">{{ currentMonthInvest }}<span>元</span></div>
    </div>
  </div>
</div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月应还款</div>
          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月待还款</div>
          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
        </div>
      </div>
    </div>

    <div class="header-title" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">储蓄账户信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="vip-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">I类储蓄卡</div>
          <div class="num">{{ debitICount }}<span>张</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #89c4f4 0%, #4facfe 100%);">
          <uni-icons type="vip" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">II类储蓄卡</div>
          <div class="num">{{ debitIICount }}<span>张</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">
     <div class="item">
       <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
         <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
         <div class="title">储蓄账户余额</div>
         <div class="num">{{ debitTotalBalance }}<span>元</span></div>
       </div>
     </div>
     <div class="item">
       <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
         <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
       </view>
       <div class="info-sum">
         <div class="title">储蓄卡余额</div>
         <div class="num">{{ debitBalance }}<span>元</span></div>
       </div>
     </div>
   </div>
    <div class="header-con" v-show="(debitOnlineCount>0||storedValueCardCount>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
      <div class="item" v-show="debitOnlineCount>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="paperplane" size="24" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">网络账户</div>
          <div class="num">{{ debitOnlineCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item" v-show="debitOnlineCount>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">网络账户余额</div>
          <div class="num">{{ debitOnlineBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="(storedValueCardCount>0||storedValueCardBalance>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
      <div class="item" v-show="storedValueCardCount>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="gift-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">储值卡</div>
          <div class="num">{{ storedValueCardCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item" v-show="storedValueCardCount>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">储值卡余额</div>
          <div class="num">{{ storedValueCardBalance }}<span>元</span></div>
        </div>
      </div>
    </div>


    <div class="header-con" v-show="(medicalBalance>0||housingFundBalance>0)&&auth.hasPermi('invest:debitCard')"   ref="searchHeightRef">
      <div class="item" v-show="housingFundBalance>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">住房公积金余额</div>
          <div class="num">{{ housingFundBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item" v-show="medicalBalance>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="heart-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">职工医保余额</div>
          <div class="num">{{ medicalBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="(personalPensionBalance>0)&&auth.hasPermi('invest:debitCard')"  ref="searchHeightRef">
      <div class="item" v-show="personalPensionBalance>0&&auth.hasPermi('invest:debitCard')">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="settings-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">个人养老金余额</div>
          <div class="num">{{ personalPensionBalance }}<span>元</span></div>
        </div>
      </div>
    </div>

    <div class="header-title" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">信用卡信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="auth-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">信用卡总数</div>
          <div class="num">{{ creditCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
          <uni-icons type="plusempty" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总额度</div>
          <div class="num">{{ creditLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已使用额度</div>
          <div class="num">{{ creditBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #2d8f3c 100%);">
          <uni-icons type="plus-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">可用额度</div>
          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">信用卡使用率</div>
          <div class="num">{{ creditBillRate }}<span>%</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月账单</div>
          <div class="num">{{ currentCreditBill }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="redo" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月分期本息</div>
          <div class="num">{{ creditInstallment }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清分期</div>
          <div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清分期本息</div>
          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清分期本金</div>
          <div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
        </div>
      </div>
    </div>
     <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清分期利息</div>
          <div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清分期</div>
          <div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清分期本息</div>
          <div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清分期本金</div>
          <div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清分期利息</div>
          <div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">上月账单使用率</div>
          <div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">上月账单</div>
          <div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="bars" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月使用率</div>
          <div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月平均使用额度</div>
          <div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
        </div>
      </div>
    </div>

    <div class="header-title" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">借贷账户信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="home-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">贷款账户</div>
          <div class="num">{{ onlineLendCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清贷款本息</div>
          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="contact-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">人情账户</div>
          <div class="num">{{ peopleLendCount }}<span>人</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">人情欠款</div>
          <div class="num">{{ (parseFloat(peopleLendHistory) || 0) === 0 ? '0.00' : peopleLendHistory }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月应还款</div>
          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
         <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月已还款</div>
          <div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #ec407a 100%);">
          <uni-icons type="clock" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月待还款</div>
          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清贷款</div>
          <div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清贷款本金</div>
          <div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">未结清贷款利息</div>
          <div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
          <uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清贷款</div>
          <div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清贷款本金</div>
          <div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">已结清贷款利息</div>
          <div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">POS机信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="navigate-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">POS机</div>
          <div class="num">{{ posCount }}<span>台</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月刷卡次数</div>
          <div class="num">{{ currentMonthCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月刷卡金额</div>
          <div class="num">{{ currentMonthAmount }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当月刷卡手续费</div>
          <div class="num">{{ currentMonthCommission }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当年刷卡次数</div>
          <div class="num">{{ currentYearCount }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当年刷卡金额</div>
          <div class="num">{{ currentYearAmount }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">当年刷卡手续费</div>
          <div class="num">{{ currentYearCommission }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">累计刷卡次数</div>
          <div class="num">{{ accumulateCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">累计刷卡金额</div>
          <div class="num">{{ accumulateAmount }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">累计刷卡手续费</div>
          <div class="num">{{ accumulateCommission }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">投资账户信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">股票账户</div>
          <div class="num">{{ stocksCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">期货账户</div>
          <div class="num">{{ futuresCount }}<span>个</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">投资账户余额</div>
          <div class="num">{{ investBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">本月投资收益</div>
          <div class="num">{{ currentMonthInvest }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #2d8f3c 0%, #1b5e20 100%);">
          <uni-icons type="plus-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">本月投资盈利</div>
          <div class="num">{{ currentMonthIncome }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="minus-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">本月投资亏损</div>
          <div class="num">{{ currentMonthExpenses }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f59a23 0%, #f57c00 100%);">
          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总收益</div>
          <div class="num">{{ totalIncome }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">期货收益</div>
          <div class="num">{{ futuresIncome }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">股票收益</div>
          <div class="num">{{ stocksIncome }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <view class="title-line"></view>
      <text class="title-text">征信信息</text>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1月硬查询</div>
          <div class="num">{{ lastOneMonths }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近2月硬查询</div>
          <div class="num">{{ lastTwoMonths }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近3月硬查询</div>
          <div class="num">{{ lastThreeMonths }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月硬查询</div>
          <div class="num">{{ lastSixMonths }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近1年硬查询</div>
          <div class="num">{{ lastOneYears }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #f57c00 0%, #e65100 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近2年硬查询</div>
          <div class="num">{{ lastTwoYears }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #e64545 0%, #d32f2f 100%);">
          <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">总硬查询</div>
          <div class="num">{{ lastAllYears }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #2196f3 100%);">
          <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月个人查询</div>
          <div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近6月贷后管理</div>
          <div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #5b6cdb 0%, #4527a0 100%);">
          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">近2年贷后管理</div>
          <div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')"  ref="searchHeightRef">
      <div class="item">
        <view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #5b6cdb 100%);">
          <uni-icons type="settings" size="20" color="#ffffff"></uni-icons>
        </view>
        <div class="info-sum">
          <div class="title">贷后管理总数</div>
          <div class="num">{{ totalAfterLoan }}<span>次</span></div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</view>
      <!-- 悬停按钮刷新-->
      <refresh></refresh>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getPosAccountsInfo, getInvestAccountsInfo, getCreditReportInfo, getLendAccountsInfo, getCreditAccountsInfo, getDebitAccountsInfo } from '@/api/invest/accountAnalysis.js'
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
//POS机信息
const posCount = ref(0) //POS机总数
const currentMonthAmount = ref(0) //当月刷卡金额
const currentMonthCommission = ref(0) //当月刷卡手续费
const currentMonthCount = ref(0) //当月刷卡次数
const currentYearAmount = ref(0) //当年刷卡金额
const currentYearCommission = ref(0) //当年刷卡手续费
const currentYearCount = ref(0) //当年刷卡次数
const accumulateAmount = ref(0) //累计刷卡金额
const accumulateCommission = ref(0) //累计刷卡手续费
const accumulateCount = ref(0) //累计刷卡次数

//投资账户信息
const stocksCount = ref(0) //股票账户
const futuresCount = ref(0) //期货账户
const currentMonthInvest = ref(0) //当月收益
const currentMonthIncome = ref(0) //当月盈利
const currentMonthExpenses = ref(0) //当月亏损
const futuresIncome = ref(0) //期货收益
const totalIncome = ref(0) //投资总收益
const stocksIncome = ref(0) //股票收益
const investBalance = ref(0) //投资账户余额

//储蓄账户信息
const debitCount = ref(0) //储蓄卡总数
const debitICount = ref(0) //I类储蓄卡总数
const debitIICount = ref(0) //II类储蓄卡总数
const debitOnlineCount = ref(0) //网络账户总数
const storedValueCardCount = ref(0) //储值卡总数
const otherDebitCount = ref(0) //其他账户数
const storedValueCardBalance = ref(0) //储值卡余额
const housingFundBalance = ref(0) //公积金余额
const medicalBalance = ref(0) //医保余额
const debitOnlineBalance = ref(0) //网络账户余额
const personalPensionBalance = ref(0) //个人养老金余额
const otherDebitBalance = ref(0) //其他余额
const debitBalance = ref(0) //储蓄卡余额
const debitTotalBalance = ref(0) //储蓄账户余额

//借贷账户信息
const peopleLendHistory = ref(0) //人情借贷余额
const peopleLendCount = ref(0) //人情账户
const onlineLendCount = ref(0) //贷款账户
const unclearedOnlineDebtCount = ref(0) //未结清贷款账户数
const unClearedOnlineDebt = ref(0) //未结清贷款本息
const unClearedOnlineDebtPrinciple = ref(0) //未结清贷款本金
const unClearedOnlineDebtInterest = ref(0) //未结清贷款利息
const clearedOnlineDebtCount = ref(0) //已结清贷款账户数
const clearedOnlineDebt = ref(0) //已结清贷款本息
const clearedOnlineDebtPrinciple = ref(0) //已结清贷款本金
const clearedOnlineDebtInterest = ref(0) //已结清贷款利息
const dueOnlineDebt = ref(0) //本月应还贷款
const repaidOnlineDebt = ref(0) //本月已还贷款
const leftOnlineDebt = ref(0) //本月剩余应还贷款

//信用卡信息
const creditInstallmentHistory = ref(0)
const creditCount = ref(0) //信用卡数量
const currentCreditBill = ref(0)
const creditInstallment = ref(0)
const creditLimit = ref(0) //信用卡额度
const lastSixMonthUsedLimit = ref(0) //近6月使用额度
const lastSixMonthUsedRate = ref(0) //近6月使用率
const lastMonthUsedLimit = ref(0) //上月已用额度
const lastMonthUsedRate = ref(0) //上月使用率
const creditBalance = ref(0) //信用卡余额
const creditAvailableLimit = ref(0) //信用卡可用额度
const creditBillRate = ref(0) //信用卡使用率
const unclearedCreditInstallmentCount = ref(0) //未结清分期数量
const unclearedCreditInstallment = ref(0) //未结清分期本息
const unclearedCreditInstallmentPrinciple = ref(0) //未结清分期本金
const unclearedCreditInstallmentInterest = ref(0) //未结清分期利息
const clearedCreditInstallmentCount = ref(0) //已结清分期数量
const clearedCreditInstallmentDebt = ref(0) //已结清分期本息
const clearedCreditInstallmentPrinciple = ref(0) //已结清分期本金
const clearedCreditInstallmentInterest = ref(0) //已结清分期利息

//征信报告信息
const lastOneMonths = ref(0) //近1月硬查询
const lastTwoMonths = ref(0) //近2月硬查询
const lastThreeMonths = ref(0) //近3月硬查询
const lastSixMonths = ref(0) //近6月硬查询
const lastOneYears = ref(0) //近1年硬查询
const lastTwoYears = ref(0) //近2年硬查询
const lastAllYears = ref(0) //所有硬查询
const lastSixMonthQueryCount = ref(0) //近6月个人查询
const lastSixMonthsAfterLoan = ref(0) //近6月贷后管理
const lastTwoYearsAfterLoan = ref(0) //近2年贷后管理
const totalAfterLoan = ref(0) //总贷后管理

const getInvestAccountsInfoData = () => {
  getInvestAccountsInfo().then((res) => {
    stocksCount.value = res.data.stocksCount
    futuresCount.value = res.data.futuresCount
    totalIncome.value = res.data.totalIncome
    futuresIncome.value = res.data.futuresIncome
    stocksIncome.value = res.data.stocksIncome
    investBalance.value = res.data.investBalance
    currentMonthInvest.value = res.data.currentMonthInvest
    currentMonthIncome.value = res.data.currentMonthIncome
    currentMonthExpenses.value = res.data.currentMonthExpenses
  })
}

const getPosAccountsInfoData = () => {
  getPosAccountsInfo().then((res) => {
    posCount.value = res.data.posCount
    currentMonthAmount.value = res.data.currentMonthAmount
    currentMonthCommission.value = res.data.currentMonthCommission
    currentMonthCount.value = res.data.currentMonthCount
    currentYearAmount.value = res.data.currentYearAmount
    currentYearCommission.value = res.data.currentYearCommission
    currentYearCount.value = res.data.currentYearCount
    accumulateAmount.value = res.data.accumulateAmount
    accumulateCommission.value = res.data.accumulateCommission
    accumulateCount.value = res.data.accumulateCount
  })
}

const getCreditAccountsInfoData = () => {
  getCreditAccountsInfo().then((res) => {
    creditCount.value = res.data.creditCount
    currentCreditBill.value = res.data.currentCreditBill
    creditInstallment.value = res.data.creditInstallment
    creditLimit.value = res.data.creditLimit
    lastSixMonthUsedLimit.value = res.data.lastSixMonthUsedLimit
    lastSixMonthUsedRate.value = res.data.lastSixMonthUsedRate
    lastMonthUsedLimit.value = res.data.lastMonthUsedLimit
    lastMonthUsedRate.value = res.data.lastMonthUsedRate
    creditBalance.value = res.data.creditBalance
    creditAvailableLimit.value = res.data.creditAvailableLimit
    creditBillRate.value = res.data.creditBillRate
    unclearedCreditInstallmentCount.value = res.data.unclearedCreditInstallmentCount
    unclearedCreditInstallment.value = res.data.unclearedCreditInstallment
    unclearedCreditInstallmentPrinciple.value = res.data.unclearedCreditInstallmentPrinciple
    unclearedCreditInstallmentInterest.value = res.data.unclearedCreditInstallmentInterest
    clearedCreditInstallmentCount.value = res.data.clearedCreditInstallmentCount
    clearedCreditInstallmentDebt.value = res.data.clearedCreditInstallmentDebt
    clearedCreditInstallmentPrinciple.value = res.data.clearedCreditInstallmentPrinciple
    clearedCreditInstallmentInterest.value = res.data.clearedCreditInstallmentInterest
  })
}
const getLendAccountsInfoData = () => {
  getLendAccountsInfo().then((res) => {
    peopleLendCount.value = res.data.peopleLendCount
    onlineLendCount.value = res.data.onlineLendCount
    unClearedOnlineDebt.value = res.data.unClearedOnlineDebt
    creditInstallmentHistory.value = res.data.creditInstallmentHistory
    peopleLendHistory.value = res.data.peopleLendHistory
    unclearedOnlineDebtCount.value = res.data.unclearedOnlineDebtCount
    clearedOnlineDebtCount.value = res.data.clearedOnlineDebtCount
    clearedOnlineDebt.value = res.data.clearedOnlineDebt
    dueOnlineDebt.value = res.data.dueOnlineDebt
    repaidOnlineDebt.value = res.data.repaidOnlineDebt
    leftOnlineDebt.value = res.data.leftOnlineDebt
    unClearedOnlineDebtPrinciple.value = res.data.unClearedOnlineDebtPrinciple
    unClearedOnlineDebtInterest.value = res.data.unClearedOnlineDebtInterest
    clearedOnlineDebtPrinciple.value = res.data.clearedOnlineDebtPrinciple
    clearedOnlineDebtInterest.value = res.data.clearedOnlineDebtInterest
  })
}
const getCreditReportInfoData = () => {
  getCreditReportInfo().then((res) => {
    lastOneMonths.value = res.data.lastOneMonths
    lastTwoMonths.value = res.data.lastTwoMonths
    lastThreeMonths.value = res.data.lastThreeMonths
    lastSixMonths.value = res.data.lastSixMonths
    lastOneYears.value = res.data.lastOneYears
    lastTwoYears.value = res.data.lastTwoYears
    lastAllYears.value = res.data.lastAllYears
    lastSixMonthQueryCount.value = res.data.lastSixMonthQueryCount
    lastSixMonthsAfterLoan.value = res.data.lastSixMonthsAfterLoan
    lastTwoYearsAfterLoan.value = res.data.lastTwoYearsAfterLoan
    totalAfterLoan.value = res.data.totalAfterLoan
  })
}
const getDebitAccountsInfoData = () => {
  getDebitAccountsInfo().then((res) => {
    debitCount.value = res.data.debitCount
    debitICount.value = res.data.debitICount
    debitIICount.value = res.data.debitIICount
    debitOnlineCount.value = res.data.debitOnlineCount
    storedValueCardCount.value = res.data.storedValueCardCount
    debitBalance.value = res.data.debitBalance
    debitTotalBalance.value = res.data.debitTotalBalance
    debitOnlineBalance.value = res.data.debitOnlineBalance
    storedValueCardBalance.value = res.data.storedValueCardBalance
    housingFundBalance.value = res.data.housingFundBalance
    medicalBalance.value = res.data.medicalBalance
    personalPensionBalance.value = res.data.personalPensionBalance
    otherDebitBalance.value = res.data.otherDebitBalance
    otherDebitCount.value = res.data.otherDebitCount
  })
}

onMounted(() => {
  getInvestAccountsInfoData()
  getPosAccountsInfoData()
  getDebitAccountsInfoData()
  getCreditAccountsInfoData()
  getLendAccountsInfoData()
  getCreditReportInfoData()
})
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f5f7fa;
  padding: 0;
  overflow: visible;
  
  .header-title {
    display: flex;
    align-items: center;
    padding: 16rpx 24rpx;
    margin-bottom: 8rpx;
    background-color: #ffffff;
    
    &:first-child {
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    }
    
    .title-line {
      width: 6rpx;
      height: 32rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 3rpx;
      margin-right: 12rpx;
      flex-shrink: 0;
    }
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #2c3e50;
    }
  }
  
  .header-con {
    width: calc(100% - 32rpx);
    margin: 0 16rpx 8rpx 16rpx;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    gap: 12rpx;
    
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 20rpx 16rpx;
      transition: all 0.3s ease;
      border: 2rpx solid #e8edf3;
      border-radius: 16rpx;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      
      &:hover {
        border-color: #d0d7de;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      }
      
      &:active {
        transform: scale(0.98);
        opacity: 0.9;
      }
      
      .item-icon {
        width: 72rpx;
        height: 72rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
      }
      
      .info-sum {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .title {
          color: #7f8c8d;
          margin-bottom: 8rpx;
          font-size: 24rpx;
        }
        
        .num {
          color: #2c3e50;
          font-size: 32rpx;
          font-weight: 600;
          
          span, .unit {
            font-size: 20rpx;
            color: #95a5a6;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
}
</style>
