<style lang='scss' scoped>
	.square {
		color: #fff;
	    padding: 3px 8px;
		background-color: var(--el-menu-bg-color);
	}
	.el-table--default .cell{
		line-height: 13px
	}
</style>
<template>
	<div class="padding-xs text-sm">
		<el-row :gutter="5">
			<el-col :span="12" :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(16vh - 30px)',padding: '0 0 8px',position: 'relative' }">
								<div class="square">{{ item.name }}：</div>
								<div class="flex align-end 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-card class="box-card margin-tb-xs" :body-style="{ height: ($store.state.app.device == 'desktop'?'calc(22vh - 30px)' : 'auto'),padding: '0' }">
					<div class="square">重油舱存油</div>
					<el-row :gutter="5" class="align-center" :style="{ height: ($store.state.app.device == 'desktop'?'calc(100% - 26px)' : 'auto') }">
						<template v-for="(item,index) in newData.heavyOil" :key="index">
							<el-col :span="4" :xs="12">
								<oilLevel :data="item" wid="56px" heig="60px"/>
							</el-col>
						</template>
					</el-row>
				</el-card>
				<el-card class="box-card" :body-style="{ height: ($store.state.app.device == 'desktop'?'calc(22vh - 30px)' : 'auto'),padding: '0' }">
					<div class="square">轻油舱存油</div>
					<el-row :gutter="5" class="align-center" :style="{ height: ($store.state.app.device == 'desktop'?'calc(100% - 26px)' : 'auto') }">
						<template v-for="(item,index) in newData.lghtOil" :key="index">
							<el-col :span="4" :xs="12">
								<oilLevel :data="item" wid="56px" heig="60px"/>
							</el-col>
						</template>
					</el-row>
				</el-card>
				<el-card class="box-card margin-top-xs" :body-style="{ padding: '0 0 8px' }">
					<div class="square">加油记录</div>
					<el-form :model="queryParams" ref="queryRef" :inline="true" class="margin-tb-xs padding-lr-xs">
						<el-row :gutter="5">
							<el-col :span="8" :xs="24">
								<el-form-item style="margin-bottom: 0px;">
									<el-select v-model="queryParams.type" placeholder="请选择" size="small" style="width: 45%;">
										<el-option v-for="dict in oil_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="16" :xs="24">
								<el-form-item style="margin-bottom: 0px;">
									<el-date-picker
										v-model="queryParams.searhDate"
										type="daterange"
										style="width: 45%;height: 26px;"
										range-separator="至">
									</el-date-picker>
									<el-button type="primary" size="small" class="margin-left-xs">搜索</el-button>
									<el-button type="warning" size="small" plain>导出</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<el-table :data="hisData"
						height="calc(40vh - 96px)"
						ref="singleTable"
						highlight-current-row
						:cell-style="{ padding: '5px 0' }"
						cell-class-name="text-xs"
						header-cell-class-name="text-black text-bold">
						<el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
						<el-table-column align="center" prop="lonlat" label="位置"></el-table-column>
						<el-table-column align="center" prop="time" sortable label="日期"></el-table-column>
						<el-table-column align="center" prop="num" sortable label="加油量"></el-table-column>
						<el-table-column align="center" prop="type" label="油品种类"></el-table-column>
						<el-table-column align="center" prop="money" sortable label="金额"></el-table-column>
						<el-table-column align="center" prop="people" label="负责人"></el-table-column>
				   </el-table>
				</el-card>
			</el-col>
			<el-col :span="12" :xs="24">
				<el-card class="box-card text-bold" :body-style="{ padding: '0' }">
					<div class="square">趋势对比</div>
					<div class="padding-xs">
						<el-form :model="queryParams" ref="queryRef" :inline="true">
							<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-form>
						<div class="margin-bottom-sm">油耗趋势</div>	
						<lineChart :name="`fuelTrends`" :data="fuelData" style="height: calc(50vh - 123px);"/>
						<div class="margin-top margin-bottom-sm">里程趋势</div>
						<lineChart :name="`emissionTrends`" :data="emissionData" style="height: calc(50vh - 123px);"/>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import lineChart from "@/components/Echarts/lineChart";
	import oilLevel from "@/components/Temperature/oilLevel";
	const { oil_type } = proxy.useDict("oil_type");
	const loading = ref(false);
	const tabFuel = ref('0');
	const newData = computed(() => {
		let _obj = {
			"heavyOil": [{
				max: 7.01,
				name: "1号舱",
				value: 5.2,
				unit: "L",
				type: "heavy"
			},{
				max: 7.01,
				name: "2号舱",
				value: 4.3,
				unit: "L",
				type: "heavy"
			},{
				max: 7.01,
				name: "3号舱",
				value: 4.3,
				unit: "L",
				type: "heavy"
			},{
				max: 7.01,
				name: "4号舱",
				value: 2.4,
				unit: "L",
				type: "heavy"
			},{
				max: 7.01,
				name: "5号舱",
				value: 1.3,
				unit: "L",
				type: "heavy"
			}],
			"lghtOil": [{
				max: 7.01,
				name: "1号舱",
				value: 6.03,
				unit: "L",
				type: "light"
			},{
				max: 7.01,
				name: "2号舱",
				value: 3.3,
				unit: "L",
				type: "light"
			}]
		}
		return _obj;
	})
	const data = reactive({
		thlis: [{ name: "当前重油总量", value: 12233.6, unit: "L" },
				{ name: "当前轻油总量", value: 12233.6, unit: "L" },
				{ name: "当前滑油总量", value: 12233.6, unit: "吨" }],
		queryParams: {
			searhDate: ['2023-07-01', '2023-07-10'],
			searhType: 0,
			type: "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":"bar",
				"itemStyle": {
					"color": "#B05409"
				}
			},{
				"data":[912,653,628,653,238,532,855,320,603,658],
				"name":"轻油",
				"stack":"轻油",
				"type":"bar",
				"itemStyle": {
					"color": "#F08E3E"
				}
			}]
		},
		emissionData: {
			"xAxis":["11.1","11.2","11.3","11.4","11.5","11.6","11.7","11.8","11.9","11.10"],
			"name": "(海里)",
			"data":[{
				"data":[3.3,4.6,4.6,5.4,5.3,5.8,6.4,7.4,6.4,11.4],
				"name":"里程",
				"stack":"里程",
				"type":"line",
				"smooth": 0.4,
				"showSymbol": false
			}]
		},
		hisData: [{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		},{
			lonlat: "121-56.481E,30-17.822N",
			time: "2023/2/12",
			num: 12.4,
			type: "0",
			money: "12.3",
			people: "王津"
		}]
	})
	const { queryParams, fuelData, emissionData, thlis, hisData } = toRefs(data);
	const changeTab = function(key){
		tabFuel.value = key;
	}
</script>

