<template>
	<div class="text-white padding-tb padding-lr-xl">
		<div class="margin-bottom">
			<energy-report v-if="tabPosition == 'EnergyReport'"/>
			<fuel-info-mana v-if="tabPosition == 'FuelInformation'"/>
			<regional-mana v-if="tabPosition == 'RegionalMana'"/>
			<voyage-mana v-if="tabPosition == 'VoyageMana'"/>
			<alarm-mana v-if="tabPosition == 'AlarmMana'"/>
		</div>
		<div class="text-center text-sm">
			<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
				<el-radio-button label="EnergyReport">能效报告管理</el-radio-button>
				<el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="FuelInformation">燃料信息管理</el-radio-button>
				<el-radio-button label="AlarmMana">报警管理</el-radio-button>
				<el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="VoyageMana">航次管理</el-radio-button>
				<el-radio-button label="RegionalMana">ECA区域管理</el-radio-button>
			</el-radio-group>
		</div>
	</div>
</template>

<script setup>
	import EnergyReport from "./EnergyReport/index.vue";
	import FuelInfoMana from "./FuelInfoMana/index.vue";
	import RegionalMana from "./RegionalMana/index.vue";
	import VoyageMana from "./VoyageMana/index.vue";
	import AlarmMana from "./AlarmMana/index.vue";
	const tabPosition = ref("RegionalMana");
	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;
	}
	::v-deep .el-descriptions__label:not(.is-bordered-label){
		margin-right: 0;
		font-weight: bold;
		color: var(--bGray);
	}
	::v-deep .el-descriptions__body{
		background-color: transparent;
	}
	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
		background-color: #a9cbe2;
	}
	::v-deep .radiusInp .el-input__wrapper{
		border-radius: 16px;
	}
	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
		background-color: var(--greenShadow);
	}
	::v-deep .el-table .highlight-row, ::v-deep .el-table__body tr.el-table__row--striped.highlight-row td.el-table__cell{
		background: var(--greenShadow) !important;
	}
	// ::v-deep .el-table--striped .el-table__body tr.el-table__row:hover,
	// ::v-deep .el-table__body tr.current-row >td,
	// ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell{
	// 	background-color: var(--greenShadow);
	// }
</style>