<template>
	<div class="padding">
		<div class="margin-bottom">
			<history-page v-if="tabPosition == 'history'"/>
			<cont-rast v-if="tabPosition == 'contrast'"/>
			<distri-bution v-if="tabPosition == 'distribution'"/>
		</div>
		<el-row>
			<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12"><progress-bar :data="oilList.heavyOil"/></el-col>
			<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12"><progress-bar :data="oilList.lightOil"/></el-col>
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" class="text-center text-sm">
				<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
				    <el-radio-button label="history">历史数据查询</el-radio-button>
				    <el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="distribution">能效指标对比分析</el-radio-button>
				    <el-radio-button label="contrast">能效分布分析</el-radio-button>
				</el-radio-group>
			</el-col>
			<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12"><progress-bar :data="oilList.lubricatOil"/></el-col>
			<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12"><progress-bar :data="oilList.totalOil"/></el-col>
		</el-row>
	</div>
</template>

<script setup>
	import ProgressBar from "@/components/Progress";
	import historyPage from "./historyPage/index.vue";
	import contRast from "./contRast/index.vue";
	import distriBution from "./distriBution/index.vue";
	
	const tabPosition = ref("history");
	const data = reactive({
		oilList: {
			heavyOil: {
				max: 100,
				value: 14.3,
				name: "当前重油总量",
				unit: "L",
				color: "#009dff",
				swid: 10
			},
			lightOil: {
				max: 100,
				value: 89.63,
				name: "当前轻油总量",
				unit: "L",
				color: "#009dff",
				swid: 10
			},
			lubricatOil: {
				max: 100,
				value: 50.37,
				name: "当前滑油总量",
				unit: "L",
				color: "#009dff",
				swid: 10
			},
			totalOil: {
				max: 200,
				value: 164.3,
				name: "当前总量",
				unit: "L",
				color: "#009dff",
				swid: 10
			}
		}
		
	});
	const { oilList } = 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>