<template>
	<view class="radio-group-container">
		<view :class="modelValue === item[prop.value]? 'radio-group-item active' : 'radio-group-item'" v-for="item in data" @tap="change(item[prop.value])">{{ item[prop.text] }}</view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue'
	
	const props = defineProps({
		data: {
			type: Array,
			default: []
		},
		modelValue: {
			type: String
		},
		prop: {
			type: Object,
			default: {
				text: 'text',
				value: 'value'
			}
		}
	})
	
	const emit = defineEmits(['update:modelValue', 'change'])
	
	function change(val) {
		if (props.modelValue === val) {
			emit('update:modelValue', '')
		} else {
			emit('update:modelValue', val)
		}
		emit('change')
	}
</script>

<style lang="scss" scoped>
	.radio-group-container {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-bottom: 48rpx;
		.radio-group-item {
			height: 60rpx;
			line-height: 60rpx;
			width: 212rpx;
			text-align: center;
			background: #F6F6F6;
			border-radius: 27rpx;
			font-size: 15px;
			border: 1px solid #F6F6F6;
			&.active {
				background: #E7F2FF;
				border-color: var(--primary-color);
			}
		}
	}
</style>