EmailBill/Web/src/views/PeriodicRecord.vue

<template>
  <div class="page-container-flex periodic-record">
    <van-nav-bar 
      :title="navTitle" 
      left-text="返回"
      left-arrow
      @click-left="handleBack" 
      placeholder
    />

    <!-- 下拉刷新区域 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 加载提示 -->
      <van-loading v-if="loading && !periodicList.length" vertical style="padding: 50px 0">
        加载中...
      </van-loading>

      <!-- 周期性账单列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="periodic-list"
      >
        <van-cell-group inset v-for="item in periodicList" :key="item.id" class="periodic-item">
          <van-swipe-cell>
            <div @click="editPeriodic(item)">
              <van-cell :title="item.reason || '无摘要'" :label="getPeriodicTypeText(item)">
                <template #value>
                  <div class="amount-info">
                    <span :class="['amount', item.type === 1 ? 'income' : 'expense']">
                      {{ item.type === 1 ? '+' : '-' }}{{ item.amount.toFixed(2) }}
                    </span>
                  </div>
                </template>
              </van-cell>
              <van-cell title="分类" :value="item.classify || '未分类'" />
              <van-cell title="状态">
                <template #value>
                  <van-switch 
                    :model-value="item.isEnabled" 
                    size="20px"
                    @update:model-value="(val) => toggleEnabled(item.id, val)"
                    @click.stop
                  />
                </template>
              </van-cell>
            </div>
            <template #right>
              <van-button 
                square
                type="danger" 
                text="删除"
                class="delete-button"
                @click="deletePeriodic(item)"
              />
            </template>
          </van-swipe-cell>
        </van-cell-group>

        <!-- 空状态 -->
        <van-empty 
          v-if="!loading && !periodicList.length" 
          description="暂无周期性账单"
          image="search"
        />
      </van-list>

      <!-- 底部安全距离 -->
      <div style="height: calc(80px + env(safe-area-inset-bottom, 0px))"></div>
    </van-pull-refresh>

    <!-- 底部新增按钮 -->
    <div class="bottom-button">
      <van-button 
        type="primary" 
        size="large" 
        round 
        icon="plus"
        @click="openAddDialog"
      >
        新增周期账单
      </van-button>
    </div>

    <!-- 新增/编辑弹窗 -->
    <van-popup 
      v-model:show="dialogVisible" 
      position="bottom"
      :style="{ height: '85%' }"
      round
      closeable
    >
      <div class="popup-container">
        <div class="popup-header-fixed">
          <h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
        </div>
        
        <div class="popup-scroll-content">
        <van-form @submit="onSubmit">
          <van-cell-group inset title="周期设置">
            <van-field
              v-model="form.periodicTypeText"
              is-link
              readonly
              name="periodicType"
              label="周期"
              placeholder="请选择周期类型"
              @click="showPeriodicTypePicker = true"
              :rules="[{ required: true, message: '请选择周期类型' }]"
            />

            <!-- 每周配置 -->
            <van-field
              v-if="form.periodicType === 1"
              v-model="form.weekdaysText"
              is-link
              readonly
              name="weekdays"
              label="星期"
              placeholder="请选择星期几"
              @click="showWeekdaysPicker = true"
              :rules="[{ required: true, message: '请选择星期几' }]"
            />

            <!-- 每月配置 -->
            <van-field
              v-if="form.periodicType === 2"
              v-model="form.monthDaysText"
              is-link
              readonly
              name="monthDays"
              label="日期"
              placeholder="请选择每月的日期"
              @click="showMonthDaysPicker = true"
              :rules="[{ required: true, message: '请选择日期' }]"
            />

            <!-- 每季度配置 -->
            <van-field
              v-if="form.periodicType === 3"
              v-model="form.quarterDay"
              name="quarterDay"
              label="季度第几天"
              placeholder="请输入季度开始后第几天"
              type="number"
              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
            />

            <!-- 每年配置 -->
            <van-field
              v-if="form.periodicType === 4"
              v-model="form.yearDay"
              name="yearDay"
              label="年第几天"
              placeholder="请输入年开始后第几天"
              type="number"
              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
            />
          </van-cell-group>

          <van-cell-group inset title="基本信息">
            <van-field
              v-model="form.reason"
              name="reason"
              label="摘要"
              placeholder="请输入交易摘要"
              type="textarea"
              rows="2"
              autosize
              maxlength="200"
              show-word-limit
            />
            <van-field
              v-model="form.amount"
              name="amount"
              label="金额"
              placeholder="请输入金额"
              type="number"
              :rules="[{ required: true, message: '请输入金额' }]"
            />
            <van-field
              v-model="form.typeText"
              is-link
              readonly
              name="type"
              label="类型"
              placeholder="请选择交易类型"
              @click="showTypePicker = true"
              :rules="[{ required: true, message: '请选择交易类型' }]"
            />
            <van-field name="classify" label="分类">
              <template #input>
                <span v-if="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
                <span v-else>{{ form.classify }}</span>
              </template>
            </van-field>
            
            <!-- 分类按钮网格 -->
            <div class="classify-buttons">
              <van-button
                v-for="item in classifyColumns"
                :key="item.id"
                :type="form.classify === item.text ? 'primary' : 'default'"
                size="small"
                class="classify-btn"
                @click="selectClassify(item.text)"
              >
                {{ item.text }}
              </van-button>
              <van-button
                type="success"
                size="small"
                class="classify-btn"
                @click="showAddClassify = true"
              >
                + 新增
              </van-button>
              <van-button
                v-if="form.classify"
                type="warning"
                size="small"
                class="classify-btn"
                @click="clearClassify"
              >
                清空
              </van-button>
            </div>
          </van-cell-group>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" :loading="submitting">
              {{ isEdit ? '更新' : '确认添加' }}
            </van-button>
          </div>
        </van-form>
        </div>
      </div>
    </van-popup>

    <!-- 交易类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom" round>
      <van-picker
        :columns="typeColumns"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
      />
    </van-popup>

    <!-- 周期类型选择器 -->
    <van-popup v-model:show="showPeriodicTypePicker" position="bottom" round>
      <van-picker
        :columns="periodicTypeColumns"
        @confirm="onPeriodicTypeConfirm"
        @cancel="showPeriodicTypePicker = false"
      />
    </van-popup>

    <!-- 星期选择器 -->
    <van-popup v-model:show="showWeekdaysPicker" position="bottom" round>
      <van-picker
        :columns="weekdaysColumns"
        @confirm="onWeekdaysConfirm"
        @cancel="showWeekdaysPicker = false"
      />
    </van-popup>

    <!-- 日期选择器 -->
    <van-popup v-model:show="showMonthDaysPicker" position="bottom" round>
      <van-picker
        :columns="monthDaysColumns"
        @confirm="onMonthDaysConfirm"
        @cancel="showMonthDaysPicker = false"
      />
    </van-popup>

    <!-- 新增分类对话框 -->
    <van-dialog 
      v-model:show="showAddClassify" 
      title="新增交易分类" 
      show-cancel-button
      @confirm="addNewClassify"
    >
      <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { 
  getPeriodicList, 
  createPeriodic, 
  updatePeriodic,
  deletePeriodic as deletePeriodicApi,
  togglePeriodicEnabled
} from '@/api/transactionPeriodic'
import { getCategoryList, createCategory } from '@/api/transactionCategory'

