EmailBill/Web/src/views/budgetV2/modules/SavingsBudgetContent.vue

<template>
  <!-- 存款计划列表 -->
  <div class="budget-list">
    <template v-if="budgets?.length > 0">
      <BudgetCard
        v-for="budget in budgets"
        :key="budget.id"
        :budget="budget"
        :progress-color="getProgressColor(budget)"
        :percent-class="{ income: budget.current / budget.limit >= 1 }"
        :period-label="getPeriodLabel(budget.type)"
        style="margin: 0 12px 12px"
        @show-detail="handleShowDetail"
      >
        <template #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>
        </template>

        <template #footer>
          <div class="card-footer-actions">
            <van-button
              size="small"
              icon="arrow-left"
              plain
              type="primary"
              @click.stop="$emit('savings-nav', budget, -1)"
            />
            <span class="current-date-label">
              {{ getSavingsDateLabel(budget) }}
            </span>
            <van-button
              size="small"
              icon="arrow"
              plain
              type="primary"
              icon-position="right"
              :disabled="disabledSavingsNextNav(budget)"
              @click.stop="$emit('savings-nav', budget, 1)"
            />
          </div>
        </template>
      </BudgetCard>
    </template>
    <van-empty
      v-else
      description="暂无存款计划"
    />
  </div>

  <!-- 计划存款明细弹窗 -->
  <PopupContainerV2
    v-model:show="showDetailPopup"
    title="计划存款明细"
    :height="'85%'"
  >
    <div class="popup-body">
      <div
        v-if="currentBudget"
        class="detail-content"
      >
        <!-- 明细表格 -->
        <div
          v-if="currentBudget.details"
          class="detail-tables"
        >
          <!-- 收入明细 -->
          <div class="detail-section income-section">
            <div class="section-title">
              <van-icon name="balance-o" />
              收入明细
            </div>
            <div class="detail-table">
              <div
                v-for="item in currentBudget.details.incomeItems"
                :key="item.id"
                class="detail-item"
              >
                <div class="item-header">
                  <span class="item-name">{{ item.name }}</span>
                  <van-tag
                    size="mini"
                    :type="item.type === 1 ? 'default' : 'primary'"
                  >
                    {{ item.type === 1 ? '月度' : '年度' }}
                  </van-tag>
                </div>
                <div class="item-amounts">
                  <div class="amount-row">
                    <span class="amount-label">预算</span>
                    <span class="amount-value">¥{{ formatMoney(item.budgetLimit) }}</span>
                  </div>
                  <div class="amount-row">
                    <span class="amount-label">实际</span>
                    <span
                      class="amount-value"
                      :class="{ warning: item.isOverBudget }"
                    >
                      ¥{{ formatMoney(item.actualAmount) }}
                    </span>
                  </div>
                  <div class="amount-row highlight">
                    <span class="amount-label">计算用</span>
                    <span class="amount-value income">¥{{ formatMoney(item.effectiveAmount) }}</span>
                  </div>
                </div>
                <div class="item-note">
                  <van-tag
                    size="mini"
                    plain
                    :type="item.isOverBudget ? 'warning' : 'success'"
                  >
                    {{ item.calculationNote }}
                  </van-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 支出明细 -->
          <div class="detail-section expense-section">
            <div class="section-title">
              <van-icon name="bill-o" />
              支出明细
            </div>
            <div class="detail-table">
              <div
                v-for="item in currentBudget.details.expenseItems"
                :key="item.id"
                class="detail-item"
                :class="{ overbudget: item.isOverBudget }"
              >
                <div class="item-header">
                  <span class="item-name">{{ item.name }}</span>
                  <van-tag
                    size="mini"
                    :type="item.type === 1 ? 'default' : 'primary'"
                  >
                    {{ item.type === 1 ? '月度' : '年度' }}
                  </van-tag>
                </div>
                <div class="item-amounts">
                  <div class="amount-row">
                    <span class="amount-label">预算</span>
                    <span class="amount-value">¥{{ formatMoney(item.budgetLimit) }}</span>
                  </div>
                  <div class="amount-row">
                    <span class="amount-label">实际</span>
                    <span
                      class="amount-value"
                      :class="{ danger: item.isOverBudget }"
                    >
                      ¥{{ formatMoney(item.actualAmount) }}
                    </span>
                  </div>
                  <div class="amount-row highlight">
                    <span class="amount-label">计算用</span>
                    <span class="amount-value expense">¥{{ formatMoney(item.effectiveAmount) }}</span>
                  </div>
                </div>
                <div class="item-note">
                  <van-tag
                    size="mini"
                    plain
                    :type="item.isOverBudget ? 'danger' : 'default'"
                  >
                    {{ item.calculationNote }}
                  </van-tag>
                  <van-tag
                    v-if="item.isOverBudget"
                    size="mini"
                    type="danger"
                  >
                    超支
                  </van-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 计算汇总 -->
          <div class="detail-section formula-section">
            <div class="section-title">
              <van-icon name="calculator-o" />
              计算汇总
            </div>
            <div class="formula-box">
              <div class="formula-row">
                <span class="formula-label">收入合计</span>
                <span class="formula-value income">
                  ¥{{ formatMoney(currentBudget.details.summary.totalIncomeBudget) }}
                </span>
              </div>
              <div class="formula-row">
                <span class="formula-label">支出合计</span>
                <span class="formula-value expense">
                  ¥{{ formatMoney(currentBudget.details.summary.totalExpenseBudget) }}
                </span>
              </div>
              <div class="formula-row highlight">
                <span class="formula-label">计划存款</span>
                <span class="formula-value primary">
                  ¥{{ formatMoney(currentBudget.details.summary.plannedSavings) }}
                </span>
              </div>
            </div>
            <div class="formula-text">
              {{ currentBudget.details.summary.calculationFormula }}
            </div>
          </div>
        </div>

        <!-- 旧版汇总（无明细数据时显示） -->
        <div
          v-else
          class="legacy-summary"
        >
          <div class="detail-section income-section">
            <div class="section-title">
              <van-icon name="balance-o" />
              收入预算
            </div>
            <div class="section-content">
              <div class="detail-row">
                <span class="detail-label">预算限额</span>
                <span class="detail-value income">¥{{ formatMoney(incomeLimit) }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">实际收入</span>
                <span class="detail-value">¥{{ formatMoney(incomeCurrent) }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section expense-section">
            <div class="section-title">
              <van-icon name="bill-o" />
              支出预算
            </div>
            <div class="section-content">
              <div class="detail-row">
                <span class="detail-label">预算限额</span>
                <span class="detail-value expense">¥{{ formatMoney(expenseLimit) }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">实际支出</span>
                <span class="detail-value">¥{{ formatMoney(expenseCurrent) }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section formula-section">
            <div class="section-title">
              <van-icon name="calculator-o" />
              计划存款公式
            </div>
            <div class="formula-box">
              <div class="formula-item">
                <span class="formula-label">收入预算</span>
                <span class="formula-value income">¥{{ formatMoney(incomeLimit) }}</span>
              </div>
              <div class="formula-operator">
                -
              </div>
              <div class="formula-item">
                <span class="formula-label">支出预算</span>
                <span class="formula-value expense">¥{{ formatMoney(expenseLimit) }}</span>
              </div>
              <div class="formula-operator">
                =
              </div>
              <div class="formula-item">
                <span class="formula-label">计划存款</span>
                <span class="formula-value">¥{{ formatMoney(currentBudget.limit) }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section result-section">
            <div class="section-title">
              <van-icon name="chart-trending-o" />
              存款结果
            </div>
            <div class="section-content">
              <div class="detail-row">
                <span class="detail-label">计划存款</span>
                <span class="detail-value">¥{{ formatMoney(currentBudget.limit) }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">实际存款</span>
                <span
                  class="detail-value"
                  :class="{ income: currentBudget.current >= currentBudget.limit }"
                >¥{{ formatMoney(currentBudget.current) }}</span>
              </div>
              <div class="detail-row highlight">
                <span class="detail-label">还差</span>
                <span class="detail-value expense">¥{{
                  formatMoney(Math.max(0, currentBudget.limit - currentBudget.current))
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PopupContainerV2>
</template>

<script setup>
import { ref, computed } from 'vue'
import BudgetCard from '@/components/Budget/BudgetCard.vue'
import { BudgetPeriodType } from '@/constants/enums'
import PopupContainerV2 from '@/components/PopupContainerV2.vue'

// Props
const props = defineProps({
  budgets: {
    type: Array,
    default: () => []
  },
  incomeBudgets: {
    type: Array,
    default: () => []
  },
  expenseBudgets: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['savings-nav'])

// 明细弹窗状态
const showDetailPopup = ref(false)
const currentBudget = ref(null)

// 处理显示明细
const handleShowDetail = (budget) => {
  console.log('=== 存款预算数据 ===')
  console.log('完整数据:', budget)
  console.log('是否有 details:', !!budget.details)
  console.log('是否有 Details:', !!budget.Details)
  if (budget.details) {
    console.log('details 内容:', budget.details)
  }
  if (budget.Details) {
    console.log('Details 内容:', budget.Details)
  }
  console.log('===================')
  
  currentBudget.value = budget
  showDetailPopup.value = true
}

// 匹配收入预算
const matchedIncomeBudget = computed(() => {
  if (!currentBudget.value) {return null}
  return props.incomeBudgets?.find(
    b => b.periodStart === currentBudget.value.periodStart && b.type === currentBudget.value.type
  )
})

// 匹配支出预算
const matchedExpenseBudget = computed(() => {
  if (!currentBudget.value) {return null}
  return props.expenseBudgets?.find(
    b => b.periodStart === currentBudget.value.periodStart && b.type === currentBudget.value.type
  )
})

// 收入预算数据
const incomeLimit = computed(() => matchedIncomeBudget.value?.limit || 0)
const incomeCurrent = computed(() => matchedIncomeBudget.value?.current || 0)

// 支出预算数据
const expenseLimit = computed(() => matchedExpenseBudget.value?.limit || 0)
const expenseCurrent = computed(() => matchedExpenseBudget.value?.current || 0)

// 辅助函数
const formatMoney = (val) => {
  return parseFloat(val || 0).toLocaleString(undefined, {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  })
}

const getPeriodLabel = (type) => {
  if (type === BudgetPeriodType.Month) {
    return '月度'
  }
  if (type === BudgetPeriodType.Year) {
    return '年度'
  }
  return '周期'
}

const getSavingsDateLabel = (budget) => {
  if (!budget.periodStart) {
    return ''
  }
  const date = new Date(budget.periodStart)
  if (budget.type === BudgetPeriodType.Year) {
    return `${date.getFullYear()}年`
  } else {
    return `${date.getFullYear()}年${date.getMonth() + 1}月`
  }
}

const disabledSavingsNextNav = (budget) => {
  if (!budget.periodStart) {
    return true
  }
  const date = new Date(budget.periodStart)
  const now = new Date()
  if (budget.type === BudgetPeriodType.Year) {
    return date.getFullYear() === now.getFullYear()
  } else {
    return date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth()
  }
}

const getProgressColor = (budget) => {
  if (!budget.limit || budget.limit === 0) {
    return 'var(--van-primary-color)'
  }

  const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)

  const interpolate = (start, end, t) => {
    return Math.round(start + (end - start) * t)
  }

  const getGradientColor = (value, stops) => {
    let startStop = stops[0]
    let endStop = stops[stops.length - 1]

    for (let i = 0; i < stops.length - 1; i++) {
      if (value >= stops[i].p && value <= stops[i + 1].p) {
        startStop = stops[i]
        endStop = stops[i + 1]
        break
      }
    }

    const range = endStop.p - startStop.p
    const t = (value - startStop.p) / range

    const r = interpolate(startStop.c.r, endStop.c.r, t)
    const g = interpolate(startStop.c.g, endStop.c.g, t)
    const b = interpolate(startStop.c.b, endStop.c.b, t)

    return `rgb(${r}, ${g}, ${b})`
  }

  const stops = [
    { p: 0, c: { r: 245, g: 34, b: 45 } },
    { p: 0.45, c: { r: 255, g: 204, b: 204 } },
    { p: 0.5, c: { r: 240, g: 242, b: 245 } },
    { p: 0.55, c: { r: 186, g: 231, b: 255 } },
    { p: 1, c: { r: 24, g: 144, b: 255 } }
  ]

  return getGradientColor(ratio, stops)
}
</script>

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

.card-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--van-border-color);
}

.current-date-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--van-text-color);
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-item .label {
  font-size: 12px;
  color: var(--van-text-color-2);
  margin-bottom: 4px;
}

.info-item .value {
  font-size: 16px;
  font-weight: 600;
  font-family:
    DIN Alternate,
    system-ui;
}

.info-item .value.expense {
  color: var(--van-danger-color);
}

.info-item .value.income {
  color: var(--van-success-color);
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-section {
  background-color: var(--van-background);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--van-border-color);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--van-text-color);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--van-border-color);
}

.income-section .section-title {
  color: var(--van-success-color);
}

.expense-section .section-title {
  color: var(--van-danger-color);
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.detail-row.highlight {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--van-border-color);
  font-weight: 600;
}

.detail-label {
  font-size: 14px;
  color: var(--van-text-color-2);
}

.detail-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--van-text-color);
}

.detail-value.income {
  color: var(--van-success-color);
}

.detail-value.expense {
  color: var(--van-danger-color);
}

.formula-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background-color: var(--van-light-gray);
  border-radius: 8px;
}

