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

    <div class="page-content">
      <van-tabs v-model:active="activeTab" sticky offset-top="46" type="card">
        <van-tab title="支出" name="expense">
          <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 round @click="handleSync(budget)" :loading="budget.syncing" />
                      <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 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="income">
          <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 @click="handleSync(budget)" :loading="budget.syncing" />
                      <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="savings">
          <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 @click="handleSync(budget)" :loading="budget.syncing" />
                      <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>

    <!-- 添加预算弹窗 -->
    <PopupContainer v-model="showAddPopup" title="新增预算" height="70%">
      <div class="add-budget-form">
        <van-form @submit="onSubmit">
          <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="week">周</van-radio>
                  <van-radio name="month">月</van-radio>
                  <van-radio name="year">年</van-radio>
                  <van-radio name="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="expense">支出</van-radio>
                  <van-radio name="income">收入</van-radio>
                  <van-radio name="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>
          <div style="margin: 32px 16px;">
            <van-button round block type="primary" native-type="submit">
              保 存
            </van-button>
          </div>
        </van-form>
      </div>
    </PopupContainer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import PopupContainer from '@/components/PopupContainer.vue'
import { getCategoryList } from '@/api/transactionCategory'

const activeTab = ref('expense')
const showAddPopup = ref(false)
const categories = ref([])

// 模拟数据 (提前定义以防止模板渲染时 undefined)
const expenseBudgets = ref([
  {
    id: 1,
    name: '总支出预算',
    type: 'month',
    limit: 5000,
    current: 3250.5,
    isStopped: false,
    startDate: '2026-01-01',
    period: '2026-01-01 ~ 2026-01-31',
    lastSync: '2026-01-06 10:00',
    syncing: false
  },
  {
    id: 2,
    name: '餐饮美食',
    type: 'month',
    limit: 1500,
    current: 1420,
    isStopped: false,
    startDate: '2026-01-01',
    period: '2026-01-01 ~ 2026-01-31',
    lastSync: '2026-01-06 09:30',
    syncing: false
  },
  {
    id: 3,
    name: '年度旅游',
    type: 'year',
    limit: 10000,
    current: 0,
    isStopped: true,
    startDate: '2026-01-01',
    period: '2026-01-01 ~ 2026-12-31',
    lastSync: '2026-01-01 00:00',
    syncing: false
  }
])

const incomeBudgets = ref([
  {
    id: 101,
    name: '月度薪资',
    type: 'month',
    limit: 10000,
    current: 10000,
    isStopped: false,
    startDate: '2026-01-01',
    period: '2026-01-01 ~ 2026-01-31',
    lastSync: '2026-01-06 10:05',
    syncing: false
  },
  {
    id: 102,
    name: '理财收益',
    type: 'year',
    limit: 2000,
    current: 450.8,
    isStopped: false,
    startDate: '2026-01-01',
    period: '2026-01-01 ~ 2026-12-31',
    lastSync: '2026-01-06 10:05',
    syncing: false
  }
])

const savingsBudgets = ref([
  {
    id: 201,
    name: '买房基金',
    type: 'year',
    limit: 500000,
    current: 125000,
    isStopped: false,
    startDate: '2025-01-01',
    period: '2025-01-01 ~ 2030-12-31',
    lastSync: '2026-01-06 11:00',
    syncing: false
  },
  {
    id: 202,
    name: '养老金',
    type: 'year',
    limit: 1000000,
    current: 50000,
    isStopped: false,
    startDate: '2026-01-01',
    period: '长期',
    lastSync: '2026-01-06 11:00',
    syncing: false
  }
])

const form = reactive({
  name: '',
  type: 'month',
  category: 'expense',
  limit: '',
  selectedCategories: []
})

const categoryTypeMap = {
  expense: 0,
  income: 1,
  savings: 2
}

const filteredCategories = computed(() => {
  const targetType = categoryTypeMap[form.category]
  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)
  }
}