const router = useRouter()
const navTitle = ref('周期账单')

const periodicList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)

// 弹窗相关
const dialogVisible = ref(false)
const isEdit = ref(false)
const submitting = ref(false)
const showTypePicker = ref(false)
const showPeriodicTypePicker = ref(false)
const showWeekdaysPicker = ref(false)
const showMonthDaysPicker = ref(false)
const showAddClassify = ref(false)
const newClassify = ref('')

// 分类列表
const classifyColumns = ref([])

// 交易类型
const typeColumns = [
  { text: '支出', value: 0 },
  { text: '收入', value: 1 },
  { text: '不计入收支', value: 2 }
]

// 周期类型
const periodicTypeColumns = [
  { text: '每天', value: 0 },
  { text: '每周', value: 1 },
  { text: '每月', value: 2 },
  { text: '每季度', value: 3 },
  { text: '每年', value: 4 }
]

// 星期
const weekdaysColumns = [
  { text: '周日', value: 0 },
  { text: '周一', value: 1 },
  { text: '周二', value: 2 },
  { text: '周三', value: 3 },
  { text: '周四', value: 4 },
  { text: '周五', value: 5 },
  { text: '周六', value: 6 }
]

// 月份日期
const monthDaysColumns = Array.from({ length: 31 }, (_, i) => ({
  text: `${i + 1}日`,
  value: i + 1
}))

// 表单数据
const form = reactive({
  id: null,
  reason: '',
  amount: '',
  type: 0,
  typeText: '',
  classify: '',
  periodicType: 0,
  periodicTypeText: '',
  periodicConfig: '',
  // 每周
  weekdays: [],
  weekdaysText: '',
  // 每月
  monthDays: [],
  monthDaysText: '',
  // 每季度
  quarterDay: '',
  // 每年
  yearDay: ''
})

