<template>
    <view class="design-field">
        <text class="field" :class="{ 'field-required': required }" :style="labelStyle">
            {{ label }}
        </text>
        <view class="flex gap-[10rpx] flex-1 flex-wrap">
            <text
                v-for="(group, index) in groupList"
                :key="index"
                class="px-[24rpx] py-[12rpx] rounded-[16rpx] status"
                :class="{ active: innerValue == group.value }"
                @click="handleSelectedItem(group.value)"
            >
                {{ group.label }}
            </text>
        </view>
    </view>
</template>

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

interface IGroup {
    label: string
    value: string | number
}
const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: 1
    },
    label: {
        type: String,
        default: ''
    },
    labelWidth: {
        type: Number,
        default: 120
    },
    groupList: {
        type: Array as PropType<IGroup[]>,
        defaault: () => []
    },
    required: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['update:modelValue'])
const labelStyle = computed(() => {
    const { labelWidth } = props
    return {
        width: `${labelWidth * 2}` + 'rpx'
    }
})
const innerValue = ref(props.modelValue)
const handleSelectedItem = (val: number) => {
    emit('update:modelValue', val)
    innerValue.value = val
}
</script>

<style lang="scss" scoped>
.design-field {
    @include flex-align;
    padding: 24rpx 20rpx 24rpx 32rpx;
    border-bottom: 1px solid $gray-3;

    .field {
        // width: 200rpx;
    }
    .input {
        flex: 1;
    }
    .status {
        border: 1px solid #d5d5d5;
        &.active {
            background-color: #eef6ff;
            color: #0e66fb;
            border-color: transparent;
        }
    }
}
</style>
