<template>
	<div class="mt-3">
			<input class="checkbox"
			type="checkbox"
			:disabled="!edititem"
			:checked="inputvalue"
			@change="onCheckbox($event)"
			/>
			<label class="form-check-label inline-block text-gray-800 dark:text-gray-200" :for="varname">
				<span class="text-base">{{t(title,varname)}}</span> 
			</label>
	</div>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { InputValueOption,InputValidateOption } from '~/typs/inputs'
const emit = defineEmits(['inputChange'])
const t = useI18n().t
defineProps({
	typ: {
		type: String as PropType<InputValueOption>,
		default: InputValueOption.string,
		required: true,
	},
	inputvalue: {
		type: Boolean,
		required: true,
	},
	varname: {
		type: String,
		required: true,
	},
	validate: {
		type: String as PropType<InputValidateOption>,
		default: InputValidateOption.none,
		required: true,
	},
	title: {
		type: String,
		default: '',
		required: true,
	},
	edititem: {
		type: Boolean,
		required: true,
	},
	showitem: {
		type: Boolean,
		required: true,
	},
	messages: {
		type: Boolean,
		default: true,
		required: false,
	},
})
const onCheckbox = (ev: any) => {
	emit('inputChange',{val: ev.target.checked})
}
</script>