<template>
	<div class="flex align-center" v-if="options.hevr">
		<div class="text-bold text-sm margin-right-xs" v-if="options.posit == 'left'">{{options.name}}</div>
		<div style="position: relative;">
			<div class="switchT"></div>
			<div class="switchB"></div>
			<div class="switchC" :style="{ transform: 'rotate('+(options.value == 1?'-8deg':'-30deg')+')' }"></div>
		</div>
		<div class="text-bold text-sm margin-left-sm" v-if="options.posit == 'right'">{{options.name}}</div>
	</div>
	<div v-else>
		<div class="text-bold text-sm margin-bottom-sm" v-if="options.posit == 'top'">{{options.name}}</div>
		<div style="position: relative;" class="flex">
			<div class="switchL"></div>
			<div class="switchR"></div>
			<div class="switchC-H" :style="{ transform: 'rotate('+(options.value == 1?'-8deg':'-30deg')+')' }"></div>
		</div>
		<div class="text-bold text-sm margin-top-xs margin-left" v-if="options.posit == 'bottom'">{{options.name}}</div>
	</div>
</template>

<script setup>
const props = defineProps({
  // 数据
	options: {
		type: Object,
		default: {
			name: "",
			value: 0,
			hevr: true,
			posit: 'bottom'
		}
	}
});

</script>
<style scoped lang="scss">
	.switchT{
		position: relative;
		height: 18px;
		border: 1px solid #9d9d9d;
		margin-bottom: 25px;
		&::after{
			content: "";
			position: absolute;
			left: -3px;
			bottom: -6px;
			width: 6px;
			height: 6px;
			border-radius: 4px;
			border: 2px solid #9d9d9d;
		}
	}
	.switchB{
		position: relative;
		height: 18px;
		border: 1px solid #9d9d9d;
		&::after{
			content: "";
			position: absolute;
			left: -3px;
			top: -6px;
			width: 6px;
			height: 6px;
			border-radius: 4px;
			border: 2px solid #9d9d9d;
		}
	}
	.switchC{
		position: absolute;
		top: 23px;
		height: 20px;
		border: 1px solid #9d9d9d;
		transform-origin: top center;
		// transform: rotate(-8deg);
		
	}
	.switchL{
		position: relative;
		width: 20px;
		border: 1px solid #9d9d9d;
		margin-right: 25px;
		&::after{
			content: "";
			position: absolute;
			right: -6px;
			top: -3px;
			width: 6px;
			height: 6px;
			border-radius: 4px;
			border: 2px solid #9d9d9d;
		}
	}
	.switchR{
		position: relative;
		width: 20px;
		border: 1px solid #9d9d9d;
		&::after{
			content: "";
			position: absolute;
			left: -6px;
			top: -3px;
			width: 6px;
			height: 6px;
			border-radius: 4px;
			border: 2px solid #9d9d9d;
		}
	}
	.switchC-H{
		position: absolute;
		left: 23px;
		// top: -2px;
		width: 22px;
		border: 1px solid #9d9d9d;
		transform-origin: left center;
		transform: rotate(-8deg);
		
	}
</style>