<template>
    <h3 class="text-base font-bold mt-[40rpx]">
        <span>模型选择</span>
    </h3>

    <div class="flex flex-wrap mt-[20rpx]">
        <div
            v-for="item in modelList"
            :key="item.value"
            class="style-option ml-2"
            :class="{
                'style-option__active': item.model_name == value
            }"
            @click="value = item.model_name"
        >
            {{ item.model_name }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, watchEffect } from 'vue'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelList?: any
        modelValue?: any
    }>(),
    {
        template: [],
        modelValue: ''
    }
)
const value = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emit('update:modelValue', val)
    }
})

watchEffect(() => {
    const modelList = props.modelList
    if (modelList.length !== 0) {
        value.value = modelList[0].model_name
    }
})
</script>

<style scoped>
.style-option {
    padding: 14rpx 20rpx;
    margin-bottom: 20rpx;
    text-align: center;
    border-radius: 8rpx;
    border: 1px solid transparent;
    @apply bg-page-base;
}
.style-option__active {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary-light-9);
}
</style>/style>