.formula-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}

.formula-label {
  font-size: 12px;
  color: var(--van-text-color-2);
}

.formula-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--van-text-color);
}

.formula-operator {
  font-size: 20px;
  font-weight: 600;
  color: var(--van-text-color-2);
  padding: 0 8px;
}

/* 明细表格样式 */
.detail-tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  background-color: var(--van-light-gray);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid var(--van-gray-4);
}

.detail-item.overbudget {
  border-left-color: var(--van-danger-color);
  background-color: rgba(245, 34, 45, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--van-text-color);
}

.item-amounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.amount-row.highlight {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed var(--van-border-color);
  font-weight: 600;
}

.amount-label {
  color: var(--van-text-color-2);
}

.amount-value {
  font-family: DIN Alternate, system-ui;
  font-weight: 600;
  color: var(--van-text-color);
}

.amount-value.income {
  color: var(--van-success-color);
}

.amount-value.expense {
  color: var(--van-danger-color);
}

.amount-value.warning {
  color: var(--van-warning-color);
}

.amount-value.danger {
  color: var(--van-danger-color);
}

.item-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.formula-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.formula-row.highlight {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--van-border-color);
  font-size: 16px;
  font-weight: 600;
}

.formula-value.primary {
  color: var(--van-primary-color);
  font-size: 18px;
}

.formula-text {
  margin-top: 12px;
  padding: 10px;
  background-color: var(--van-light-gray);
  border-radius: 6px;
  font-size: 13px;
  color: var(--van-text-color-2);
  text-align: center;
  font-family: DIN Alternate, system-ui;
}
</style>