EmailBill/Web/src/views/UnconfirmedClassification.vue

<template>
  <div class="page-container-flex unconfirmed-classification">
    <van-nav-bar
      title="待确认分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-button 
          v-if="selectedIds.size > 0"
          type="primary" 
          size="small" 
          :loading="confirming"
          @click="handleConfirmSelected"
        >
          确认所选 ({{ selectedIds.size }})
        </van-button>
      </template>
    </van-nav-bar>

    <div class="scroll-content">
      <div v-if="loading && transactions.length === 0" class="loading-container">
        <van-loading vertical>加载中...</van-loading>
      </div>

      <TransactionList
        v-else
        :transactions="displayTransactions"
        :loading="loading"
        :finished="true"
        show-checkbox
        :selected-ids="selectedIds"
        @click="handleTransactionClick"
        @delete="handleTransactionDeleted"
        @update:selected-ids="updateSelectedIds"
      />
    </div>

    <!-- 交易详情弹窗 -->
    <TransactionDetail
      v-model:show="showDetail"
      :transaction="currentTransaction"
      @save="handleDetailSave"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { getUnconfirmedTransactionList, confirmAllUnconfirmed } from '@/api/transactionRecord'
import TransactionList from '@/components/TransactionList.vue'
import TransactionDetail from '@/components/TransactionDetail.vue'

const router = useRouter()
const loading = ref(false)
const confirming = ref(false)
const transactions = ref([])
const showDetail = ref(false)
const currentTransaction = ref(null)
const selectedIds = ref(new Set())

const onClickLeft = () => {
  router.back()
}

const handleConfirmSelected = async () => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: `确定要将这 ${transactions.value.length} 条记录的所有建议分类转为正式分类吗？`
    })

    confirming.value = true
    const response = await confirmAllUnconfirmed(Array.from(selectedIds.value))
    if (response && response.success) {
      showToast(`成功确认 ${response.data} 条记录`)
      loadData()
    } else {
      showToast(response.message || '确认失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      console.error('批量确认出错:', err)
    }
  } finally {
    confirming.value = false
  }
}

// 转换数据格式以适配 TransactionList 组件
const displayTransactions = computed(() => {
  return transactions.value.map(t => ({
    ...t,
    upsetedClassify: t.unconfirmedClassify,
    upsetedType: t.unconfirmedType
  }))
})

const loadData = async () => {
  loading.value = true
  try {
    const response = await getUnconfirmedTransactionList()
    if (response && response.success) {
      transactions.value = (response.data || [])
        .map(t => ({
          ...t,
          upsetedClassify: t.unconfirmedClassify,
          upsetedType: t.unconfirmedType
        }))
      selectedIds.value = new Set(response.data.map(t => t.id))
    }
  } catch (error) {
    console.error('获取待确认列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleTransactionClick = (transaction) => {
  currentTransaction.value = transaction
  showDetail.value = true
}

const handleTransactionDeleted = (id) => {
  transactions.value = transactions.value.filter(t => t.id !== id)
}

const updateSelectedIds = (ids) => {
  selectedIds.value = new Set(ids)
}

const handleDetailSave = () => {
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.unconfirmed-classification {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  overflow-y: auto;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
</style>