<template>
  <view class="big-screen">
    <uni-navbar :statusBar="true" leftIcon="left" title="资产大屏" @clickLeft="goBack" />
    
    <scroll-view scroll-y class="screen-scroll">
      <!-- 核心指标卡片 -->
      <view class="section">
        <view class="section-title">核心指标</view>
        <view class="metric-cards">
          <view class="metric-card primary">
            <view class="metric-label">净资产</view>
            <view class="metric-value">{{ Number(netAsset || 0).toFixed(2) }}<text>元</text></view>
          </view>
          <view class="metric-card">
            <view class="metric-label">总负债</view>
            <view class="metric-value danger">{{ Number(totalDebt || 0).toFixed(2) }}<text>元</text></view>
          </view>
          <view class="metric-card">
            <view class="metric-label">总资产</view>
            <view class="metric-value success">{{ Number(totalAsset || 0).toFixed(2) }}<text>元</text></view>
          </view>
          <view class="metric-card">
            <view class="metric-label">信用卡已用额度</view>
            <view class="metric-value danger">{{ Number(creditBalance || 0).toFixed(2) }}<text>元</text></view>
          </view>
          <view class="metric-card">
            <view class="metric-label">未结清贷款本息</view>
            <view class="metric-value danger">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<text>元</text></view>
          </view>
        </view>
      </view>
      <!-- 未结清分期及贷款 -->
      <view class="section" v-if="unclearedCreditInstallmentCount > 0 || unclearedOnlineDebtCount > 0">
        <view class="section-title">未结清分期及贷款</view>
        <view class="data-grid">
          <view class="data-item" v-if="unclearedCreditInstallmentCount > 0">
            <view class="data-label">未结清分期笔数</view>
            <view class="data-value danger">{{ unclearedCreditInstallmentCount }}笔</view>
          </view>
          <view class="data-item" v-if="unclearedCreditInstallmentCount > 0">
            <view class="data-label">未结清分期本金</view>
            <view class="data-value">{{ Number(unclearedCreditInstallmentPrinciple || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item" v-if="unclearedCreditInstallmentCount > 0">
            <view class="data-label">未结清分期利息</view>
            <view class="data-value">{{ Number(unclearedCreditInstallmentInterest || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item" v-if="unclearedOnlineDebtCount > 0">
            <view class="data-label">未结清贷款笔数</view>
            <view class="data-value danger">{{ unclearedOnlineDebtCount }}笔</view>
          </view>
          <view class="data-item" v-if="unclearedOnlineDebtCount > 0">
            <view class="data-label">未结清贷款本金</view>
            <view class="data-value">{{ Number(unClearedOnlineDebtPrinciple || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item" v-if="unclearedOnlineDebtCount > 0">
            <view class="data-label">未结清贷款利息</view>
            <view class="data-value">{{ Number(unClearedOnlineDebtInterest || 0).toFixed(2) }}元</view>
          </view>
        </view>
      </view>
            <!-- 账户信息统计 -->
      <view class="section">
        <view class="section-title">账户信息统计</view>
        <view class="data-grid">
          <view class="data-item">
            <view class="data-label">信用卡</view>
            <view class="data-value">{{ creditCount }}张</view>
          </view>
          <view class="data-item">
            <view class="data-label">I类储蓄卡</view>
            <view class="data-value">{{ debitICount }}张</view>
          </view>
          <view class="data-item">
            <view class="data-label">II类储蓄卡</view>
            <view class="data-value">{{ debitIICount }}张</view>
          </view>
          <view class="data-item">
            <view class="data-label">网络账户</view>
            <view class="data-value">{{ debitOnlineCount }}个</view>
          </view>
          <view class="data-item">
            <view class="data-label">储值卡</view>
            <view class="data-value">{{ storedValueCardCount }}张</view>
          </view>
          <view class="data-item">
            <view class="data-label">贷款账户</view>
            <view class="data-value">{{ onlineLendCount }}个</view>
          </view>
          <view class="data-item">
            <view class="data-label">人情账户</view>
            <view class="data-value">{{ peopleLendCount }}人</view>
          </view>
          <view class="data-item">
            <view class="data-label">POS机</view>
            <view class="data-value">{{ posCount }}台</view>
          </view>
          <view class="data-item">
            <view class="data-label">股票账户</view>
            <view class="data-value">{{ stocksCount }}个</view>
          </view>
          <view class="data-item">
            <view class="data-label">期货账户</view>
            <view class="data-value">{{ futuresCount }}个</view>
          </view>
          <view class="data-item">
            <view class="data-label">近3月硬查询</view>
            <view class="data-value">{{ lastThreeMonths }}次</view>
          </view>
          <view class="data-item">
            <view class="data-label">近6月硬查询</view>
            <view class="data-value">{{ lastSixMonths }}次</view>
          </view>
        </view>
      </view>
      <!-- 本月数据概览 -->
      <view class="section">
        <view class="section-title">本月数据概览</view>
        <view class="data-grid">
          <view class="data-item">
            <view class="data-label">收支差额</view>
            <view class="data-value" :class="monthlyBalance >= 0 ? 'success' : 'danger'">
              {{ Number(monthlyBalance || 0).toFixed(2) }}元
            </view>
          </view>
          <view class="data-item">
            <view class="data-label">总支出</view>
            <view class="data-value">{{ Number(monthlyTotalOutcome || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">工资收益</view>
            <view class="data-value">{{ Number(monthlySalaryIncome || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">投资收益</view>
            <view class="data-value">{{ Number(monthlyInvestIncome || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">日常支出</view>
            <view class="data-value">{{ Number(monthlyExpenses || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">手续费利息支出</view>
            <view class="data-value">{{ Number(monthlyNotDailyExpenses || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">信用卡账单</view>
            <view class="data-value">{{ Number(monthlyCreditBill || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">POS刷卡次数</view>
            <view class="data-value">{{ Number(monthlyPosCount || 0) }}次</view>
          </view>
          <view class="data-item">
            <view class="data-label">POS刷卡金额</view>
            <view class="data-value">{{ Number(monthlyPosAmount || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">POS刷卡手续费</view>
            <view class="data-value">{{ Number(monthlyPosFee || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">信用卡分期本息</view>
            <view class="data-value">{{ Number(monthlyCreditInstallment || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">信用卡分期本金</view>
            <view class="data-value">{{ Number(monthlyCreditInstallmentPrincipal || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">信用卡分期利息</view>
            <view class="data-value">{{ Number(monthlyCreditInstallmentInterest || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">信用卡可用额度</view>
            <view class="data-value">{{ Number(monthlyCreditAvailable || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">借贷应还本息</view>
            <view class="data-value">{{ Number(monthlyLendDue || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">借贷已还本息</view>
            <view class="data-value">{{ Number(monthlyLendRepaid || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">借贷利息</view>
            <view class="data-value">{{ Number(monthlyLendInterest || 0).toFixed(2) }}元</view>
          </view>
          <view class="data-item">
            <view class="data-label">借贷待还款</view>
            <view class="data-value">{{ Number(monthlyLendRepayment || 0).toFixed(2) }}元</view>
          </view>
        </view>
      </view>

      <!-- 资产结构图 -->
      <view class="section">
        <view class="section-title">资产结构占比</view>
        <view class="chart-container">
          <qiun-data-charts type="ring" :opts="assetChartOpts" :chartData="assetChartData" />
        </view>
      </view>

      <!-- 负债结构图 -->
      <view class="section" v-if="totalDebt > 0">
        <view class="section-title">负债结构占比</view>
        <view class="chart-container">
          <qiun-data-charts type="ring" :opts="debtChartOpts" :chartData="debtChartData" />
        </view>
      </view>

      <!-- 信用压力雷达图 -->
      <view class="section">
        <view class="section-title">信用压力分析</view>
        <view class="chart-container">
          <qiun-data-charts type="radar" :opts="radarChartOpts" :chartData="radarChartData" />
        </view>
      </view>

       <!-- 未来3个月贷款还款计划 -->
      <view class="section" v-if="lendRepaymentData.length > 0">
        <view class="section-title">未来3个月贷款还款计划</view>
        <view class="chart-stat" style="color: #ef4444;">待还总计: {{ lendRepaymentTotal.toFixed(2) }}元</view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="lendRepaymentChartOpts" :chartData="lendRepaymentChartData" />
        </view>
      </view>

            <!-- 近一周/近一月日常支出 -->
      <view class="section">
        <view class="section-title">{{ expenseActiveTab === 'week' ? '近7天' : '近30天' }}日常支出</view>
        <view class="chart-stat" style="color: #f59e0b;">支出总计: {{ currentExpenseTotal.toFixed(2) }}元</view>
        <view class="tab-buttons">
          <view 
            class="tab-btn" 
            :class="{ active: expenseActiveTab === 'week' }"
            @click="expenseActiveTab = 'week'">
            近一周
          </view>
          <view 
            class="tab-btn" 
            :class="{ active: expenseActiveTab === 'month' }"
            @click="expenseActiveTab = 'month'">
            近一月
          </view>
        </view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="expenseChartOpts" :chartData="expenseChartData" />
        </view>
      </view>
      
      <!-- 近一周/近一月投资收益 -->
      <view class="section">
        <view class="section-title">{{ investActiveTab === 'week' ? '近7天' : '近30天' }}投资收益</view>
        <view class="chart-stat" :style="{ color: currentInvestTotal >= 0 ? '#10b981' : '#ef4444' }">收益总计: {{ currentInvestTotal >= 0 ? '+' : '' }}{{ currentInvestTotal.toFixed(2) }}元</view>
        <view class="tab-buttons">
          <view 
            class="tab-btn" 
            :class="{ active: investActiveTab === 'week' }"
            @click="investActiveTab = 'week'">
            近一周
          </view>
          <view 
            class="tab-btn" 
            :class="{ active: investActiveTab === 'month' }"
            @click="investActiveTab = 'month'">
            近一月
          </view>
        </view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="investChartOpts" :chartData="investChartData" />
        </view>
      </view>

       <!-- 近一周/近一月账户收支统计 -->
      <view class="section">
        <view class="section-title">{{ balanceActiveTab === 'week' ? '近7天' : '近30天' }}账户收支统计</view>
        <view class="chart-stat" :style="{ color: balanceTotal >= 0 ? '#10b981' : '#ef4444' }">收支差额: {{ balanceTotal >= 0 ? '+' : '' }}{{ balanceTotal.toFixed(2) }}元</view>
        <view class="tab-buttons">
          <view 
            class="tab-btn" 
            :class="{ active: balanceActiveTab === 'week' }"
            @click="balanceActiveTab = 'week'">
            近一周
          </view>
          <view 
            class="tab-btn" 
            :class="{ active: balanceActiveTab === 'month' }"
            @click="balanceActiveTab = 'month'">
            近一月
          </view>
        </view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="balanceChartOpts" :chartData="balanceChartData" />
        </view>
      </view>

      <!-- 近一年信用卡账单统计 -->
      <view class="section" v-if="creditBillData.length > 0">
        <view class="section-title">近一年信用卡账单统计</view>
        <view class="chart-stat" style="color: #f59e0b;">累计账单: {{ creditBillTotal.toFixed(2) }}元</view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="creditBillChartOpts" :chartData="creditBillChartData" />
        </view>
      </view>

      <!-- 近两年储蓄卡开卡统计 -->
      <view class="section" v-if="openCardData.length > 0">
        <view class="section-title">近两年储蓄卡开卡统计</view>
        <view class="chart-stat" style="color: #10b981;">累计开卡: {{ openCardTotal }}张</view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="openCardChartOpts" :chartData="openCardChartData" />
        </view>
      </view>
      <!-- 近15天净资产趋势 -->
      <view class="section">
        <view class="section-title">近15天净资产趋势</view>
        <view class="chart-stat" style="color: #1890FF;">当前净资产: {{ netAssetLatest.toFixed(2) }}元</view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="trendChartOpts" :chartData="trendChartData" />
        </view>
      </view>
      <!-- 近2个月POS机刷卡统计 -->
      <view class="section" v-if="posCardData.length > 0">
        <view class="section-title">近2个月POS机刷卡统计</view>
        <view class="chart-stat" style="color: #f59e0b;">累计刷卡: {{ posCardTotal.toFixed(2) }}元</view>
        <view class="chart-container">
          <qiun-data-charts type="area" :opts="posCardChartOpts" :chartData="posCardChartData" />
        </view>
      </view>







    </scroll-view>
  </view>
      <!-- 悬停按钮返回统计分析-->
      <statisticBtn></statisticBtn>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  getPosAccountsInfo,
  getInvestAccountsInfo,
  getCreditReportInfo,
  getLendAccountsInfo,
  getCreditAccountsInfo,
  getDebitAccountsInfo
} from '@/api/invest/accountAnalysis.js'
import {
  getDailyExpensesAnalysis,
  getCreditAnalysis,
  getFuturesStocksAnalysis,
  getPosAnalysis,
  getAcccountsOutInAnalysis,
  getAcccountsDealAnalysis,
  getInstallmentHistoryAnalysis,
  getOpenCardList
} from '@/api/invest/statisticAnalysis'
import { listDailyLiabilities } from '@/api/invest/dailyLiabilities'

// 核心数值
const debitTotalBalance = ref(0)
const debitBalance = ref(0)
const investBalance = ref(0)
const unClearedOnlineDebt = ref(0)
const creditBalance = ref(0)
const peopleLendHistory = ref(0)
const housingFundBalance = ref(0)
const medicalBalance = ref(0)
const personalPensionBalance = ref(0)
const storedValueCardBalance = ref(0)
const debitOnlineBalance = ref(0)

const creditLimit = ref(0)
const unclearedCreditInstallment = ref(0)
const unclearedCreditInstallmentPrinciple = ref(0)
const unclearedCreditInstallmentInterest = ref(0)
const unclearedCreditInstallmentCount = ref(0)

const unclearedOnlineDebtCount = ref(0)
const unClearedOnlineDebtPrinciple = ref(0)
const unClearedOnlineDebtInterest = ref(0)

// 账户数量统计
const creditCount = ref(0)
const debitICount = ref(0)
const debitIICount = ref(0)
const debitOnlineCount = ref(0)
const storedValueCardCount = ref(0)
const onlineLendCount = ref(0)
const peopleLendCount = ref(0)
const posCount = ref(0)
const stocksCount = ref(0)
const futuresCount = ref(0)

const lastMonthUsedRate = ref(0)
const lastSixMonthUsedRate = ref(0)
const creditBillRate = ref(0)
const lastThreeMonths = ref(0)
const lastSixMonths = ref(0)

const monthlyExpenses = ref(0)
const monthlyCreditBill = ref(0)
const monthlyInvestIncome = ref(0)
const monthlyPosAmount = ref(0)
const monthlyPosCount = ref(0)
const monthlyPosFee = ref(0)
const monthlyBalance = ref(0)
const monthlyTotalOutcome = ref(0)
const monthlySalaryIncome = ref(0)
const monthlyNotDailyExpenses = ref(0)
const monthlyCreditInstallment = ref(0)
const monthlyCreditInstallmentPrincipal = ref(0)
const monthlyCreditInstallmentInterest = ref(0)
const monthlyCreditAvailable = ref(0)
const monthlyLendDue = ref(0)
const monthlyLendRepaid = ref(0)
const monthlyLendInterest = ref(0)
const monthlyLendRepayment = ref(0)

// 近一周数据
const weeklyExpenseData = ref([])
const weeklyInvestIncomeData = ref([])

// 近一月数据
const monthlyExpenseData = ref([])
const monthlyInvestIncomeData = ref([])

// 净资产趋势数据
const netAssetTrendData = ref([])

// 贷款还款计划数据
const lendRepaymentData = ref([])

// 账户收支数据
const weeklyBalanceData = ref([])
const monthlyBalanceData = ref([])
const balanceActiveTab = ref('week')

// Tab状态
const expenseActiveTab = ref('week')
const investActiveTab = ref('week')

// 信用卡账单数据
const creditBillData = ref([])

// 储蓄卡开卡数据
const openCardData = ref([])

// POS机刷卡数据
const posCardData = ref([])

// 派生指标
const totalAsset = computed(() => {
  return Number(debitTotalBalance.value) + Number(investBalance.value)
})

const totalDebt = computed(() => {
  return Number(unClearedOnlineDebt.value) + Number(creditBalance.value) + Number(peopleLendHistory.value)
})

const netAsset = computed(() => {
  return totalAsset.value - totalDebt.value
})

// 图表统计数据计算
const creditBillTotal = computed(() => {
  if (!creditBillData.value || creditBillData.value.length === 0) return 0
  return creditBillData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const openCardTotal = computed(() => {
  if (!openCardData.value || openCardData.value.length === 0) return 0
  return openCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const posCardTotal = computed(() => {
  if (!posCardData.value || posCardData.value.length === 0) return 0
  return posCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const lendRepaymentTotal = computed(() => {
  if (!lendRepaymentData.value || lendRepaymentData.value.length === 0) return 0
  return lendRepaymentData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const netAssetLatest = computed(() => {
  if (!netAssetTrendData.value || netAssetTrendData.value.length === 0) return 0
  return Number(netAssetTrendData.value[netAssetTrendData.value.length - 1]?.totalBalance) || 0
})

const weeklyExpenseTotal = computed(() => {
  if (!weeklyExpenseData.value || weeklyExpenseData.value.length === 0) return 0
  return weeklyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const monthlyExpenseTotal = computed(() => {
  if (!monthlyExpenseData.value || monthlyExpenseData.value.length === 0) return 0
  return monthlyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const currentExpenseTotal = computed(() => {
  return expenseActiveTab.value === 'week' ? weeklyExpenseTotal.value : monthlyExpenseTotal.value
})

const weeklyInvestTotal = computed(() => {
  if (!weeklyInvestIncomeData.value || weeklyInvestIncomeData.value.length === 0) return 0
  return weeklyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const monthlyInvestTotal = computed(() => {
  if (!monthlyInvestIncomeData.value || monthlyInvestIncomeData.value.length === 0) return 0
  return monthlyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

const currentInvestTotal = computed(() => {
  return investActiveTab.value === 'week' ? weeklyInvestTotal.value : monthlyInvestTotal.value
})

const balanceTotal = computed(() => {
  const data = balanceActiveTab.value === 'week' ? weeklyBalanceData.value : monthlyBalanceData.value
  if (!data || data.length === 0) return 0
  return data.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
})

// 资产结构图表配置
const assetChartData = computed(() => {
  const data = [
    { name: '储蓄卡余额', value: Number(debitBalance.value) || 0 },
    { name: '投资账户', value: Number(investBalance.value) || 0 },
    { name: '住房公积金', value: Number(housingFundBalance.value) || 0 },
    { name: '职工医保', value: Number(medicalBalance.value) || 0 },
    { name: '个人养老金', value: Number(personalPensionBalance.value) || 0 },
    { name: '储值卡', value: Number(storedValueCardBalance.value) || 0 },
    { name: '网络账户', value: Number(debitOnlineBalance.value) || 0 }
  ].filter(item => item.value > 0)

  return {
    series: [{
      data: data.map(item => ({ name: item.name, value: item.value }))
    }]
  }
})

const assetChartOpts = computed(() => ({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452'],
  padding: [5, 5, 5, 5],
  enableScroll: false,
  legend: {
    show: true,
    position: 'bottom',
    fontSize: 10,
    lineHeight: 18,
    itemGap: 8
  },
  title: {
     name: '资产总计',
    fontSize: 12,
    color: '#aaaaaa'
   
  },
  subtitle: {
    name: totalAsset.value > 0 ? totalAsset.value.toFixed(2) : '',
    fontSize: 13,
    color: '#10b981'
  },
  extra: {
    ring: {
      ringWidth: 30,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF'
    }
  }
}))
const debtChartData = computed(() => {
  const data = [
    { name: '未结清贷款', value: Number(unClearedOnlineDebt.value) || 0 },
    { name: '信用卡已用', value: Number(creditBalance.value) || 0 },
    { name: '人情欠款', value: Number(peopleLendHistory.value) || 0 }
  ].filter(item => item.value > 0)

  return {
    series: [{
      data: data.map(item => ({ name: item.name, value: item.value }))
    }]
  }
})

const debtChartOpts = computed(() => ({
  color: ['#EE6666', '#FAC858', '#FC8452'],
  padding: [5, 5, 5, 5],
  enableScroll: false,
  legend: {
    show: true,
    position: 'bottom',
    fontSize: 10,
    lineHeight: 18,
    itemGap: 8
  },
  title: {
       name: '负债总计',
    fontSize: 12,
    color: '#aaaaaa'
  },
  subtitle: {

     name: totalDebt.value > 0 ? totalDebt.value.toFixed(2) : '',
    fontSize: 13,
    color: '#ef4444'
  },
  extra: {
    ring: {
      ringWidth: 30,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF'
    }
  }
}))
const radarChartData = computed(() => {
  const safeTotalAsset = totalAsset.value || 1
  const safeCreditLimit = Number(creditLimit.value) || 1
  const debtAssetRatio = (totalDebt.value / safeTotalAsset) * 100
  const installmentLimitRatio = (Number(unclearedCreditInstallment.value) / safeCreditLimit) * 100

  return {
    categories: [
      '信用卡使用率',
      '上月账单使用率',
      '近6月平均使用率',
      '资产负债率',
      '分期占额度比'
    ],
    series: [{
      name: '信用压力',
      data: [
        Number(creditBillRate.value) || 0,
        Number(lastMonthUsedRate.value) || 0,
        Number(lastSixMonthUsedRate.value) || 0,
        Number(debtAssetRatio.toFixed(1)) || 0,
        Number(installmentLimitRatio.toFixed(1)) || 0
      ]
    }]
  }
})

const radarChartOpts = computed(() => ({
  color: ['#1890FF'],
  padding: [15, 15, 15, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  extra: {
    radar: {
      gridType: 'radar',
      gridColor: '#CCCCCC',
      gridCount: 4,
      opacity: 0.2,
      labelShow: true,
      max: 100
    }
  }
}))

// 净资产趋势图配置
const trendChartData = computed(() => {
  if (!netAssetTrendData.value || netAssetTrendData.value.length === 0) {
    return { categories: [], series: [{ name: '净资产', data: [] }] }
  }

  const categories = netAssetTrendData.value.map(item => {
    const dateStr = item.recordDate || ''
    return dateStr.includes(' ') ? dateStr.split(' ')[0].substring(5) : dateStr.substring(5)
  })
  
  const data = netAssetTrendData.value.map(item => Number(item.totalBalance) || 0)

  return {
    categories,
    series: [{ name: '净资产', data }]
  }
})

const trendChartOpts = computed(() => ({
  color: ['#1890FF'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `净资产趋势当前: ${netAssetLatest.value.toFixed(2)}元`,
    fontSize: 10,
    color: '#1890FF',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 支出趋势图配置
const expenseChartData = computed(() => {
  const isWeek = expenseActiveTab.value === 'week'
  const sourceData = isWeek ? weeklyExpenseData.value : monthlyExpenseData.value

  if (!sourceData || sourceData.length === 0) {
    return { categories: [], series: [{ name: '日常支出', data: [] }] }
  }

  return {
    categories: sourceData.map(item => item.date),
    series: [{ name: '日常支出', data: sourceData.map(item => item.value) }]
  }
})

const expenseChartOpts = computed(() => ({
  color: ['#f59e0b'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `${expenseActiveTab.value === 'week' ? '近一周' : '近一月'}支出总计: ${currentExpenseTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: '#f59e0b',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 投资收益图配置
const investChartData = computed(() => {
  const isWeek = investActiveTab.value === 'week'
  const rawData = isWeek ? weeklyInvestIncomeData.value : monthlyInvestIncomeData.value
  const sourceData = rawData && rawData.length > 0 ? [...rawData].reverse() : rawData

  if (!sourceData || sourceData.length === 0) {
    return { categories: [], series: [{ name: '投资收益', data: [] }] }
  }

  return {
    categories: sourceData.map(item => item.date),
    series: [{ name: '投资收益', data: sourceData.map(item => item.value) }]
  }
})

const investChartOpts = computed(() => ({
  color: ['#10b981'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `${investActiveTab.value === 'week' ? '近一周' : '近一月'}投资收益: ${currentInvestTotal.value >= 0 ? '+' : ''}${currentInvestTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: currentInvestTotal.value >= 0 ? '#10b981' : '#ef4444',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 贷款还款计划图配置
const lendRepaymentChartData = computed(() => {
  if (!lendRepaymentData.value || lendRepaymentData.value.length === 0) {
    return { categories: [], series: [{ name: '还款金额', data: [] }] }
  }

  return {
    categories: lendRepaymentData.value.map(item => item.time.substring(5)),
    series: [{ name: '还款金额', data: lendRepaymentData.value.map(item => Number(item.value) || 0) }]
  }
})

const lendRepaymentChartOpts = computed(() => ({
  color: ['#4181c9'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `贷款待还总计: ${lendRepaymentTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: '#ef4444',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 账户收支图配置
const balanceChartData = computed(() => {
  const isWeek = balanceActiveTab.value === 'week'
  const sourceData = isWeek ? weeklyBalanceData.value : monthlyBalanceData.value

  if (!sourceData || sourceData.length === 0) {
    return { categories: [], series: [{ name: '收支差额', data: [] }] }
  }

  return {
    categories: sourceData.map(item => item.date),
    series: [{ name: '收支差额', data: sourceData.map(item => item.value) }]
  }
})

const balanceChartOpts = computed(() => ({
  color: ['#4181c9'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `${balanceActiveTab.value === 'week' ? '近一周' : '近一月'}收支差额: ${balanceTotal.value >= 0 ? '+' : ''}${balanceTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: balanceTotal.value >= 0 ? '#10b981' : '#ef4444',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 信用卡账单图配置
const creditBillChartData = computed(() => {
  if (!creditBillData.value || creditBillData.value.length === 0) {
    return { categories: [], series: [{ name: '账单金额', data: [] }] }
  }

  return {
    categories: creditBillData.value.map(item => item.time),
    series: [{ name: '账单金额', data: creditBillData.value.map(item => Number(item.value) || 0) }]
  }
})

const creditBillChartOpts = computed(() => ({
  color: ['#4181c9'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `信用卡账单累计: ${creditBillTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: '#f59e0b',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 储蓄卡开卡图配置
const openCardChartData = computed(() => {
  if (!openCardData.value || openCardData.value.length === 0) {
    return { categories: [], series: [{ name: '开卡数量', data: [] }] }
  }

  // 按时间排序
  const sortedData = openCardData.value.slice().sort((a, b) => a.time.localeCompare(b.time))

  return {
    categories: sortedData.map(item => item.time),
    series: [{ name: '开卡数量', data: sortedData.map(item => Number(item.value) || 0) }]
  }
})

const openCardChartOpts = computed(() => ({
  color: ['#10b981'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `近两年开卡累计: ${openCardTotal.value}张`,
    fontSize: 10,
    color: '#10b981',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// POS机刷卡图配置
const posCardChartData = computed(() => {
  if (!posCardData.value || posCardData.value.length === 0) {
    return { categories: [], series: [{ name: '刷卡金额', data: [] }] }
  }

  return {
    categories: posCardData.value.map(item => item.time.substring(5)),
    series: [{ name: '刷卡金额', data: posCardData.value.map(item => Number(item.value) || 0) }]
  }
})

const posCardChartOpts = computed(() => ({
  color: ['#f59e0b'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  dataLabel: false,
  title: {
    name: `近2个月POS刷卡累计: ${posCardTotal.value.toFixed(2)}元`,
    fontSize: 10,
    color: '#f59e0b',
    offsetX: 0,
    offsetY: 0
  },
  xAxis: {
    disableGrid: true,
    fontSize: 9,
    boundaryGap: 'justify',
    labelCount: 3
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    showTitle: false
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true
    }
  }
}))

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 数据加载
const loadAllData = async () => {
  try {
    uni.showLoading({ title: '加载中...' })
    
    const today = new Date()
    const year = today.getFullYear()
    const month = String(today.getMonth() + 1).padStart(2, '0')
    const day = String(today.getDate()).padStart(2, '0')
    const monthStartDay = `${year}-${month}-01`
    const todayStr = `${year}-${month}-${day}`
    const monthKey = `${year}-${month}`
    // 当月最后一天
    const lastDayOfMonth = new Date(year, today.getMonth() + 1, 0)
    const monthEndDay = `${year}-${month}-${String(lastDayOfMonth.getDate()).padStart(2, '0')}`

    // 计算近7天
    const weekAgo = new Date(today)
    weekAgo.setDate(weekAgo.getDate() - 6)
    const weekStartDay = `${weekAgo.getFullYear()}-${String(weekAgo.getMonth() + 1).padStart(2, '0')}-${String(weekAgo.getDate()).padStart(2, '0')}`

    // 加载基础账户数据
    const [debitRes, investRes, lendRes, creditRes, posRes, reportRes] = await Promise.all([
      getDebitAccountsInfo(),
      getInvestAccountsInfo(),
      getLendAccountsInfo(),
      getCreditAccountsInfo(),
      getPosAccountsInfo(),
      getCreditReportInfo()
    ])

    // 赋值基础数据
    debitTotalBalance.value = debitRes.data.debitTotalBalance || 0
    debitBalance.value = debitRes.data.debitBalance || 0
    debitOnlineBalance.value = debitRes.data.debitOnlineBalance || 0
    storedValueCardBalance.value = debitRes.data.storedValueCardBalance || 0
    housingFundBalance.value = debitRes.data.housingFundBalance || 0
    medicalBalance.value = debitRes.data.medicalBalance || 0
    personalPensionBalance.value = debitRes.data.personalPensionBalance || 0
    debitICount.value = debitRes.data.debitICount || 0
    debitIICount.value = debitRes.data.debitIICount || 0
    debitOnlineCount.value = debitRes.data.debitOnlineCount || 0
    storedValueCardCount.value = debitRes.data.storedValueCardCount || 0

    investBalance.value = investRes.data.investBalance || 0
    stocksCount.value = investRes.data.stocksCount || 0
    futuresCount.value = investRes.data.futuresCount || 0

    unClearedOnlineDebt.value = lendRes.data.unClearedOnlineDebt || 0
    peopleLendHistory.value = lendRes.data.peopleLendHistory || 0
    monthlyLendRepayment.value = lendRes.data.leftOnlineDebt || 0
    unclearedOnlineDebtCount.value = lendRes.data.unclearedOnlineDebtCount || 0
    unClearedOnlineDebtPrinciple.value = lendRes.data.unClearedOnlineDebtPrinciple || 0
    unClearedOnlineDebtInterest.value = lendRes.data.unClearedOnlineDebtInterest || 0
    onlineLendCount.value = lendRes.data.onlineLendCount || 0
    peopleLendCount.value = lendRes.data.peopleLendCount || 0

    creditBalance.value = creditRes.data.creditBalance || 0
    creditLimit.value = creditRes.data.creditLimit || 0
    unclearedCreditInstallment.value = creditRes.data.unclearedCreditInstallment || 0
    unclearedCreditInstallmentPrinciple.value = creditRes.data.unclearedCreditInstallmentPrinciple || 0
    unclearedCreditInstallmentInterest.value = creditRes.data.unclearedCreditInstallmentInterest || 0
    unclearedCreditInstallmentCount.value = creditRes.data.unclearedCreditInstallmentCount || 0
    lastSixMonthUsedRate.value = creditRes.data.lastSixMonthUsedRate || 0
    lastMonthUsedRate.value = creditRes.data.lastMonthUsedRate || 0
    creditBillRate.value = creditRes.data.creditBillRate || 0
    creditCount.value = creditRes.data.creditCount || 0

    posCount.value = posRes.data.posCount || 0

    lastThreeMonths.value = reportRes.data.lastThreeMonths || 0
    lastSixMonths.value = reportRes.data.lastSixMonths || 0

    // 加载统计数据
    await Promise.all([
      getDailyExpensesAnalysis({
        type: 1,
        startTime: monthStartDay,
        endTime: todayStr,
        dataType: '1'
      }).then(res => {
        monthlyExpenses.value = (res && res.data && res.data.dailyExpenses) || 0
      }),
      getCreditAnalysis({
        type: 2,
        startTime: monthKey,
        endTime: monthKey
      }).then(res => {
        monthlyCreditBill.value = (res && res.data && res.data.actualCreditBill) || 0
        monthlyCreditAvailable.value = (res && res.data && res.data.creditAvailableLimit) || 0
      }),
      getFuturesStocksAnalysis({
        type: 2,
        startTime: monthKey,
        endTime: monthKey
      }).then(res => {
        monthlyInvestIncome.value = (res && res.data && res.data.accumulateIncome) || 0
      }),
      getPosAnalysis({
        type: 1,
        startTime: monthStartDay,
        endTime: todayStr
      }).then(res => {
        monthlyPosAmount.value = (res && res.data && res.data.amount) || 0
        monthlyPosCount.value = (res && res.data && res.data.count) || 0
        monthlyPosFee.value = (res && res.data && res.data.commission) || 0
      }),
      getAcccountsOutInAnalysis({
        type: 1,
        startTime: monthStartDay,
        endTime: monthEndDay
      }).then(res => {
        monthlyBalance.value = (res && res.data && res.data.balance) || 0
        monthlyTotalOutcome.value = (res && res.data && res.data.totalOutcome) || 0
        monthlySalaryIncome.value = (res && res.data && res.data.salaryIncome) || 0
        monthlyNotDailyExpenses.value = (res && res.data && res.data.notDailyExpenses) || 0
      }),
      // 获取当月信用卡分期数据
      getInstallmentHistoryAnalysis({
        type: 1,
        startTime: monthStartDay,
        endTime: monthEndDay,
        dataType: '2'
      }).then(res => {
        const dueDetail = Number(res.data.dueDetail) || 0
        const dueInterest = Number(res.data.dueInterest) || 0
        const duePrincipal = dueDetail - dueInterest
        
        monthlyCreditInstallment.value = dueDetail
        monthlyCreditInstallmentPrincipal.value = duePrincipal
        monthlyCreditInstallmentInterest.value = dueInterest
      }),
      // 获取当月借贷数据
      getInstallmentHistoryAnalysis({
        type: 1,
        startTime: monthStartDay,
        endTime: monthEndDay,
        dataType: '3'
      }).then(res => {
        monthlyLendDue.value = (res && res.data && res.data.dueDetail) || 0
        monthlyLendRepaid.value = (res && res.data && res.data.repaidDetail) || 0
        monthlyLendInterest.value = (res && res.data && res.data.dueInterest) || 0
      })
    ])

    // 加载近一周数据
    const [weeklyExpenseRes, weeklyInvestRes] = await Promise.all([
      getDailyExpensesAnalysis({
        type: 1,
        startTime: weekStartDay,
        endTime: todayStr,
        dataType: '1'
      }),
      getAcccountsDealAnalysis({
        type: 1,
        startTime: weekStartDay,
        endTime: todayStr,
        dataType: '5',
        dealCategory: '2'
      })
    ])

    if (weeklyExpenseRes && weeklyExpenseRes.data && weeklyExpenseRes.data.acccountsDateList) {
      weeklyExpenseData.value = weeklyExpenseRes.data.acccountsDateList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    if (weeklyInvestRes && weeklyInvestRes.data && weeklyInvestRes.data.tableAccountsList) {
      weeklyInvestIncomeData.value = weeklyInvestRes.data.tableAccountsList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    // 加载净资产趋势（近15天）
    const fifteenDaysAgo = new Date(today)
    fifteenDaysAgo.setDate(today.getDate() - 14)
    const trendStartDay = `${fifteenDaysAgo.getFullYear()}-${String(fifteenDaysAgo.getMonth() + 1).padStart(2, '0')}-${String(fifteenDaysAgo.getDate()).padStart(2, '0')}`

    const trendRes = await listDailyLiabilities({
      startTime: trendStartDay,
      endTime: todayStr,
      pageNum: 1,
      pageSize: 100
    })

    if (trendRes && trendRes.rows) {
      netAssetTrendData.value = trendRes.rows.slice().reverse()
    }

    // 加载未来3个月贷款还款计划
    const futureDate = new Date(year, today.getMonth() + 3, 0)
    const lendEndDay = `${futureDate.getFullYear()}-${String(futureDate.getMonth() + 1).padStart(2, '0')}-${String(futureDate.getDate()).padStart(2, '0')}`

    try {
      const lendRes = await getInstallmentHistoryAnalysis({
        type: 1,
        startTime: todayStr,
        endTime: lendEndDay,
        dataType: '3'
      })
      if (lendRes && lendRes.data && lendRes.data.historyDetailList) {
        lendRepaymentData.value = lendRes.data.historyDetailList
      }
    } catch (err) {
      // 忽略错误
    }

    // 加载近一周/近一月账户收支数据
    const weeklyBalanceRes = await getAcccountsOutInAnalysis({
      type: 1,
      startTime: weekStartDay,
      endTime: todayStr
    })

    if (weeklyBalanceRes && weeklyBalanceRes.data && weeklyBalanceRes.data.acccountsList) {
      weeklyBalanceData.value = weeklyBalanceRes.data.acccountsList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    // 加载近一月账户收支数据
    const monthAgo = new Date(today)
    monthAgo.setDate(monthAgo.getDate() - 29)
    const month30StartDay = `${monthAgo.getFullYear()}-${String(monthAgo.getMonth() + 1).padStart(2, '0')}-${String(monthAgo.getDate()).padStart(2, '0')}`

    const monthlyBalanceRes = await getAcccountsOutInAnalysis({
      type: 1,
      startTime: month30StartDay,
      endTime: todayStr
    })

    if (monthlyBalanceRes && monthlyBalanceRes.data && monthlyBalanceRes.data.acccountsList) {
      monthlyBalanceData.value = monthlyBalanceRes.data.acccountsList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    // 加载近一月支出和投资收益数据
    const [monthlyExpenseRes, monthlyInvestRes] = await Promise.all([
      getDailyExpensesAnalysis({
        type: 1,
        startTime: month30StartDay,
        endTime: todayStr,
        dataType: '1'
      }),
      getAcccountsDealAnalysis({
        type: 1,
        startTime: month30StartDay,
        endTime: todayStr,
        dataType: '5',
        dealCategory: '2'
      })
    ])

    if (monthlyExpenseRes && monthlyExpenseRes.data && monthlyExpenseRes.data.acccountsDateList) {
      monthlyExpenseData.value = monthlyExpenseRes.data.acccountsDateList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    if (monthlyInvestRes && monthlyInvestRes.data && monthlyInvestRes.data.tableAccountsList) {
      monthlyInvestIncomeData.value = monthlyInvestRes.data.tableAccountsList.map(item => ({
        date: item.time.substring(5),
        value: Number(item.value) || 0
      }))
    }

    // 加载近一年信用卡账单数据
    const billStartDate = new Date(year, today.getMonth() - 11, 1)
    const billStartMonth = `${billStartDate.getFullYear()}-${String(billStartDate.getMonth() + 1).padStart(2, '0')}`

    try {
      const billRes = await getCreditAnalysis({
        type: 2,
        startTime: billStartMonth,
        endTime: monthKey
      })
      if (billRes && billRes.data && billRes.data.creditBillList) {
        creditBillData.value = billRes.data.creditBillList
      }
    } catch (err) {
      // 忽略错误
    }

    // 加载近两年储蓄卡开卡数据
    const twoYearsAgo = new Date(year, today.getMonth() - 23, 1)
    const openCardStartMonth = `${twoYearsAgo.getFullYear()}-${String(twoYearsAgo.getMonth() + 1).padStart(2, '0')}`

    try {
      const openRes = await getOpenCardList({
        type: 2,
        startTime: openCardStartMonth,
        endTime: monthKey,
        dataType: '1'
      })
      if (openRes && openRes.data && openRes.data.debitList) {
        openCardData.value = openRes.data.debitList || []
        console.log('储蓄卡开卡数据:', openCardData.value)
      } else {
        openCardData.value = []
      }
    } catch (err) {
      // 忽略错误
    }

    // 加载近2个月POS机刷卡数据
    const twoMonthsAgo = new Date(today)
    twoMonthsAgo.setMonth(today.getMonth() - 2)
    const posStartDay = `${twoMonthsAgo.getFullYear()}-${String(twoMonthsAgo.getMonth() + 1).padStart(2, '0')}-${String(twoMonthsAgo.getDate()).padStart(2, '0')}`

    try {
      const posRes = await getPosAnalysis({
        type: 1,
        startTime: posStartDay,
        endTime: todayStr
      })
      if (posRes && posRes.data && posRes.data.posList) {
        posCardData.value = posRes.data.posList
      }
    } catch (err) {
      // 忽略错误
    }

    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    console.error('加载数据失败:', error)
  }
}

onMounted(() => {
  loadAllData()
})
</script>

<style lang="scss" scoped>
.big-screen {
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
}

.screen-scroll {
  height: calc(100vh - 44px);
  padding: 0 24rpx 40rpx;
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  
  .metric-card:nth-child(4),
  .metric-card:nth-child(5) {
    grid-column: span 1;
  }
  
  .metric-card:nth-child(5) {
    grid-column: 2 / 4;
  }
}

.metric-card {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-radius: 16rpx;
  padding: 20rpx 16rpx;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.5);

  &.primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(102, 126, 234, 0.4);
  }
}

.metric-label {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 12rpx;
}

.metric-value {
  font-size: 24rpx;
  font-weight: 700;
  color: #e5e7eb;
  font-family: 'DIN', ui-monospace, monospace;
  word-break: break-all;
  line-height: 1.3;

  text {
    font-size: 18rpx;
    color: #9ca3af;
    margin-left: 4rpx;
  }

  &.success {
    color: #10b981;
  }

  &.danger {
    color: #ef4444;
  }
}

.section {
  margin-top: 32rpx;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.5);
  
  &:first-child {
    margin-top: 24rpx;
  }
}

.section-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #e5e7eb;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  position: relative;
  padding-left: 16rpx;
  line-height: 28rpx;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3rpx;
  }
}

.chart-stat {
  font-size: 24rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  padding-left: 16rpx;
  font-family: 'DIN', ui-monospace, monospace;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.data-item {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12rpx;
  padding: 20rpx;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.data-label {
  font-size: 22rpx;
  color: #9ca3af;
  margin-bottom: 8rpx;
}

.data-value {
  font-size: 26rpx;
  font-weight: 600;
  color: #e5e7eb;
  font-family: 'DIN', ui-monospace, monospace;

  &.success {
    color: #10b981;
  }

  &.danger {
    color: #ef4444;
  }
}

.chart-container {
  width: 100%;
  height: 500rpx;
}

.tab-buttons {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.tab-btn {
  flex: 1;
  padding: 16rpx;
  text-align: center;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12rpx;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #9ca3af;
  font-size: 24rpx;
  transition: all 0.3s ease;

  &.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: rgba(102, 126, 234, 0.4);
    color: #38bdf8;
    font-weight: 600;
  }
}
</style>
