<script setup lang="ts">
import { ref } from "vue";
import PaymentTable from "./payment-table.vue";
import CreateTicketDialog from "./create-ticket-dialog.vue";

const emit = defineEmits(["reload"]);

const visible = ref(false);

const ticketDialogRef = ref<InstanceType<typeof CreateTicketDialog>>(null);

function handleAdd({ payNo }) {
  ticketDialogRef.value.onDisplay(payNo);
}

function handleReload() {
  emit("reload");
  visible.value = false;
}

defineExpose({
  onDisplay: () => (visible.value = true)
});
</script>

<template>
  <el-dialog
    v-model="visible"
    title="新建采购回票"
    width="70%"
    center
    destroy-on-close
  >
    <PaymentTable @add-btn-click="handleAdd" />

    <CreateTicketDialog @reload="handleReload" ref="ticketDialogRef" />
  </el-dialog>
</template>
