<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">
			<slot>{{text}}</slot>
		</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>