<template>
	<view class="el-checkbox">
		<view class="icon-wrap" @click="toggle" :class="[iconClass]" :style="[iconStyle]">
			<uni-icons type="checkmarkempty" :size="size - 2" :color="iconColor"></uni-icons>
		</view>
		
		<view class="el-checkbox-label" @click="onClickLabel" :style="{ fontSize: rpx2px(labelSize) + 'px' }">
			<slot />
		</view>
	</view>
</template>

<script setup>
	import { ref,computed } from "vue";
	import { rpx2px } from "../../libs/utils.js";
	
	const props = defineProps({
		// checkbox的名称
		name: {
			type: [String, Number],
			default: ''
		},
		// 形状，square 为方形，circle 为原型
		shape: {
			type: String,
			default: 'square'
		},
		// 是否为选中状态
		modelValue: {
			type: [Boolean,Number],
			default: false
		},
		// 是否禁用
		disabled: {
			type: [String, Boolean],
			default: false
		},
		// 是否禁止点击提示语选中复选框
		labelDisabled: {
			type: [String, Boolean],
			default: true
		},
		// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
		activeColor: {
			type: String,
			default: ''
		},
		// 图标的大小，单位rpx
		iconSize: {
			type: [String, Number],
			default: ''
		},
		// label的字体大小，rpx单位
		labelSize: {
			type: [String, Number],
			default: ''
		},
		// 组件的整体大小
		size: {
			type: [String, Number],
			default: 15
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","change"]);
	
	let parentDisabled  = ref(false);
	let newParams 		= ref({});
	
	const iconColor = computed(()=>{
		return props.modelValue ? '#ffffff' : 'transparent';
	});
	
	const iconClass = computed(()=>{
		let classes = [];
		classes.push('icon-box-' + props.shape);
		if(props.modelValue) classes.push('icon-box-checked');
		if(props.disabled) classes.push('icon-box-disabled');
		if(props.modelValue && props.disabled) classes.push('icon-box-disabled-checked');
		return classes.join(' ');
	});
	
	const iconStyle = computed(()=>{
		let style = {};
		if (props.activeColor && props.modelValue && !props.disabled) {
			style.borderColor 		= props.activeColor; 
			style.backgroundColor 	= props.activeColor;
		}
		
		style.width  = rpx2px(props.size,true);
		style.height = rpx2px(props.size,true);
		return style;
	})
	
	const setValue = ()=>{
		emits("change", { value: !props.modelValue, name: props.name });
		emits("update:modelValue", !props.modelValue);
	}
	
	const toggle = ()=>{
		if(!props.disabled) {
			setValue();
		}
	}
	
	const onClickLabel = ()=>{
		if(!props.labelDisabled && !props.disabled) {
			setValue();
		}
	}
</script>

<style lang="scss" scoped>
	.el-checkbox {
		display: inline-flex;
		align-items: center;
		overflow: hidden;
		user-select: none;
		line-height: 1.8;
		.icon-wrap {
			color: #606266;
			flex: none;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 42rpx;
			height: 42rpx;
			color: transparent;
			text-align: center;
			transition-property: color, border-color, background-color;
			font-size: 20px;
			border: 1px solid #c8c9cc;
			transition-duration: 0.2s;
		}
		
		.icon-box {
			&-circle {
				border-radius: 100%;
			}
			
			&-square {
				border-radius: 6rpx;
			}
			
			&-checked {
				color: #fff;
				background-color: #2979ff;
				border-color: #2979ff;
			}
			
			&-disabled {
				background-color: #ebedf0;
				border-color: #c8c9cc;
			}
			
			&-disabled-checked {
				color: #c8c9cc !important;
			}
		}
	}
</style>