<template>
	<radio-group class="u-flex u-flex-wrap" @change="change">
		<label class="radio u-m-r-60" v-for="(item,itemIndex) in list" :key="index">
			<radio :value="index" :checked="itemChecked(item,itemIndex)" class="scale7" />
			<text>{{item.label}}</text>
		</label>
	</radio-group>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		rangeValue: {
			type: [String, Number],
			default: ''
		},
		rangeKey: {
			type: String,
			default: 'label'
		},
		list: {
			type: Array,
			default: () => []
		},
		title: {
			type: String,
			default: '标题'
		},
		modelValue: {
			type: [String, Number],
			default: ''
		}
	})
	function itemChecked(item,itemIndex){
		if(!props.rangeValue){
			return itemIndex==index.value
		}
		return item[props.rangeValue]=props.list[index.value][props.rangeKey]
	}
	function findIndex() {
		return props.list.findIndex(v => v[props.rangeValue] == props.modelValue)
	}

	function findValue() {
		return props.list[index.value][props.rangeValue]
	}
	const computedIndex = props.rangeValue ? findIndex() : props.modelValue
	const index = ref(computedIndex)
	const emits = defineEmits(['update:modelValue'], )
	watch(() => index.value, (newval) => {
		const value = props.rangeValue ? findValue() : newval
		console.log(value);
		emits('update:modelValue', value)
	})

	function change(e) {
		index.value = e.detail.value
	}
	const selText = computed(() => {
		const item = props.list[index.value]
		return item ? item[props.rangeKey] : ''
	})
</script>

<style>
</style>