<template>
	<el-row :gutter="14">
		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
				<div class="text-sm text-bold margin-bottom-xs">全能量消耗分布图</div>
				<energy-consu/>
			</el-card>
		</el-col>
		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
			<el-row :gutter="14">
				<template v-for="(ltem, lndex) in OilStorage.oilLevel" :key="lndex">
					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
						<el-card class="box-card cardSty text-sm margin-bottom-sm" :body-style="{ height: 'calc(34vh - 72px)',padding: '10px !important' }">
							<div class="text-bold">{{lndex == 0?'轻':'重'}}油储存</div>
							<div class="grid col-2 text-center" style="height: calc(100% - 22px)">
								<div v-for="(qtem, qndex) in ltem" :key="qndex"
									class="flex align-end justify-center" style="height: 50%;">
									<oil-box :data="qtem" :type="lndex == 1?'heavy':''"/>
									<div class="text-blue text-xxl text-bold margin-left-sm">{{OilStorage.oilStorage[lndex][qndex].value}}L</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</template>
			</el-row>
			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
				<div class="flex">
					<div style="width: 70%;">
						<div class="text-bold">{{oilsData.title}}</div>
						<line-chart name="HostPressure" :data="oilsData" height="calc(32.66vh - 73px)"/>
					</div>
					<div style="width: 30%;padding: 0 2%;">
						<el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
							<el-form-item style="margin-bottom: 8px;">
								<div>时间单位：</div>
								<el-select v-model="oilsForm.timeUnit" placeholder="请选择" size="small" style="width: 100%;">
									<el-option
									  v-for="item in timeUnitOptions"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item style="margin-bottom: 8px;">
								<div>开始时间：</div>
								<el-date-picker
								  v-model="oilsForm.startTime"
								  type="date"
								  size="small"
								  class="dateSelet"
								  style="width: 100%;"
								  placeholder="开始日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="margin-bottom: 15px;">
								<div>结束时间：</div>
								<el-date-picker
								  v-model="oilsForm.endTime"
								  type="date"
								  size="small"
								  class="dateSelet"
								  style="width: 100%;"
								  placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="margin-bottom: 0;">
								<el-button style="width: 100%;" type="primary" size="small">查询</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-card>
		</el-col>
		<el-col :span="24" :xs="24">
			<el-card class="box-card cardSty margin-top-sm" :body-style="{ padding: '10px !important' }">
				<el-row :gutter="20">
					<template v-for="(item,index) in consumeData" :key="index">
						<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="position: relative;">
							<div v-if="index == 0" class="sTitleSty" style="letter-spacing: 0;left: 12px;">船舶设备能量分布</div>
							<pie-rose :name="item.name" :data="item.data" height="calc(33.33vh - 90px)"/>
							<div class="text-sm text-bold" style="position: absolute;bottom: 0;left: 45%;transform: translate(-50%, 0);">{{item.title}}</div>
						</el-col>
					</template>
				</el-row>
			</el-card>
		</el-col>
	</el-row>
	<!--  -->
</template>

<script setup>
	import pieRose from "@/components/Echarts/pieRoseTypeSimple";
	import lineChart from "@/components/Echarts/LineChart";
	import OilBox from "@/components/oilsBox";
	import EnergyConsu from "./energyConsu";
	
	const timeUnitOptions = ref([]);
	const data = reactive({
		oilsData: {
			title: "燃油存量数据查询",
			name: "",
			xAxis: ["2024/5/1", "2024/5/2", "2024/5/3", "2024/5/4", "2024/5/5", "2024/5/6"],
			data: [{
				name: '重油',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				areaStyle: {},
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '轻油',
				type: 'line',
				stack: 'Total',
				smooth: true,
				areaStyle: {},
				data: [10, 14, 18, 19, 13, 10]
			}],
		},
		consumeData: [{
			title: "初级能量消耗端能量",
			name: "primaryCons",
			data: [{
				value: 10,
				name: "主机"
			},{
				value: 20,
				name: "辅机"
			},{
				value: 30,
				name: "燃油锅炉"
			},{
				value: 80,
				name: "初级耗能装置"
			}]
		},{
			title: "有效做功能量分布图",
			name: "effectWork",
			data: [{
				value: 40,
				name: "推进做功"
			},{
				value: 70,
				name: "电力做功"
			},{
				value: 14,
				name: "蒸汽做功"
			},{
				value: 16,
				name: "其他做功"
			}]
		},{
			title: "能量损失分布图",
			name: "energyLoss",
			data: [{
				value: 10,
				name: "排烟损失"
			},{
				value: 30,
				name: "冷却损失"
			},{
				value: 78,
				name: "推进损失"
			},{
				value: 65,
				name: "主机其他损失"
			},{
				value: 45,
				name: "传动损失"
			},{
				value: 37,
				name: "辅机其他损失"
			},{
				value: 17,
				name: "锅炉热损失"
			}]
		},{
			title: "全船能量分布图",
			name: "totalEnergy",
			data: [{
				value: 68,
				name: "推进做功"
			},{
				value: 44,
				name: "推进损失"
			},{
				value: 87,
				name: "排烟损失"
			},{
				value: 53,
				name: "冷却损失"
			},{
				value: 12,
				name: "主机其他损失"
			},{
				value: 75,
				name: "电力做功"
			},{
				value: 78,
				name: "蒸汽做功"
			},{
				value: 35,
				name: "辅机其他损失"
			},{
				value: 57,
				name: "项锅炉热损失"
			},{
				value: 34,
				name: "其他做功"
			}]
		}],
		oilsForm: {
			timeUnit: null,
			startTime: null,
			endTime: null
		},
		OilStorage: {
			"oilLevel": [[{
				name: "左轻油舱",
				value: 1.33,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "右轻油舱",
				value: 1.95,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "轻油沉淀柜",
				value: 1.01,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "2号轻油日用柜",
				value: 1.63,
				min: 0,
				max: 2,
				unit: "m"
			}],[{
				name: "左重油舱",
				value: 0.90,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "右重油舱",
				value: 1.52,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "燃油沉淀柜",
				value: 0.67,
				min: 0,
				max: 2,
				unit: "m"
			},{
				name: "燃油日用柜",
				value: 0.83,
				min: 0,
				max: 2,
				unit: "m"
			}]],
			"oilStorage": [[{
				value: 152.00,
				unit: "L"
			},{
				value: 124.00,
				unit: "L"
			},{
				value: 452.00,
				unit: "L"
			},{
				value: 523.00,
				unit: "L"
			}],[{
				value: 206.50,
				unit: "L"
			},{
				value: 213.90,
				unit: "L"
			},{
				value: 237.90,
				unit: "L"
			},{
				value: 137.90,
				unit: "L"
			}]]
		}
	});
	const { consumeData, oilsData, oilsForm, OilStorage } = toRefs(data);
	const getOptions = function(){
		timeUnitOptions.value = [{
			label: "年",
			value: 0
		},{
			label: "月",
			value: 1
		},{
			label: "日",
			value: 2
		},{
			label: "时",
			value: 3
		},{
			label: "分",
			value: 4
		}];
	}
	getOptions();
</script>

<style scoped lang="scss">
	::v-deep .dateSelet .el-input__wrapper{
		box-shadow: 0 0 7px 2px #dcdcdc;
	}
</style>