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

    <div class="mt-[20rpx]">
        <div
            v-for="item in styleList"
            :key="item.value"
            class="style-option"
            :class="{
                'style-option__active': item.value === value
            }"
            @click="value = item.value"
        >
            {{ item.label }}
        </div>
    </div>
</template>

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

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

const styleList: any = [
    {
        value: 'vivid',
        label: '生动'
    },
    {
        value: 'natural',
        label: '自然'
    }
]

emit('update:modelValue', 'vivid')
</script>

<style scoped>
.style-option:nth-child(2n) {
    margin-left: 20rpx;
}
.style-option {
    display: inline-block;
    cursor: pointer;
    width: 200rpx;
    padding: 12rpx 0;
    text-align: center;
    border-radius: 8rpx;
    border: 1px solid transparent;
    @apply bg-page-base;
}
.style-option:hover, .style-option__active {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary-light-9);
}
</style>