// 加载数据
const loadData = async (isRefresh = false) => {
  if (isRefresh) {
    pageIndex.value = 1
    periodicList.value = []
    finished.value = false
  }

  loading.value = true
  try {
    const params = {
      pageIndex: pageIndex.value,
      pageSize: pageSize
    }
    
    const response = await getPeriodicList(params)
    
    if (response.success) {
      const newList = response.data || []
      total.value = response.total || 0
      
      if (isRefresh) {
        periodicList.value = newList
      } else {
        periodicList.value = [...periodicList.value, ...newList]
      }
      
      if (newList.length === 0 || newList.length < pageSize) {
        finished.value = true
      } else {
        finished.value = false
        pageIndex.value++
      }
    } else {
      showToast(response.message || '加载数据失败')
      finished.value = true
    }
  } catch (error) {
    console.error('加载数据出错:', error)
    showToast('加载数据出错')
    finished.value = true
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  loadData(true)
}

// 加载更多
const onLoad = () => {
  loadData(false)
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 获取周期类型文本
const getPeriodicTypeText = (item) => {
  const typeMap = {
    0: '每天',
    1: '每周',
    2: '每月',
    3: '每季度',
    4: '每年'
  }
  
  let text = typeMap[item.periodicType] || '未知'
  
  if (item.periodicConfig) {
    switch (item.periodicType) {
      case 1: // 每周
        { 
          const weekdays = item.periodicConfig.split(',').map(
            d => {
              const dayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
              return dayMap[parseInt(d)] || ''
            }).join('、')
          text += ` (${weekdays})`
          break 
        }
      case 2: // 每月
        { 
          const days = item.periodicConfig.split(',').join('、')
          text += ` (${days}日)`
          break 
        }
      case 3: // 每季度
        text += ` (第${item.periodicConfig}天)`
        break
      case 4: // 每年
        text += ` (第${item.periodicConfig}天)`
        break
    }
  }
  
  return text
}

// 打开新增弹窗
const openAddDialog = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
  // 加载分类列表
  loadClassifyList(form.type)
}

// 加载分类列表
const loadClassifyList = async (type = null) => {
  try {
    const response = await getCategoryList(type)
    if (response.success) {
      classifyColumns.value = (response.data || []).map(item => ({
        text: item.name,
        value: item.name,
        id: item.id
      }))
    }
  } catch (error) {
    console.error('加载分类列表出错:', error)
  }
}

// 编辑
const editPeriodic = (item) => {
  isEdit.value = true
  form.id = item.id
  form.reason = item.reason
  form.amount = item.amount.toString()
  form.type = item.type
  form.typeText = typeColumns.find(t => t.value === item.type)?.text || ''
  form.classify = item.classify
  form.periodicType = item.periodicType
  form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
  
  // 加载对应类型的分类列表
  loadClassifyList(item.type)
  
  // 解析周期配置
  if (item.periodicConfig) {
    switch (item.periodicType) {
      case 1: // 每周
        form.weekdays = item.periodicConfig.split(',').map(d => parseInt(d))
        form.weekdaysText = form.weekdays.map(d => {
          return weekdaysColumns.find(w => w.value === d)?.text || ''
        }).join('、')
        break
      case 2: // 每月
        form.monthDays = item.periodicConfig.split(',').map(d => parseInt(d))
        form.monthDaysText = form.monthDays.map(d => `${d}日`).join('、')
        break
      case 3: // 每季度
        form.quarterDay = item.periodicConfig
        break
      case 4: // 每年
        form.yearDay = item.periodicConfig
        break
    }
  }
  
  dialogVisible.value = true
}

// 删除
const deletePeriodic = async (item) => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: '确定要删除这条周期性账单吗？',
    })

    const response = await deletePeriodicApi(item.id)
    if (response.success) {
      showToast('删除成功')
      loadData(true)
    } else {
      showToast(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除出错:', error)
      showToast('删除失败')
    }
  }
}

// 启用/禁用
const toggleEnabled = async (id, enabled) => {
  try {
    const response = await togglePeriodicEnabled(id, enabled)
    if (response.success) {
      showToast(enabled ? '已启用' : '已禁用')
      // 更新本地数据
      const item = periodicList.value.find(p => p.id === id)
      if (item) {
        item.isEnabled = enabled
      }
    } else {
      showToast(response.message || '操作失败')
      // 恢复状态
      loadData(true)
    }
  } catch (error) {
    console.error('操作失败:', error)
    showToast('操作失败')
    loadData(true)
  }
}

