<template>
	<div class="text-white padding-tb padding-lr-lg">
		<div class="margin-bottom">
			<propulsion-system v-if="tabPosition == 'propulsionSystem'"/>
			<auxiliary-system v-if="tabPosition == 'auxiliarySystem'"/>
			<boiler-system v-if="tabPosition == 'boilerSystem'"/>
		</div>
		<div class="text-center text-sm">
			<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
				<el-radio-button label="propulsionSystem">推进系统</el-radio-button>
				<el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="auxiliarySystem">辅机系统</el-radio-button>
				<el-radio-button label="boilerSystem">锅炉系统</el-radio-button>
			</el-radio-group>
		</div>
	</div>
</template>

<script setup>
	import PropulsionSystem from "./PropulsionSystem/index.vue";
	import AuxiliarySystem from "./AuxiliarySystem/index.vue";
	import BoilerSystem from "./BoilerSystem/index.vue";
	const tabPosition = ref("propulsionSystem");
	const data = reactive({
		
	});
	const {  } = toRefs(data);
</script>

<style scoped lang="scss">
	::v-deep .el-radio-button__inner{
		background-color: #2da5f0;
		border: none;
		color: #fff;
		font-size: 0.75rem;
	}
	::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner{
		background-color: var(--purple);
	}
	::v-deep .el-radio-button:first-child .el-radio-button__inner{
		border: none;
	}
</style>