﻿<template>
  <div class="page-container-flex">
    <van-nav-bar title="预算管理" placeholder>
      <template #right>
        <van-icon name="plus" size="20" @click="showAddPopup = true" />
      </template>
    </van-nav-bar>

    <div class="scroll-content">
      <div class="page-content">
        <van-tabs v-model:active="activeTab" sticky offset-top="0" type="card">
        <van-tab title="支出" :name="BudgetCategory.Expense">
          <div class="summary-card common-card">
            <div class="summary-item">
              <div class="label">本周{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.week.rate)">
                {{ overallStats.week.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">本月{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.month.rate)">
                {{ overallStats.month.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">年度{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.year.rate)">
                {{ overallStats.year.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
            </div>
          </div>
          <div class="budget-list">
            <template v-if="expenseBudgets?.length > 0">
              <van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
                <div class="common-card budget-card">
                  <div class="card-header">
                    <div class="budget-info">
                      <h3 class="card-title">{{ budget.name }}</h3>
                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
                    </div>
                    <div class="header-actions">
                      <van-button icon="replay" size="mini" plain :loading="budget.syncing" @click="handleSync(budget)" />
                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain @click="handleToggleStop(budget)" />
                    </div>
                  </div>
                  
                  <div class="budget-body">
                    <div class="amount-info">
                      <div class="info-item">
                        <div class="label">当前</div>
                        <div class="value expense">¥{{ formatMoney(budget.current) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">预算</div>
                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">结余</div>
                        <div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
                          ¥{{ formatMoney(budget.limit - budget.current) }}
                        </div>
                      </div>
                    </div>

                    <div class="progress-section">
                      <div class="progress-info">
                        <span class="period-type">{{ getPeriodLabel(budget.type) }}进度</span>
                        <span class="percent" :class="{ 'warning': (budget.current / budget.limit) > 0.8 }">
                          {{ Math.round((budget.current / budget.limit) * 100) }}%
                        </span>
                      </div>
                      <van-progress 
                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
                        stroke-width="8"
                        :color="getProgressColor(budget)"
                        :show-pivot="false"
                      />
                    </div>
                  </div>

                  <div class="card-footer">
                    <div class="period-navigation">
                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
                      <span class="period-text">{{ budget.period }}</span>
                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
                    </div>
                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
                  </div>
                </div>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                </template>
              </van-swipe-cell>
            </template>
            <van-empty v-else description="暂无支出预算" />
          </div>
        </van-tab>

        <van-tab title="收入" :name="BudgetCategory.Income">
          <div class="summary-card common-card">
            <div class="summary-item">
              <div class="label">本周{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.week.rate)">
                {{ overallStats.week.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">本月{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.month.rate)">
                {{ overallStats.month.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">年度{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.year.rate)">
                {{ overallStats.year.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
            </div>
          </div>
          <div class="budget-list">
            <template v-if="incomeBudgets?.length > 0">
              <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
                <div class="common-card budget-card">
                  <div class="card-header">
                    <div class="budget-info">
                      <h3 class="card-title">{{ budget.name }}</h3>
                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
                      <van-tag v-else type="success" size="small" plain>进行中</van-tag>
                    </div>
                    <div class="header-actions">
                      <van-button icon="replay" size="mini" plain round :loading="budget.syncing" @click="handleSync(budget)" />
                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
                    </div>
                  </div>
                  
                  <div class="budget-body">
                    <div class="amount-info">
                      <div class="info-item">
                        <div class="label">当前已收</div>
                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">目标收入</div>
                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">差额</div>
                        <div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
                          ¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
                        </div>
                      </div>
                    </div>

                    <div class="progress-section">
                      <div class="progress-info">
                        <span class="period-type">{{ getPeriodLabel(budget.type) }}达成度</span>
                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
                          {{ Math.round((budget.current / budget.limit) * 100) }}%
                        </span>
                      </div>
                      <van-progress 
                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
                        stroke-width="8"
                        :color="getIncomeProgressColor(budget)"
                        :show-pivot="false"
                      />
                    </div>
                  </div>

                  <div class="card-footer">
                    <div class="period-navigation">
                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
                      <span class="period-text">{{ budget.period }}</span>
                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
                    </div>
                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
                  </div>
                </div>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                </template>
              </van-swipe-cell>
            </template>
            <van-empty v-else description="暂无收入预算" />
          </div>
        </van-tab>

        <van-tab title="存款" :name="BudgetCategory.Savings">
          <div class="summary-card common-card">
            <div class="summary-item">
              <div class="label">本周{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.week.rate)">
                {{ overallStats.week.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.week.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">本月{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.month.rate)">
                {{ overallStats.month.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.month.count }}个预算</div>
            </div>
            <div class="divider"></div>
            <div class="summary-item">
              <div class="label">年度{{ activeTabTitle }}率</div>
              <div class="value" :class="getValueClass(overallStats.year.rate)">
                {{ overallStats.year.rate }}<span class="unit">%</span>
              </div>
              <div class="sub-label">{{ overallStats.year.count }}个预算</div>
            </div>
          </div>
          <div class="budget-list">
            <template v-if="savingsBudgets?.length > 0">
              <van-swipe-cell v-for="budget in savingsBudgets" :key="budget.id">
                <div class="common-card budget-card">
                  <div class="card-header">
                    <div class="budget-info">
                      <h3 class="card-title">{{ budget.name }}</h3>
                      <van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
                      <van-tag v-else type="success" size="small" plain>积累中</van-tag>
                    </div>
                    <div class="header-actions">
                      <van-button icon="replay" size="mini" plain round :loading="budget.syncing" @click="handleSync(budget)" />
                      <van-button :icon="budget.isStopped ? 'play' : 'pause'" size="mini" plain round @click="handleToggleStop(budget)" />
                    </div>
                  </div>
                  
                  <div class="budget-body">
                    <div class="amount-info">
                      <div class="info-item">
                        <div class="label">已存</div>
                        <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">目标</div>
                        <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                      </div>
                      <div class="info-item">
                        <div class="label">还差</div>
                        <div class="value expense">
                          ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
                        </div>
                      </div>
                    </div>

                    <div class="progress-section">
                      <div class="progress-info">
                        <span class="period-type">储蓄进度</span>
                        <span class="percent" :class="{ 'income': (budget.current / budget.limit) >= 1 }">
                          {{ Math.round((budget.current / budget.limit) * 100) }}%
                        </span>
                      </div>
                      <van-progress 
                        :percentage="Math.min(Math.round((budget.current / budget.limit) * 100), 100)" 
                        stroke-width="8"
                        color="#07c160"
                        :show-pivot="false"
                      />
                    </div>
                  </div>

                  <div class="card-footer">
                    <div class="period-navigation">
                      <van-icon name="arrow-left" class="nav-icon" @click="handleSwitchPeriod(budget, -1)" />
                      <span class="period-text">
                        {{ budget.period }}
                      </span>
                      <van-icon name="arrow" class="nav-icon" @click="handleSwitchPeriod(budget, 1)" />
                    </div>
                    <span class="sync-time">上次同步: {{ budget.lastSync }}</span>
                  </div>
                </div>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                </template>
              </van-swipe-cell>
            </template>
            <van-empty v-else description="暂无存款计划" />
          </div>
        </van-tab>
      </van-tabs>
      <!-- 底部安全距离 -->
      <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
    </div>
  </div>

    <!-- 添加预算弹窗 -->
    <PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
      <div class="add-budget-form">
        <van-form>
          <van-cell-group inset>
            <van-field
              v-model="form.name"
              name="name"
              label="预算名称"
              placeholder="例如：每月餐饮、年度奖金"
              :rules="[{ required: true, message: '请填写预算名称' }]"
            />
            <van-field name="type" label="统计周期">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio :name="BudgetPeriodType.Week">周</van-radio>
                  <van-radio :name="BudgetPeriodType.Month">月</van-radio>
                  <van-radio :name="BudgetPeriodType.Year">年</van-radio>
                  <van-radio :name="BudgetPeriodType.Longterm">长期</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="form.limit"
              type="number"
              name="limit"
              label="预算金额"
              placeholder="0.00"
              :rules="[{ required: true, message: '请填写预算金额' }]"
            >
              <template #extra>
                <span>元</span>
              </template>
            </van-field>
            <van-field name="category" label="类型">
              <template #input>
                <van-radio-group v-model="form.category" direction="horizontal">
                  <van-radio :name="BudgetCategory.Expense">支出</van-radio>
                  <van-radio :name="BudgetCategory.Income">收入</van-radio>
                  <van-radio :name="BudgetCategory.Savings">存款</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field label="相关分类">
              <template #input>
                <div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
                <div v-else class="selected-categories">
                  <span class="ellipsis-text">
                    {{ form.selectedCategories.join('、') }}
                  </span>
                </div>
              </template>
            </van-field>
            <div class="classify-buttons">
              <van-button
                v-if="filteredCategories.length > 0"
                :type="isAllSelected ? 'primary' : 'default'"
                size="small"
                class="classify-btn all-btn"
                @click="toggleAll"
              >
                {{ isAllSelected ? '取消全选' : '全选' }}
              </van-button>
              <van-button
                v-for="item in filteredCategories"
                :key="item.id"
                :type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
                size="small"
                class="classify-btn"
                @click="toggleCategory(item.name)"
              >
                {{ item.name }}
              </van-button>
              <div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
            </div>
            
          </van-cell-group>
        </van-form>
      </div>
      <template #footer>
          <van-button block type="primary" @click="onSubmit">保存预算</van-button>
      </template>
    </PopupContainer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { getCategoryList } from '@/api/transactionCategory'
import { getBudgetList, createBudget, deleteBudget, toggleStopBudget, syncBudget, getBudgetStatistics } from '@/api/budget'
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
import PopupContainer from '@/components/PopupContainer.vue'

const activeTab = ref(BudgetCategory.Expense)
const showAddPopup = ref(false)
const categories = ref([])

const expenseBudgets = ref([])
const incomeBudgets = ref([])
const savingsBudgets = ref([])

const activeTabTitle = computed(() => {
  if (activeTab.value === BudgetCategory.Expense) return '使用'
  return '达成'
})

const overallStats = computed(() => {
  const allBudgets = [...expenseBudgets.value, ...incomeBudgets.value, ...savingsBudgets.value]
  
  const getStatsForType = (type) => {
    const category = activeTab.value
    const filtered = allBudgets.filter(b => b.type === type && b.category === category && !b.isStopped)
    
    if (filtered.length === 0) return { rate: '0.0', current: 0, limit: 0, count: 0 }
    
    const current = filtered.reduce((sum, b) => sum + (b.current || 0), 0)
    const limit = filtered.reduce((sum, b) => sum + (b.limit || 0), 0)
    const rate = limit > 0 ? (current / limit) * 100 : 0
    
    return {
      rate: rate.toFixed(1),
      current,
      limit,
      count: filtered.length
    }
  }

  return {
    week: getStatsForType(BudgetPeriodType.Week),
    month: getStatsForType(BudgetPeriodType.Month),
    year: getStatsForType(BudgetPeriodType.Year)
  }
})

const getValueClass = (rate) => {
  const numRate = parseFloat(rate)
  if (numRate === 0) return ''
  if (activeTab.value === BudgetCategory.Expense) {
    if (numRate >= 100) return 'expense'
    if (numRate >= 80) return 'warning'
    return 'income'
  } else {
    if (numRate >= 100) return 'income'
    if (numRate >= 80) return 'warning'
    return 'expense'
  }
}

const form = reactive({
  name: '',
  type: BudgetPeriodType.Month,
  category: BudgetCategory.Expense,
  limit: '',
  selectedCategories: []
})

const filteredCategories = computed(() => {
  const targetType = form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
  return categories.value.filter(c => c.type === targetType)
})

const toggleCategory = (name) => {
  const index = form.selectedCategories.indexOf(name)
  if (index > -1) {
    form.selectedCategories.splice(index, 1)
  } else {
    form.selectedCategories.push(name)
  }
}

const isAllSelected = computed(() => {
  return filteredCategories.value.length > 0 && 
         filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
})

const toggleAll = () => {
  if (isAllSelected.value) {
    form.selectedCategories = []
  } else {
    form.selectedCategories = filteredCategories.value.map(c => c.name)
  }
}

const fetchBudgetList = async () => {
  try {
    const res = await getBudgetList()
    if (res.success) {
      const data = res.data || []
      expenseBudgets.value = data.filter(b => b.category === BudgetCategory.Expense)
      incomeBudgets.value = data.filter(b => b.category === BudgetCategory.Income)
      savingsBudgets.value = data.filter(b => b.category === BudgetCategory.Savings)
    }
  } catch (err) {
    console.error('加载预算列表失败', err)
  }
}

onMounted(async () => {
  try {
    const [catRes] = await Promise.all([
      getCategoryList(),
      fetchBudgetList()
    ])
    if (catRes.success) {
      categories.value = catRes.data || []
    }
  } catch (err) {
    console.error('获取初始化数据失败', err)
  }
})

watch(() => form.category, () => {
  form.selectedCategories = []
})

const formatMoney = (val) => {
  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const getPeriodLabel = (type) => {
  const map = {
    [BudgetPeriodType.Week]: '本周',
    [BudgetPeriodType.Month]: '本月',
    [BudgetPeriodType.Year]: '本年',
    [BudgetPeriodType.Longterm]: '长期'
  }
  return map[type] || '周期'
}

const getProgressColor = (budget) => {
  const ratio = budget.current / budget.limit
  if (ratio >= 1) return '#ee0a24' // 危险红色
  if (ratio > 0.8) return '#ff976a' // 警告橙色
  return '#1989fa' // 正常蓝色
}

const getIncomeProgressColor = (budget) => {
  const ratio = budget.current / budget.limit
  if (ratio >= 1) return '#07c160' // 完成绿色
  return '#1989fa' // 蓝色
}

const refDateMap = {}

const handleSwitchPeriod = async (budget, direction) => {
  if (budget.type === BudgetPeriodType.Longterm) {
    showToast('长期预算不支持切换周期')
    return
  }

  // 获取或初始化该预算的参考日期
  let currentRefDate = refDateMap[budget.id] || new Date()
  const date = new Date(currentRefDate)

  if (budget.type === BudgetPeriodType.Week) {
    date.setDate(date.getDate() + direction * 7)
  } else if (budget.type === BudgetPeriodType.Month) {
    date.setMonth(date.getMonth() + direction)
  } else if (budget.type === BudgetPeriodType.Year) {
    date.setFullYear(date.getFullYear() + direction)
  }

  try {
    const res = await getBudgetStatistics(budget.id, date.toISOString())
    if (res.success) {
      refDateMap[budget.id] = date
      // 更新当前列表中的预算对象信息
      Object.assign(budget, res.data)
    }
  } catch (err) {
    showToast('加载历史统计失败')
    console.error('加载预算历史统计失败', err)
  }
}

const handleDelete = (budget) => {
  showConfirmDialog({
    title: '确认删除',
    message: `确定要删除预算 "${budget.name}" 吗？`,
  }).then(async () => {
    try {
      const res = await deleteBudget(budget.id)
      if (res.success) {
        showToast('已删除')
        fetchBudgetList()
      }
    } catch (err) {
      showToast('删除失败')
      console.error('删除预算失败', err)
    }
  }).catch(() => {})
}

const handleSync = async (budget) => {
  budget.syncing = true
  try {
    const refDate = refDateMap[budget.id] ? refDateMap[budget.id].toISOString() : null
    const res = await syncBudget(budget.id, refDate)
    if (res.success) {
      showToast('同步成功')
      Object.assign(budget, res.data)
    }
  } catch (err) {
    showToast('同步失败')
    console.error('同步预算失败', err)
  } finally {
    budget.syncing = false
  }
}

const handleToggleStop = async (budget) => {
  try {
    const res = await toggleStopBudget(budget.id)
    if (res.success) {
      showToast(budget.isStopped ? '已恢复' : '已停止')
      // 切换停止状态后刷新列表
      fetchBudgetList()
    }
  } catch (err) {
    showToast('操作失败')
    console.error('切换预算状态失败', err)
  }
}

const onSubmit = async () => {
  try {
    const res = await createBudget({
      ...form,
      limit: parseFloat(form.limit),
      categoryNames: form.selectedCategories
    })
    if (res.success) {
      showToast('保存成功')
      showAddPopup.value = false
      fetchBudgetList()
      // 重置表单
      form.name = ''
      form.limit = ''
      form.selectedCategories = []
    }
  } catch (err) {
    showToast('保存失败')
    console.error('保存预算失败', err)
  }
}
</script>

<style scoped>
.budget-list {
  padding-top: 8px;
  padding-bottom: 20px;
}

.budget-list :deep(.van-swipe-cell) {
  margin: 0 12px 12px;
}

.budget-card {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.budget-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.amount-info {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  text-align: center;
}

.info-item .label {
  font-size: 12px;
  color: #969799;
  margin-bottom: 4px;
}

.info-item .value {
  font-size: 15px;
  font-weight: 600;
}

.value.expense {
  color: #ee0a24;
}

.value.income {
  color: #07c160;
}

.progress-section {
  margin-bottom: 16px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
  color: #646566;
}

.percent.warning {
  color: #ff976a;
  font-weight: bold;
}

.percent.income {
  color: #07c160;
  font-weight: bold;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #969799;
  padding-top: 12px;
  border-top: 1px solid #ebedf0;
}

.period-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-icon {
  padding: 4px;
  font-size: 12px;
  color: #1989fa;
  cursor: pointer;
}

.nav-icon:active {
  opacity: 0.6;
}

.delete-button {
  height: 100%;
}

@media (prefers-color-scheme: dark) {
  .card-footer {
    border-top-color: #2c2c2c;
  }
}

.add-budget-form {
  padding: 20px 0;
}

.selected-categories {
  display: flex;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  overflow: hidden;
}

.ellipsis-text {
  font-size: 14px;
  color: #323233;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.classify-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  max-height: 200px;
  overflow-y: auto;
}

.classify-btn {
  flex: 0 0 auto;
  min-width: 60px;
  border-radius: 16px;
  padding: 0 12px;
}

.all-btn {
  font-weight: bold;
  border-style: dashed;
}

.no-data {
  font-size: 13px;
  color: #969799;
  padding: 8px 0;
}

:deep(.van-tabs__nav--card) {
  margin: 0 12px;
}

.summary-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
  margin-top: 12px;
  margin-bottom: 4px;
}

.summary-item {
  flex: 1;
}

.summary-item .label {
  font-size: 12px;
  color: #969799;
  margin-bottom: 6px;
}

.summary-item .value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #323233;
}

.summary-item .value.expense {
  color: #ee0a24;
}

.summary-item .value.income {
  color: #07c160;
}

.summary-item .value.warning {
  color: #ff976a;
}

.summary-item .unit {
  font-size: 11px;
  margin-left: 1px;
  font-weight: normal;
}

.summary-item .sub-label {
  font-size: 11px;
  color: #c8c9cc;
}

.divider {
  width: 1px;
  height: 24px;
  background-color: #ebedf0;
  margin: 0 4px;
}

@media (prefers-color-scheme: dark) {
  .summary-item .value {
    color: #f5f5f5;
  }
  .divider {
    background-color: #2c2c2c;
  }
}
</style>
