<template>
    <h3 class="text-base font-bold mt-[20px]">
        <span>生成方式</span>
        <span class="text-error">*</span>
    </h3>
    <div class="mt-[10px] text-sm">
        <!--    类型选择    -->
        <div class="inline-flex bg-[#f0f2f2] rounded-[14px] text-[#333333]">
            <div
                v-for="item in typeArr"
                :key="item.value"
                class="rounded-[14px] w-[72px] h-[28px] leading-[28px] flex justify-center"
                :class="{
                    'bg-primary text-btn-text': item.value === modelValue
                }"
                @click="emit('update:modelValue', item.value)"
            >
                {{ item.label }}
            </div>
        </div>

        <!--    前置---自定义    -->
        <div v-show="modelValue === 1">
            <slot name="prefix"></slot>
        </div>

        <!--    公用    -->
        <div>
            <slot name="common"></slot>
        </div>

        <!--    模版    -->
        <div v-show="modelValue === 2">
            <slot name="mode"></slot>
        </div>

        <!--    自定义    -->
        <div v-show="modelValue === 1">
            <slot name="custom"></slot>
        </div>
    </div>
</template>
<script setup lang="ts">
const emit = defineEmits<{
    (event: 'update:modelValue', value: number): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: 2
    }
)

const typeArr = [
    {
        label: '模版',
        value: 2
    },
    {
        label: '自定义',
        value: 1
    }
]
</script>
