<template>
  <div class="manual-bill-add">
    <BillForm 
      ref="billFormRef"
      :loading="saving"
      @submit="handleSave"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { createTransaction } from '@/api/transactionRecord'
import BillForm from './BillForm.vue'

const emit = defineEmits(['success'])

const saving = ref(false)
const billFormRef = ref(null)

const handleSave = async (payload) => {
  saving.value = true
  try {
    const res = await createTransaction(payload)

    if (!res.success) {
      throw new Error(res.message || '保存失败')
    }

    showToast('保存成功')
    // 重置表单
    if (billFormRef.value) {
      billFormRef.value.reset()
    }
    emit('success')
  } catch (err) {
    console.error(err)
    showToast('保存失败: ' + err.message)
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.manual-bill-add {
  /* padding-top: 10px; */
}
</style>
