EmailBill/Web/src/components/Budget/SavingsConfigPopup.vue

<template>
  <PopupContainer 
    v-model="visible" 
    title="设置存款分类" 
    height="60%"
  >
    <div class="savings-config-content">
      <div class="config-header">
        <p class="subtitle">这些分类的统计值将计入“存款”中</p>
      </div>

      <div class="category-section">
        <div class="section-title">可多选分类</div>
        <div class="classify-buttons">
          <van-button
            v-if="incomeCategories.length > 0"
            :type="isAllSelected ? 'primary' : 'default'"
            size="small"
            class="classify-btn all-btn"
            @click="toggleAll"
          >
            {{ isAllSelected ? '取消全选' : '全选' }}
          </van-button>
          <van-button
            v-for="item in incomeCategories"
            :key="item.id"
            :type="selectedCategories.includes(item.name) ? 'primary' : 'default'"
            size="small"
            class="classify-btn"
            style="margin-bottom: 8px; margin-right: 8px;"
            @click="toggleCategory(item.name)"
          >
            {{ item.name }}
          </van-button>
          <div v-if="incomeCategories.length === 0" class="no-data">暂无收入分类</div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <van-button block round type="primary" @click="onSubmit">保存配置</van-button>
    </template>
  </PopupContainer>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { getCategoryList } from '@/api/transactionCategory'
import { getConfig, setConfig } from '@/api/config'
import PopupContainer from '@/components/PopupContainer.vue'

const emit = defineEmits(['success'])

const visible = ref(false)
const categories = ref([])
const selectedCategories = ref([])

const open = async () => {
  visible.value = true
  await fetchCategories()
  await fetchConfig()
}

defineExpose({
  open
})

const incomeCategories = computed(() => {
  return categories.value.filter(c => c.type === 1) // Income = 1
})

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

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

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

const fetchCategories = async () => {
  try {
    const res = await getCategoryList()
    if (res.success) {
      categories.value = res.data || []
    }
  } catch (err) {
    console.error('获取分类列表失败', err)
  }
}

const fetchConfig = async () => {
  try {
    const res = await getConfig('SavingsCategories')
    if (res.success && res.data) {
      selectedCategories.value = res.data.split(',').filter(x => x)
    } else {
      selectedCategories.value = []
    }
  } catch (err) {
    console.error('获取配置失败', err)
  }
}

const onSubmit = async () => {
  showLoadingToast({ message: '保存中...', forbidClick: true })
  try {
    const value = selectedCategories.value.join(',')
    const res = await setConfig('SavingsCategories', value)
    if (res.success) {
      showToast('配置已保存')
      visible.value = false
      emit('success')
    }
  } catch (err) {
    console.error('保存配置失败', err)
    showToast('保存失败')
  } finally {
    closeToast()
  }
}
</script>

<style scoped>
.savings-config-content {
  padding: 16px;
}

.config-header {
  margin-bottom: 20px;
}

.subtitle {
  font-size: 14px;
  color: #969799;
  margin: 0;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.classify-buttons {
  display: flex;
  flex-wrap: wrap;
}

.classify-btn {
  margin-bottom: 8px;
  margin-right: 8px;
  border-radius: 20px;
  min-width: 60px;
}

.all-btn {
  border-style: dashed;
}

.no-data {
  text-align: center;
  color: #969799;
  width: 100%;
  padding: 20px 0;
}
</style>