<template>
	<view class="check-box">
		<view class="check-option" @click="change(option)" v-for="(option,index) in optionList">
			<view class="icon-box">
				<view class="check-icon-span" v-if="option.value == valueDom">
					<u-icon name="checkmark-circle-fill" color="var(--ui-BG-Main)" size="50"></u-icon>
				</view>
				<text class="check-icon" v-else></text>
				<text class="check-label">{{option.name}}</text>
			</view>
			<view class="price-box" v-if="option.type == 'number'">
				<text class="num">{{option.number}}</text>
				<text>钻石</text>
			</view>
			<view v-if="option.type == 'icon'">
				<u-icon name="weixin-fill" color="#39b54a" size="50"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		props: {
			optionList: {
				type: Array,
				default: [],
			},
			modelValue: {
			  type: String,
			  default: ''
			},
		},
		data() {
			return {
				
			}
		},
		computed: {
			valueDom() {
				return this.modelValue;
			},
		},
		methods: {
			change(e) {
				this.$emit('update:modelValue', e.value); 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.check-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.check-option {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			
			.icon-box {
				display: flex;
				align-items: center;
				
				.check-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
					border: 1px solid var(--ui-BG-Main);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.check-icon-span {
					width: 40rpx;
					height: 44rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.check-label {
					font-size: 28rpx;
					color: var(--ui-BG-Main);
					margin-left: 5px;
				}
			}
			
			.price-box {
				font-size: 26rpx;
				color: var(--ui-BG-Main);
				
				.num {
					font-size: 40rpx;
					margin-right: 2px;
				}
			}
			
		}
		
		.check-option:last-child {
			margin-bottom: 0;
		}
	}
</style>