<template>
	<view class="container" @click="toggleSwitch">
		<label :class="isOn ? 'switch-checked' : 'switch-nochecked'">
			<view class="open">{{ activeText }}</view>
			<view class="close">{{ inactiveText }}</view>
		</label>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		value: {
			type: Boolean,
			default: false
		},
		activeText: {
			type: String,
			default: '开启'
		},
		inactiveText: {
			type: String,
			default: '关闭'
		},
		activeValue: {
			type: [Number, String, Boolean],
			default: true
		},
		inactiveValue: {
			type: [Number, String, Boolean],
			default: false
		}
	});

	const emit = defineEmits(['update:value', 'change']);

	const isOn = ref(props.value);

	watch(() => props.value, (newVal) => {
		isOn.value = newVal;
	});

	const toggleSwitch = () => {
		isOn.value = !isOn.value;
		console.log(isOn.value ? props.activeValue : props.inactiveValue)
		emit('update:value', isOn.value ? props.activeValue : props.inactiveValue);
		emit('change', isOn.value ? props.activeValue : props.inactiveValue);
	};
	const imageUrl=ref("")
</script>

<style lang="scss" scoped>
	.container {
		width: 200rpx;
		padding: 10rpx;
		label {
			position: relative;
			display: block;
			border-radius: 40rpx;
			width: 100%;

			&:before {
				content: " ";
				display: block;
				border-radius: 50rpx;
				height: 50rpx;
				background-color: #d5d5d5;
				transform: scale(1, 1);
				transition: all 0.3s ease;
			}

			&:after {
				content: "";
				position: absolute;
				top: -10rpx;
				left: 0;
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				// background-color: white;
				background-image: url('../../static/goods-empty.png');
				background-size: 100% 100%;
				box-shadow: 2rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
			}
		}

		%font-style {
			top: 0;
			color: #ffffff;
			font-size: 28rpx;
			height: 100%;
			line-height: 50rpx;
			position: absolute;
			transition: all 1s ease;
		}

		.switch-checked {
			&:after {
				// margin-left: calc(100% - 40rpx);
				left: unset;
				right: -2rpx;
			}

			&:before {
				background-color: #019FE8;
			}

			.close {
				display: none;
			}
		}

		.switch-nochecked {
			.open {
				display: none;
			}
		}

		.open {
			left: 10rpx;
			@extend %font-style;
		}

		.close {
			right: 10rpx;
			@extend %font-style;
			color: #6b6b6b;
		}
	}
</style>