<template>
	<el-row :gutter="14">
		<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
				<div class="flex" :class="undex == 0?'margin-bottom':''" 
					v-for="(utem,undex) in unitConsData" :key="undex">
					<div style="width: 70%;position: relative;">
						<div class="sTitleSty" style="letter-spacing: 2px;">{{utem.name}}</div>
						<line-chart :name="utem.className" :data="utem" height="calc(30vh - 65px)"/>
					</div>
					<div style="width: 30%;padding: 0 2% 0 4%;">
						<el-form ref="unitsFormRef" :model="unitForm" label-width="0px">
							<el-form-item style="margin-bottom: 0px;">
								<div>开始时间：</div>
								<el-date-picker
								  v-model="unitForm[undex].startTime"
								  type="date"
								  size="small"
								  class="dateSelet"
								  style="width: 100%;"
								  placeholder="开始日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="margin-bottom: 8px;">
								<div>结束时间：</div>
								<el-date-picker
								  v-model="unitForm[undex].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 :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
				<div class="flex" :class="sndex == 0?'margin-bottom':''" 
					v-for="(stem,sndex) in timeConsData" :key="sndex">
					<div style="width: 70%;position: relative;">
						<div class="sTitleSty" style="letter-spacing: 2px;">{{stem.name}}</div>
						<line-chart :name="stem.className" :data="stem" height="calc(30vh - 65px)"/>
					</div>
					<div style="width: 30%;padding: 0 2% 0 4%;">
						<el-form ref="timesFormRef" :model="timeForm" label-width="0px">
							<el-form-item style="margin-bottom: 0px;">
								<div>开始时间：</div>
								<el-date-picker
								  v-model="timeForm[sndex].startTime"
								  type="date"
								  size="small"
								  class="dateSelet"
								  style="width: 100%;"
								  placeholder="开始日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item style="margin-bottom: 8px;">
								<div>结束时间：</div>
								<el-date-picker
								  v-model="timeForm[sndex].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="30">
					<template v-for="(item,index) in linesData" :key="index">
						<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
							<div style="position: relative;padding: 0 3% 0 1%;">
								<div class="sTitleSty" style="letter-spacing: 2px;">{{item.name}}</div>
								<line-chart :name="item.className" :data="item" height="calc(40vh - 116px)"/>
							</div>
							<div>
								<el-form v-if="index == 0" ref="voyageFormRef" class="flex justify-center" :model="voyageForm" label-width="100px">
									<el-form-item style="margin-bottom: 0;" label="航次消耗对比：">
										<el-select v-model="voyageForm.voyageId" placeholder="请选择" 
											multiple collapse-tags size="small" style="width: 100%;">
											<el-option
											  v-for="item in voyageOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
								<el-form v-if="index == 1" ref="cotwoFormRef" class="flex justify-center" :model="cotwoForm" label-width="100px">
									<el-form-item style="margin-bottom: 0;width: 40%;" label="查询方式：">
										<el-select v-model="cotwoForm.cotwoId" placeholder="请选择" size="small" style="width: 100%;">
											<el-option
											  v-for="item in cotwoOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="航次选择：" style="margin-bottom: 0px;width: 60%;" v-if="cotwoForm.cotwoId == 1">
										<el-select v-model="voyageForm.voyageId" placeholder="请选择"
											size="small" style="width: 100%;">
											<el-option
											  v-for="item in voyageOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="时间：" style="margin-bottom: 0px;width: 60%;" v-else>
										<el-date-picker
										  v-model="cotwoForm.startEndTime"
										  type="daterange"
										  size="small"
										  style="width: 50%;box-shadow: 0 0 7px 2px #dcdcdc;"
										  range-separator=" ~ "
										  start-placeholder="开始日期"
										  end-placeholder="结束日期">
										</el-date-picker>
									</el-form-item>
								</el-form>
								<el-form v-if="index == 2" ref="eeofFormRef" class="flex justify-center" :model="eeofForm" label-width="100px">
									<el-form-item style="margin-bottom: 0;" label="查询方式：">
										<el-select v-model="eeofForm.eeofId" placeholder="请选择" size="small" style="width: 100%;">
											<el-option
											  v-for="item in eeofOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="时间：" style="margin-bottom: 0px;">
										<div></div>
										<el-date-picker
										  v-model="eeofForm.startEndTime"
										  type="daterange"
										  size="small"
										  style="width: 50%;box-shadow: 0 0 7px 2px #dcdcdc;"
										  range-separator=" ~ "
										  start-placeholder="开始日期"
										  end-placeholder="结束日期">
										</el-date-picker>
									</el-form-item>
								</el-form>
							</div>
						</el-col>
					</template>
				</el-row>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
	import lineChart from "@/components/Echarts/LineChart";
	const voyageOptions = ref([]);
	const eeofOptions = ref([]);
	const cotwoOptions = ref([]);
	
	const data = reactive({
		unitConsData: [{
			name: "单位航行距离燃油消耗量",
			className: "distanceCons",
			xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		},{
			name: "单位运输功燃油消耗量",
			className: "transportCons",
			xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		}],
		timeConsData: [{
			name: "燃油小时消耗量",
			className: "hourCons",
			xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				areaStyle: {},
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				areaStyle: {},
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				areaStyle: {},
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		},{
			name: "燃油日消耗量",
			className: "dayCons",
			xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		}],
		linesData: [{
			name: "燃油航次消耗量",
			className: "VoyageCons",
			xAxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
			data: [{
				name: '青岛-广州',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '上海-唐山',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			},{
				name: '唐山-福州',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			}]
		},{
			name: "CO2排放指标",
			className: "CoDischarge",
			xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		},{
			name: "EEOI排放指标",
			className: "EeoioDischarge",
			xAxis: ["5月1日", "5月2日", "5月3日", "5月4日", "5月5日", "5月6日", "5月7日", "5月8日", "5月9日", "5月10日"],
			data: [{
				name: '主机',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '辅机',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [120, 104, 118, 119, 103, 106, 158, 129, 133, 140]
			},{
				name: '锅炉',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10, 18, 19, 13, 10]
			}]
		}],
		voyageForm: {},
		eeofForm: {},
		cotwoForm: {},
		unitForm: [{}, {}],
		timeForm: [{}, {}]
	});
	const { linesData, voyageForm, eeofForm, cotwoForm, unitForm, timeForm, timeConsData, unitConsData } = toRefs(data);
	const getOptions = function(){
		voyageOptions.value = [{
			label: "青岛-大连",
			value: 0
		},{
			label: "大连-福州",
			value: 1
		},{
			label: "福州-广州",
			value: 2
		},{
			label: "上海-广州",
			value: 3
		}];
		eeofOptions.value = [{
			label: "时间",
			value: 0
		},{
			label: "航次",
			value: 1
		}];
		cotwoOptions.value = [{
			label: "时间",
			value: 0
		},{
			label: "航次",
			value: 1
		}];
	}
	getOptions();
</script>

<style scoped lang="scss">
	::v-deep .el-form-item__label {
		color: var(--bGray);
		font-weight: initial;
	}
	.sTitleSty{
		font-size: 0.8rem;
	}
	::v-deep .dateSelet .el-input__wrapper{
		box-shadow: 0 0 7px 2px #dcdcdc;
	}
</style>