<template>
    <div class="mt-[30rpx]">
        <h1 class="text-base font-bold">码眼选择</h1>
        <div class="flex flex-wrap mt-[20rpx]">
            <div
                v-for="(item, index) in codeArr"
                :key="index"
                class="code"
                :class="{
                    'code-active': modelValue == item.value
                }"
                @click="emit('update:modelValue', item.value)"
            >
                <image class="w-[32rpx] h-[32rpx]" :src="item.icon" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Code1 from './images/1.png'
import Code2 from './images/2.png'
import Code3 from './images/3.png'
import Code4 from './images/4.png'
import Code5 from './images/5.png'
import Code6 from './images/6.png'
import Code7 from './images/7.png'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: 'random'
    }
)

const codeArr = [
    {
        icon: Code1,
        value: 'square'
    },
    {
        icon: Code2,
        value: 'circle'
    },
    {
        icon: Code3,
        value: 'plus'
    },
    {
        icon: Code4,
        value: 'box'
    },
    {
        icon: Code5,
        value: 'octagon'
    },
    {
        icon: Code6,
        value: 'random'
    },
    {
        icon: Code7,
        value: 'tiny-plus'
    }
]
</script>

<style lang="scss" scoped>
.code {
    transition: all 0.5s;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    width: 64rpx;
    height: 64rpx;
    border-radius: 8rpx;
    border: 2rpx solid #dcdfe6;
}
.code:hover {
    border: 2rpx solid var(--color-primary);
    background-color: var(--color-primary-light-9);
}
.code-active {
    border: 2rpx solid var(--color-primary);
    background-color: var(--color-primary-light-9);
}
</style>
