<template>
	<view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal" >
		<view class="circle u-flex u-row-center"  :style="computedStyle()" :class="{active:modelValue,square:shape==='square'}">
			<uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons>
		</view>
		<view class="u-m-l-12">
			{{text}}
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import color from '@/commons/color.js'
	const props = defineProps({
		disabled:{
			type: [Boolean],
			default: false
		},
		borderColor:{
			type: String,
			default: '#bbb',
		},
		size: {
			//单位px
			type: Number,
			default: 16,
		},
		// v-modal
		modelValue: {
			type: [Number,Boolean],
			default: false,
		},
		shape:{
			//circle square
			type: String,
			default: 'circle',
		},
		text: {
			type: String,
			default: ''
		}
	})

	function computedStyle() {
		return `
			width:${props.size}px;
			height:${props.size}px;
			border-color:${props.borderColor};
			border-color:${props.modelValue?color.ColorMain:props.borderColor};
		`
	}
	const emits = defineEmits(['update:modelValue', 'change'])
	function changeVal() {
		if(props.disabled){
			return
		}
		emits('click')
		let currentVal=props.modelValue
		let type=typeof currentVal 
		if(type==='number'){
			currentVal=currentVal===0?1:0
		}
		if(type==='boolean'){
			currentVal=!currentVal
		}
		emits('update:modelValue', currentVal)
		emits('change', currentVal)
	}
</script>

<style lang="scss" scoped>
	.my-radio {

		.circle {
			background: #FFFFFF;
			
			&.active {
				background-color: $my-main-color;
				border-color: $my-main-color;
			}

			border: 1px solid #707070;
			border-radius: 50%;
			overflow: hidden;
			&.square{
				border-radius: 8rpx;
			}
		}

	}
</style>