<template>
	<view class="radio-wrapper" style="display: inline-block" @click="status = !status">
		<Icons v-if="!status" type="checkbox" :color="color" :size="size" />
		<Icons v-if="status" type="checkbox-filled" :color="colorActive" :size="size" />
	</view>
</template>

<script setup lang="ts">
import { computed, WritableComputedRef } from "vue";
import Icons from "../icons/index.vue";

// props
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	// 取消点击事件
	unClick: {
		type: Boolean,
		default: false
	},
	// 样式
	size: {
		type: String,
		default: "36rpx"
	},
	color: { type: String, default: "#cccccc" },
	colorActive: { type: String, default: "#ff536f" }
});

// emit
const emit = defineEmits(["update:modelValue", "selected"]);

// 变量初始化
const status: WritableComputedRef<boolean> = computed({
	get: () => props.modelValue,
	set: val => {
		if (props.unClick) return;

		emit("update:modelValue", val);
		if (val) {
			emit("selected", val);
		}
	}
});
</script>

<script lang="ts">
export default {
	name: "RadioSingle"
};
</script>
