<template>
    <view class="design-field">
        <text class="field" :style="labelStyle">{{ label }}</text>
        <u-radio-group placement="row" v-model="innerValue">
            <u-radio
                v-for="(group, index) in groupList"
                :key="index"
                :label="group.label"
                :name="group.value"
                @change="handleSelectChange"
            ></u-radio>
        </u-radio-group>
    </view>
</template>

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

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

const handleSelectChange = (name: string) => {
    emit('update:modelValue', name)
}
</script>

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

    .field {
        // width: 240rpx;
    }
    .input {
        flex: 1;
    }
}
</style>
