<template>
  <PopupContainer
    v-model:show="show"
    title="新增交易分类"
    show-cancel-button
    show-confirm-button
    confirm-text="确认"
    cancel-text="取消"
    @confirm="handleConfirm"
    @cancel="resetAddForm"
  >
    <van-form ref="addFormRef">
      <van-field
        v-model="classifyName"
        name="name"
        label="分类名称"
        placeholder="请输入分类名称"
        :rules="[{ required: true, message: '请输入分类名称' }]"
      />
    </van-form>
  </PopupContainer>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import PopupContainer from './PopupContainer.vue'

const emit = defineEmits(['confirm'])

const show = ref(false)
const classifyName = ref('')

// 打开弹窗
const open = () => {
  classifyName.value = ''
  show.value = true
}

// 确认
const handleConfirm = () => {
  if (!classifyName.value.trim()) {
    showToast('请输入分类名称')
    return
  }

  emit('confirm', classifyName.value.trim())
  show.value = false
  classifyName.value = ''
}

// 重置表单
const resetAddForm = () => {
  classifyName.value = ''
}

// 暴露方法给父组件
defineExpose({
  open
})
</script>
