<template>
    <div class="flx-align-center" style="padding-bottom: 16px; background: #f2f3f5">
        <template v-for="item in comps" :key="item">
            <!-- @getType="getType" -->
            <component
                :is="item"
                @handleChildBtnCallback="handleChildCallback"
                :ruleForm="ruleForm"
                :isPrint="isPrint"
                :isGenerate="isGenerate"
                :isSubmit="isSubmit"
                :isAdd="isAdd"
            ></component>
        </template>
    </div>
</template>

<script setup lang="ts">
import Add from "./components/Add.vue";
import Generate from "./components/Generate.vue";
import Print from "./components/Print.vue";
import Switch from "./components/Switch.vue";
import Submit from "./components/Submit.vue";
const $router = useRouter();
const routeName: any = ref($router.currentRoute.value.name);

defineProps<{
    handleParentCallback?: () => void;
    ruleForm?: any;
    isPrint?: any;
    isGenerate?: any;
    isSubmit?: any;
    isAdd?: any;
}>();

const emits = defineEmits<{
    (e: "handleParentCallback", result: Record<string, any>): void;
}>();
const BTNS_ROUTE: any = {
    boxMarkDetails: [Add, Generate, Print, Switch],
    subscriptionDetails: [Add, Submit]
};
const comps = computed(() => {
    return BTNS_ROUTE[routeName.value];
});
const handleChildCallback = (result: Record<string, any>) => {
    console.log(result, "=result=");
    emits("handleParentCallback", result);
};
</script>

<style scoped></style>
