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>
        <ClassifySelector
          v-model="selectedCategories"
          :type="2"
          multiple
          :show-add="false"
          :show-clear="false"
        />
      </div>
    </div>
    
    <template #footer>
      <van-button block round type="primary" @click="onSubmit">保存配置</van-button>
    </template>
  </PopupContainer>
</template>

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

const emit = defineEmits(['success'])

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

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

defineExpose({
  open
})

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: var(--van-text-color-2);
  margin: 0;
}

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

.no-data {
  text-align: center;
  color: var(--van-text-color-2);
  width: 100%;
  padding: 20px 0;
}
</style>