<template>
	<div class="padding-xs">
		<el-menu :default-active="tabFuel" class="el-menu-demo" active-text-color="#000" mode="horizontal" @select="changeTab">
			<el-menu-item index="0">实时存量</el-menu-item>
			<el-menu-item index="1">燃油记录</el-menu-item>
		</el-menu>
		<div class="margin-top-xs">
			<div class="flex flex-wrap"  v-if="tabFuel == 0">
				<div style="width:20%" v-for="(item,indea) in newData" :key="indea">
					<oilLevel :data="item"/>
				</div>
			</div>
			<el-row :gutter="10" v-else>
				<el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
					<div class="el-card padding-xs text-center">
						<div class="margin-bottom-xs">
							<el-date-picker v-model="startDate" type="date" placeholder="开始时间"></el-date-picker>
							<span> 至 </span>
							<el-date-picker v-model="endDate" type="date" placeholder="结束时间"></el-date-picker>
							<el-button type="primary" class="margin-left-sm"><elIcon><Search/></elIcon>查询</el-button>
						</div>
						<lineChart :name="`oil-consume`" :data="lineData" style="height: calc(100vh - 245px);"/>
						<div class="margin-tb-xs">燃油消耗：<span class="text-lg text-yellow text-bold">{{lineData.allNums}}</span> KG</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
					<div class="el-card">
						<div class="text-center text-bold padding-tb-sm">燃油加装记录</div>
						<el-table v-loading="loading" :data="addOilList">
							<el-table-column label="经纬度位置" align="center" prop="ais"></el-table-column>
							<el-table-column label="加油前(kg)" align="center" prop="dataMin"></el-table-column>
							<el-table-column label="加油后(kg)" align="center" prop="dataMax"></el-table-column>
							<el-table-column label="加油量(kg)" align="center" prop="fuelChargingQuantity"></el-table-column>
							<el-table-column label="加油时间" align="center" prop="establishDate"></el-table-column>
						</el-table>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
	import { reactive, ref } from '@vue/reactivity';
	import lineChart from "@/components/Echarts/lineChart";
	import oilLevel from "@/components/Temperature/oilLevel";
	const loading = ref(false);
	const tabFuel = ref('0');
	const newData = computed(() => {
		let angol1 = {};
		let _obj =[{
			max: 7.01,
			name: "左重油舱",
			value: 5.4
		},{
			max: 7.01,
			name: "右重油舱",
			value: 6.3
		},{
			max: 4.31,
			name: "左轻油舱",
			value: 2.5
		},{
			max: 6.11,
			name: "右轻油舱",
			value: 4.98
		},{
			max: 6.11,
			name: "重油沉淀柜",
			value: 5.47
		},{
			max: 1.25,
			name: "重油日用柜",
			value: 0.99
		},{
			max: 1.25,
			name: "轻油沉淀柜",
			value: 0.92
		},{
			max: 1.8,
			name: "付机日用柜",
			value: 0.82
		},{
			max: 2,
			name: "主机日用柜",
			value: 1.02
		},{
			max: 2,
			name: "溢油柜",
			value: 1.2
		},{
			max: 1.21,
			name: "应急发电机油柜",
			value: 0.47
		}];
		return _obj
	})
	const data = reactive({
		addOilList: [{
			"sn": "480000618",
			"establishDate": "2023-07-07",
			"fuelChargingQuantity": 8171.5,
			"dataMin": "110.36",
			"dataMax": "11964.36",
			"ais": "118.742188,24.552740"
		}, {
			"sn": "480000618",
			"establishDate": "2023-07-02",
			"fuelChargingQuantity": 983.2,
			"dataMin": "110.36",
			"dataMax": "1093.51",
			"ais": "113.494075,21.563780"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-22",
			"fuelChargingQuantity": 21932.1,
			"dataMin": "110.36",
			"dataMax": "22042.33",
			"ais": "110.540145,21.085088"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-19",
			"fuelChargingQuantity": 15590.1,
			"dataMin": "10210.11",
			"dataMax": "26735.80",
			"ais": "118.295140,23.896365"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-19",
			"fuelChargingQuantity": 43561.4,
			"dataMin": "110.36",
			"dataMax": "43671.80",
			"ais": "118.295140,23.896365"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-19",
			"fuelChargingQuantity": 47358.8,
			"dataMin": "110.36",
			"dataMax": "47469.23",
			"ais": "118.295140,23.896365"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-16",
			"fuelChargingQuantity": 42292.8,
			"dataMin": "10601.61",
			"dataMax": "52637.67",
			"ais": "122.049765,29.999776"
		}, {
			"sn": "480000618",
			"establishDate": "2023-06-03",
			"fuelChargingQuantity": 9244.5,
			"dataMin": "55533.23",
			"dataMax": "64912.36",
			"ais": "121.254843,27.732413"
		}],
		startDate: "",
		endDate: "",
		lineData: {
			"xAxis":["2023-07-01","","2023-07-03","","2023-07-05","","2023-07-07","","2023-07-09",""],
			"data":[{
				"data":[5.334648,5.334648,5.334648,5.334648,5.334648,5.334648,5.334648,5.334648,5.334648,5.334648],
				"name":"第一油舱",
				"stack":"第一油舱",
				"type":"line",
				"smooth":"true",
			},{
				"data":[0.9120204,0.6532038,0.6285546,0.6532038,0.6532038,0.6532038,0.6285546,0.6532038,0.6532038,0.6532038],
				"name":"第二油舱",
				"stack":"第二油舱",
				"type":"line",
				"smooth":"true",
			},{
				"data":[1.1954862,2.02123436,1.8363652,1.5159258,1.5159258,1.4912766,1.8363652,1.5159258,1.5159258,1.4912766],
				"name":"第三油舱",
				"stack":"第三油舱",
				"type":"line",
				"smooth":"true",
			},{
				"data":[2.1581076,3.9039924,3.5402664,2.8855596,2.8855596,2.8855596,3.5402664,2.8855596,2.8855596,2.8855596],
				"name":"第四油舱",
				"stack":"第四油舱",
				"type":"line",
				"smooth":"true",
			},{
				"data":[2.218428,2.218428,2.218428,2.218428,2.218428,2.218428,2.218428,2.218428,2.218428,2.218428],
				"name":"第五油舱",
				"stack":"第五油舱",
				"type":"line",
				"smooth":"true",
			}],
			"allNums":"2.44"
		}
	})
	const { addOilList, startDate, endDate, lineData } = toRefs(data);
	const changeTab = function(key){
		tabFuel.value = key;
	}
</script>

<style lang='scss' scoped>
	@media screen and (max-width: 1000px) {
		
	}
</style>