<template>
	<div class="com-ios-onoff">
		<input :id="'onoff_' + dataId" type="checkbox" :checked="onoff" onClick="return false;"><label :for="'onoff_' + dataId" :style="dataSwitchable == 'true' ? 'cursor: pointer' : 'cursor: not-allowed'" @click="dataSwitchable == 'true' ? comFnSwitched(!onoff) : ''"><span class="middle-center" :data-on="textOn" :data-off="textOff"></span></label>
	</div>
</template>

<script>
module.exports = {
	props: {
		"dataId": {
			type: String,
			required: true
		},
		"dataOnoff": {
			type: Boolean,
			default: false,
			required: true
		},
		"textOn": {
			type: String,
			default: "ON"
		},
		"textOff": {
			type: String,
			default: "OFF"
		},
		"dataSwitchable": {
			type: Boolean,
			default: true
		}
	},
	data: () => {
		return {
			onoff: false
		}
	},
	watch: {
		"dataOnoff": {
			immediate: true,
			handler (nv, ov) {
				this.onoff = nv;
			}
		}
	},
	methods: {
		comFnSwitched (onoff) {
			this.$emit("com_switched", { value: onoff, key: this.dataId });
		}
	}
}
</script>