<template>
    <div class="flx-align-center" style="padding-bottom: 16px">
        <template v-for="item in comps" :key="item">
            <component
                :is="item"
                :selectionList="selectionListClone"
                @handleBtnItemCallback="handleBtnItemCallback"
                :ruleForm="ruleForm"
            ></component>
        </template>
    </div>
</template>

<script setup lang="ts" name="ListBtns">
import { BTNS_ROUTE } from "./constant/index";

const $router = useRouter();
const routeName: any = ref($router.currentRoute.value.name);

const props = defineProps<{
    selectionList?: any[];
    handleParentCallback?: () => void;
    ruleForm?: any;
}>();
const emits = defineEmits<{
    (e: "handleParentCallback", result: Record<string, any>): void;
}>();

const comps = computed(() => {
    let BTNS_RULEST = BTNS_ROUTE(routeName.value);
    return BTNS_RULEST[routeName.value];
});
const selectionListClone = computed(() => {
    return props.selectionList;
});
const handleBtnItemCallback = (result: Record<string, any>) => {
    emits("handleParentCallback", result);
};
</script>

<style scoped></style>
