<template>
	<view class="form-checkbox">
		<view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="toggle(item)">
			<view :class="['checkbox-dot', { checked: isSelected(item.value) }]">
				<text v-if="isSelected(item.value)" class="check-icon">&#10003;</text>
			</view>
			<text class="checkbox-label">{{ item.label }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'FormItemCheckbox',
	props: {
		value: {
			type: Array,
			default: function () {
				return [];
			}
		},
		options: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data: function () {
		return {
			selectedValues: []
		};
	},
	watch: {
		value: {
			handler: function (val) {
				this.selectedValues = Array.isArray(val) ? val.slice() : [];
			},
			immediate: true
		}
	},
	methods: {
		isSelected: function (val) {
			return this.selectedValues.indexOf(val) > -1;
		},
		toggle: function (item) {
			var index = this.selectedValues.indexOf(item.value);
			if (index > -1) {
				this.selectedValues.splice(index, 1);
			} else {
				this.selectedValues.push(item.value);
			}
			this.$emit('input', this.selectedValues.slice());
		}
	}
};
</script>

<style scoped>
.form-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
}

.checkbox-item {
	display: flex;
	align-items: center;
	padding: 16rpx 0;
}

.checkbox-dot {
	width: 36rpx;
	height: 36rpx;
	border-radius: 6rpx;
	border: 2rpx solid #dddddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
}

.checkbox-dot.checked {
	border-color: #e8101e;
	background-color: #e8101e;
}

.check-icon {
	color: #ffffff;
	font-size: 24rpx;
}

.checkbox-label {
	font-size: 28rpx;
	color: #333333;
}
</style>
