<template>
	<div class="padding-xs text-sm">
		<el-row :gutter="5">
			<el-col :span="10" :xs="24">
				<el-row :gutter="5">
					<template v-for="(item,index) in twlis" :key="index">
						<el-col :span="12" :xs="24">
							<el-card class="box-card text-bold" :body-style="{ height: 'calc( 18vh - 37px)',padding: '0',position: 'relative' }">
								<div class="square">{{ item.name }}：</div>
								<div class="flex align-center justify-center" style="height:calc(100% - 30px);">
									<div><text class="margin-right text-blue" style="font-size: 1.7rem;">{{ fomatNumber(item.value) }}</text>{{ item.unit }}</div>
								</div>
							</el-card>
						</el-col>
					</template>
				</el-row>
			</el-col>
			<el-col :span="14" :xs="24">
				<el-row :gutter="5">
					<template v-for="(item,index) in thlis" :key="index">
						<el-col :span="8" :xs="24">
							<el-card class="box-card text-bold" :body-style="{ height: 'calc( 18vh - 37px)',padding: '0',position: 'relative' }">
								<div class="square">{{ item.name }}：</div>
								<div class="flex align-center justify-center" style="height:calc(100% - 30px);">
									<div><text class="margin-right text-blue" style="font-size: 1.7rem;">{{ fomatNumber(item.value) }}</text>{{ item.unit }}</div>
								</div>
							</el-card>
						</el-col>
					</template>
				</el-row>
			</el-col>
		</el-row>
		<el-form :model="queryParams" ref="queryRef" :inline="true" class="margin-top">
			<el-row :gutter="5">
				<el-col :span="12" :xs="24">
					<el-form-item style="margin-bottom: 10px;">
						<el-date-picker
							v-model="queryParams.searhDate"
							type="daterange"
							range-separator="至">
						</el-date-picker>
					</el-form-item>
					<el-form-item style="margin-bottom: 10px;">
						<el-button type="primary">搜索</el-button>
						<el-button type="warning" plain>导出</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="8" :xs="24">
					<el-form-item style="margin-bottom: 10px;">
						<el-radio-group v-model="queryParams.searhType">
							<el-radio :label="0" class="acitonButton">时间</el-radio>
							<el-radio :label="1" class="acitonButton">航次</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-row :gutter="5">
			<el-col :span="10" :xs="24">
				<el-row :gutter="5">
					<template v-for="(item,index) in evlis" :key="index">
						<el-col :span="12" :xs="24" class="margin-bottom-xs">
							<el-card class="box-card text-bold" :body-style="{ height: 'calc( 20.5vh - 36px)',padding: '0' }">
								<div class="square">{{ item.name }}：</div>
								<div class="flex align-center justify-center" style="height:calc(100% - 30px);">
									<div><text class="margin-right text-blue" style="font-size: 1.7rem;">{{ fomatNumber(item.value) }}</text>{{ item.unit }}</div>
								</div>
							</el-card>
						</el-col>
					</template>
				</el-row>
			</el-col>
			<el-col :span="14" :xs="24">
				<el-card class="box-card text-bold" :body-style="{ padding: '0' }">
					<div class="square">油耗趋势</div>
					<lineChart :name="`fuelTrends`" :data="fuelData" style="height: calc(41vh - 90px);"/>
				</el-card>
				<el-card class="margin-top-xs box-card text-bold" :body-style="{ padding: '0' }">
					<div class="square">排放趋势</div>
					<lineChart :name="`emissionTrends`" :data="emissionData" style="height: calc(41vh - 90px);"/>
				</el-card>
			</el-col>
		</el-row>
	</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 data = reactive({
		twlis: [{ name: "年度总油耗", value: 12233.6, unit: "L" },
				{ name: "年度重油总消耗", value: 12233.6, unit: "L" }],
		thlis: [{ name: "年度轻油总消耗", value: 12233.6, unit: "L" },
				{ name: "年度CO2总排放", value: 12233.6, unit: "L" },
				{ name: "年度总载货量", value: 12233.6, unit: "吨" }],
		evlis: [{ name: "油耗率", value: 12233.6, unit: "千吨.海里/千克" },
				{ name: "排放率", value: 12233.6, unit: "千吨.海里/L" },
				{ name: "单位距离CO2排放", value: 12233.6, unit: "L/海里" },
				{ name: "单位运输CO2排放", value: 12233.6, unit: "L/吨" },
				{ name: "单位距离油耗", value: 12233.6, unit: "L/海里" },
				{ name: "单位运输油耗", value: 12233.6, unit: "L/吨" },
				{ name: "EEOI", value: 12233.6, unit: "L" },
				{ name: "燃油总消耗", value: 12233.6, unit: "L" }],
		queryParams: {
			searhDate: ['2023-07-01', '2023-07-10'],
			searhType: 0
		},
		fuelData: {
			"xAxis":["2023-07-01","","2023-07-03","","2023-07-05","","2023-07-07","","2023-07-09",""],
			"name": "油耗(L)",
			"data":[{
				"data":[533,648,334,534,468,864,648,688,748,948],
				"name":"重油",
				"stack":"重油",
				"type":"line",
				"smooth": 0.4,
				"showSymbol": false
			},{
				"data":[912,653,628,653,238,532,855,320,603,658],
				"name":"轻油",
				"stack":"轻油",
				"type":"line",
				"smooth": 0.4,
				"showSymbol": false
			}]
		},
		emissionData: {
			"xAxis":["2023-07-01","","2023-07-03","","2023-07-05","","2023-07-07","","2023-07-09",""],
			"name": "CO2(升)",
			"data":[{
				"data":[33,46,46,54,53,58,64,74,64,14                ],
				"name":"重油",
				"stack":"重油",
				"type":"line",
				"smooth": 0.4,
				"showSymbol": false
			}]
		}
	})
	const { addOilList, queryParams, fuelData, emissionData, twlis, evlis ,thlis } = toRefs(data);
	const changeTab = function(key){
		tabFuel.value = key;
	}
</script>

<style lang='scss' scoped>
	.square {
		color: #fff;
	    padding: 3px 8px;
		background-color: var(--el-menu-bg-color);
	}
	.acitonButton{
		transform:scale(1.2);
	}
</style>