<template>
	<div class="assembly-switch">
		<el-switch
			v-model="value"
			active-text="启用"
			inactive-text="关闭"
			:active-value="true"
			:inactive-value="false"
			:inline-prompt="true"
			style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
			@change="onChange"
		>
		</el-switch>
	</div>
</template>

<script lang="ts" name="assembly-switch" setup>
import { ref } from "vue";

const props = defineProps({
	modelValue: Boolean
});

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

const value = ref(props.modelValue);

function onChange() {
	emit("update:modelValue", value.value);
	emit("change", value.value);
}
</script>

<style lang="scss" scoped>
.assembly-switch {
	.tips {
		font-size: 12px;
		color: #bfbfbf;
	}
}
</style>
