<template>
	<common-cell :name="name" :required="required">
		<view class="form-content__wrapper">
			<view class="form-radio-group">
				<view v-for="i in range" :key="i" class="flex items-center flex-shrink-0 form-radio-group-item"
					@click="change(i)">
					<uni-icons class="radio__icon color-primary" :type="value === i ? 'circle-filled' : 'circle'"
						color="#0094ff"></uni-icons>
					<view :class="value === i ? 'text-primary' : ''">{{ i }}</view>
				</view>
			</view>
		</view>
	</common-cell>
</template>
<script setup>
import { computed } from 'vue';

import commonCell from '../common-cell.vue';

const emits = defineEmits(['change']);
const props = defineProps({
	form: {
		type: Object,
		default: () => ({})
	},
	name: {
		default: ''
	},
	range: {
		type: Array,
		default: () => []
	},
	required: {
		type: Boolean,
		default: false
	},
	disableChange: {
		type: Boolean,
		default: false
	},
	title: {
		default: ''
	}
})

const value = computed(() => props.form && props.form && props.form[props.title] ? props.form[props.title] : '')

function change(value) {
	if (props.disableChange) return;
	emits('change', {
		value,
		title: props.title,
	})
}
</script>

<style lang="scss" scoped>
.form-radio-group {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-bottom: -10rpx;
	margin-left: -30rpx;
	width: 100%;
}

.form-radio-group-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-bottom: 10rpx;
	margin-left: 30rpx;
}

.radio__icon {
	margin-right: 10rpx;
	flex-shrink: 0;
}
</style>