// 重置表单
const resetForm = () => {
  form.id = null
  form.reason = ''
  form.amount = ''
  form.type = 0
  form.typeText = ''
  form.classify = ''
  form.periodicType = 0
  form.periodicTypeText = ''
  form.periodicConfig = ''
  form.weekdays = []
  form.weekdaysText = ''
  form.monthDays = []
  form.monthDaysText = ''
  form.quarterDay = ''
  form.yearDay = ''
}

// 选择器确认事件
const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
  form.type = selectedValues[0]
  form.typeText = selectedOptions[0].text
  showTypePicker.value = false
  // 清空已选的分类
  form.classify = ''
  // 重新加载对应类型的分类列表
  loadClassifyList(form.type)
}

const onPeriodicTypeConfirm = ({ selectedValues, selectedOptions }) => {
  form.periodicType = selectedValues[0]
  form.periodicTypeText = selectedOptions[0].text
  // 清空之前的配置
  form.weekdays = []
  form.weekdaysText = ''
  form.monthDays = []
  form.monthDaysText = ''
  form.quarterDay = ''
  form.yearDay = ''
  showPeriodicTypePicker.value = false
}

const onWeekdaysConfirm = ({ selectedValues, selectedOptions }) => {
  form.weekdays = [selectedValues[0]]
  form.weekdaysText = selectedOptions[0].text
  showWeekdaysPicker.value = false
}

const onMonthDaysConfirm = ({ selectedValues, selectedOptions }) => {
  form.monthDays = [selectedValues[0]]
  form.monthDaysText = selectedOptions[0].text
  showMonthDaysPicker.value = false
}

// 选择分类
const selectClassify = (classify) => {
  form.classify = classify
}

// 清空分类
const clearClassify = () => {
  form.classify = ''
  showToast('已清空分类')
}

// 新增分类
const addNewClassify = async () => {
  if (!newClassify.value.trim()) {
    showToast('请输入分类名称')
    return
  }
  
  try {
    const categoryName = newClassify.value.trim()
    
    // 调用API创建分类
    const response = await createCategory({
      name: categoryName,
      type: form.type
    })
    
    if (response.success) {
      showToast('分类创建成功')
      // 重新加载分类列表
      await loadClassifyList(form.type)
      form.classify = categoryName
    } else {
      showToast(response.message || '创建分类失败')
    }
  } catch (error) {
    console.error('创建分类出错:', error)
    showToast('创建分类失败')
  } finally {
    newClassify.value = ''
    showAddClassify.value = false
  }
}

// 提交表单
const onSubmit = async () => {
  try {
    submitting.value = true
    
    // 构建周期配置
    let periodicConfig = ''
    switch (form.periodicType) {
      case 1: // 每周
        if (!form.weekdays.length) {
          showToast('请选择星期几')
          return
        }
        periodicConfig = form.weekdays.join(',')
        break
      case 2: // 每月
        if (!form.monthDays.length) {
          showToast('请选择日期')
          return
        }
        periodicConfig = form.monthDays.join(',')
        break
      case 3: // 每季度
        if (!form.quarterDay) {
          showToast('请输入季度开始后第几天')
          return
        }
        periodicConfig = form.quarterDay
        break
      case 4: // 每年
        if (!form.yearDay) {
          showToast('请输入年开始后第几天')
          return
        }
        periodicConfig = form.yearDay
        break
    }
    
    const data = {
      periodicType: form.periodicType,
      periodicConfig: periodicConfig,
      amount: parseFloat(form.amount),
      type: form.type,
      classify: form.classify || '',
      reason: form.reason || ''
    }
    
    let response
    if (isEdit.value) {
      data.id = form.id
      data.isEnabled = true
      response = await updatePeriodic(data)
    } else {
      response = await createPeriodic(data)
    }
    
    if (response.success) {
      showToast(isEdit.value ? '更新成功' : '添加成功')
      dialogVisible.value = false
      loadData(true)
    } else {
      showToast(response.message || (isEdit.value ? '更新失败' : '添加失败'))
    }
  } catch (error) {
    console.error('提交出错:', error)
    showToast((isEdit.value ? '更新' : '添加') + '失败')
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  // van-list 会自动触发 onLoad
})
</script>

<style scoped>
.periodic-record {
  background: var(--van-background);
}

.periodic-list {
  padding: 16px 0;
}

.periodic-item {
  margin-bottom: 16px;
}

.amount-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount {
  font-size: 18px;
  font-weight: bold;
}

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

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

.delete-button {
  height: 100%;
}

.classify-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}

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

</style>