onMounted(async () => {
  try {
    const res = await getCategoryList()
    if (res.success) {
      categories.value = res.data || []
    }
  } catch (err) {
    console.error('加载分类失败', err)
  }
})

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

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

const getPeriodLabel = (type) => {
  const map = {
    week: '本周',
    month: '本月',
    year: '本年'
  }
  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 getPeriodRange = (startDate, type) => {
  if (!startDate || startDate === '长期') return startDate
  const start = new Date(startDate)
  let end = new Date(startDate)
  
  if (type === 'week') {
    end.setDate(start.getDate() + 6)
  } else if (type === 'month') {
    end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
  } else if (type === 'year') {
    end = new Date(start.getFullYear(), 11, 31)
  }
  
  const format = (d) => d.toISOString().split('T')[0]
  return `${format(start)} ~ ${format(end)}`
}

const handleSwitchPeriod = (budget, direction) => {
  if (!budget.startDate || budget.period === '长期') return
  
  const currentStart = new Date(budget.startDate)
  if (budget.type === 'week') {
    currentStart.setDate(currentStart.getDate() + direction * 7)
  } else if (budget.type === 'month') {
    currentStart.setMonth(currentStart.getMonth() + direction)
    currentStart.setDate(1)
  } else if (budget.type === 'year') {
    currentStart.setFullYear(currentStart.getFullYear() + direction)
    currentStart.setMonth(0)
    currentStart.setDate(1)
  }
  
  budget.startDate = currentStart.toISOString().split('T')[0]
  budget.period = getPeriodRange(budget.startDate, budget.type)
  
  // 模拟数据更新
  budget.current = Math.floor(Math.random() * budget.limit * 1.2 * 100) / 100
  budget.lastSync = new Date().toLocaleString()
}

const handleDelete = (budget) => {
  showConfirmDialog({
    title: '确认删除',
    message: `确定要删除预算 "${budget.name}" 吗？`,
  }).then(() => {
    expenseBudgets.value = expenseBudgets.value.filter(b => b.id !== budget.id)
    incomeBudgets.value = incomeBudgets.value.filter(b => b.id !== budget.id)
    savingsBudgets.value = savingsBudgets.value.filter(b => b.id !== budget.id)
    showToast('已删除')
  }).catch(() => {})
}

const handleSync = (budget) => {
  budget.syncing = true
  setTimeout(() => {
    budget.syncing = false
    budget.lastSync = new Date().toLocaleString()
    showToast('同步成功')
  }, 1000)
}

const handleToggleStop = (budget) => {
  budget.isStopped = !budget.isStopped
  showToast(budget.isStopped ? '已停止' : '已恢复')
}

const onSubmit = () => {
  const startDate = new Date()
  if (form.type === 'month') startDate.setDate(1)
  if (form.type === 'year') {
    startDate.setMonth(0)
    startDate.setDate(1)
  }
  const startDateStr = startDate.toISOString().split('T')[0]

  const newBudget = {
    id: Date.now(),
    name: form.name,
    type: form.type,
    limit: parseFloat(form.limit),
    categories: [...form.selectedCategories],
    current: 0,
    isStopped: false,
    startDate: startDateStr,
    period: getPeriodRange(startDateStr, form.type),
    lastSync: '刚刚',
    syncing: false
  }

  if (form.category === 'expense') {
    expenseBudgets.value.unshift(newBudget)
    activeTab.value = 'expense'
  } else if (form.category === 'income') {
    incomeBudgets.value.unshift(newBudget)
    activeTab.value = 'income'
  } else {
    savingsBudgets.value.unshift(newBudget)
    activeTab.value = 'savings'
  }

  showAddPopup.value = false
  showToast('添加成功')
  
  // 重置表单
  form.name = ''
  form.limit = ''
  form.selectedCategories = []
}
</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;
}
</style>
