<template>
	<radio-group @change="onChange">
		<label v-for="(opt, idx) in options" :key="idx" style="font-size: 24rpx; margin-right:16rpx;">
			<radio :value="String(opt.value)" color="#00AC4E" style="transform:scale(0.7);" :checked="isChecked(opt.value)" />{{ opt.text }}
		</label>
	</radio-group>
</template>

<script>
export default {
	name: 'com-appointment-radio-select',
	props: {
		modelValue: {
			type: [String, Number],
			default: ''
		},
		options: {
			type: Array,
			default: () => []
		}
	},
	emits: ['update:modelValue', 'change'],
	methods: {
		isChecked(val) {
			if (typeof this.modelValue === 'number') return Number(this.modelValue) === Number(val);
			return String(this.modelValue) === String(val);
		},
		onChange(e) {
			const raw = e && e.detail ? e.detail.value : undefined;
			const newVal = typeof this.modelValue === 'number' ? Number(raw) : raw;
			this.$emit('update:modelValue', newVal);
			this.$emit('change', newVal);
		}
	}
}
</script>

<style scoped>
</style>


