<template>
	<div class="">
		<el-form :model="infoForm" ref="infoRef" label-width="120px">
			<el-row>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">船舶信息</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="船舶名称" prop="shipName">
										{{infoForm.shipName}}
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="船舶识别号" prop="shipSn">
										{{infoForm.shipSn}}
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="主机额定功率" prop="mainMotorPower">
										<el-input v-if="notDetail" v-model="infoForm.mainMotorPower"
											placeholder="主机额定功率">
											<template #append>kw</template>
										</el-input>
										<span v-else class="Count">{{infoForm.mainMotorPower}}kw</span>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="副机额定功率" prop="auxiliaryMotorPower">
										<el-input v-if="notDetail" v-model="infoForm.auxiliaryMotorPower"
											placeholder="副机额定功率">
											<template #append>kw</template>
										</el-input>
										<span v-else class="Count">{{infoForm.auxiliaryMotorPower}}kw</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="锅炉额定功率" prop="boilerPower">
										<el-input v-if="notDetail" v-model="infoForm.boilerPower" placeholder="锅炉额定功率">
											<template #append>kw</template>
										</el-input>
										<span v-else class="Count">{{infoForm.boilerPower}}kw</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">岸电使用</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="使用时长" prop="pjUsageTime">
										<el-input type="number" v-if="notDetail" v-model="infoForm.pjUsageTime"
											placeholder="使用时长">
											<template #append>h</template>
										</el-input>
										<span v-else class="Count">{{infoForm.pjUsageTime}}h</span>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="消耗电量" prop="pjPowerConsumption">
										<el-input type="number" v-if="notDetail" v-model="infoForm.pjPowerConsumption"
											placeholder="消耗电量">
											<template #append>kw.h</template>
										</el-input>
										<span v-else class="Count">{{infoForm.pjPowerConsumption}}kw.h</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">港口名以及靠泊时间</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="上一港" prop="lastHarbor">
										<el-select v-model="infoForm.lastHarbor" filterable allow-create remote
											reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod"
											:loading="loadingO" v-if="notDetail">
											<el-option v-for="item in protOptionO" :key="item.label" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<el-tooltip v-else class="item" :content="infoForm.lastHarbor">
											<span class="Count">{{infoForm.lastHarbor}}</span>
										</el-tooltip>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="时间" prop="mainMotorTime">
										<el-date-picker v-model="infoForm.mainMotorTime" type="datetime"
											v-if="notDetail" style="width: 200px;" placeholder="任意时间点">
										</el-date-picker>
										<span v-else class="Count">{{infoForm.mainMotorTime}}</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="本港" prop="harbor">
										<el-select v-model="infoForm.harbor" filterable allow-create remote
											reserve-keyword placeholder="请输入关键词" :remote-method="harborMethod"
											:loading="loadingH" v-if="notDetail" style="width: 200px;">
											<el-option v-for="item in protOptionH" :key="item.label" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<el-tooltip v-else class="item" :content="infoForm.harbor">
											<span class="Count">{{infoForm.harbor}}</span>
										</el-tooltip>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="时间" prop="nowTime">
										<el-date-picker v-model="infoForm.nowTime" type="datetime" v-if="notDetail"
											placeholder="任意时间点" style="width: 200px;" @change="timeChange">
										</el-date-picker>
										<span v-else class="Count">{{infoForm.nowTime}}</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">时间</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="航行时间" prop="saltTime">
										<el-input type="number" v-if="notDetail" v-model="infoForm.saltTime"
											placeholder="航行时间">
											<template #append>h</template>
										</el-input>
										<span v-else class="Count">{{infoForm.saltTime}}h</span>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="营运时间" prop="operateTime">
										<el-input type="number" v-if="notDetail" v-model="infoForm.operateTime"
											placeholder="营运时间">
											<template #append>h</template>
										</el-input>
										<span v-else class="Count">{{infoForm.operateTime}}h</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">距离</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="航行距离" prop="saltDistance">
										<el-input type="number" v-if="notDetail" v-model="infoForm.saltDistance"
											placeholder="航行距离">
											<template #append>海里</template>
										</el-input>
										<span v-else class="Count">{{infoForm.saltDistance}}海里</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">客货量</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="载客" prop="shipPersonNum">
										<el-input type="number" v-if="notDetail" v-model="infoForm.shipPersonNum"
											placeholder="载客">
											<template #append>人</template>
										</el-input>
										<span v-else class="Count">{{infoForm.shipPersonNum}}人</span>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="集装箱" prop="container">
										<el-input type="number" v-if="notDetail" v-model="infoForm.container"
											placeholder="集装箱">
											<template #append>TEU</template>
										</el-input>
										<span v-else class="Count">{{infoForm.container}}TEU</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="货物总量" prop="totalWeight">
										<el-input type="number" v-if="notDetail" v-model="infoForm.totalWeight"
											placeholder="货物总质量">
											<template #append>吨</template>
										</el-input>
										<span v-else class="Count">{{infoForm.totalWeight}}吨</span>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">能量消耗</div>
						<div class="padding-sm">
							<template v-for="(sditem,index) in infoForm.detailsList" :key="index">
								<el-row>
									<el-col :span="12" :xs="24">
										<el-form-item label="能量种类" prop="energyType">
											<el-select v-if="notDetail" filterable clearable v-model="sditem.energyType"
												placeholder="请选择">
												<el-option v-for="item in ship_energy_type" :key="item.value"
													:label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<el-tooltip v-else class="item" effect="dark" :content="sditem.energyType"
												placement="top">
												<span class="Count">{{sditem.energyType}}</span>
											</el-tooltip>
										</el-form-item>
									</el-col>
									<el-col :span="12" :xs="24">
										<el-form-item label="能量数量" prop="energyNum">
											<el-input type="number" v-if="notDetail" v-model="sditem.energyNum"
												placeholder="能量数量">
												<template #append>吨</template>
											</el-input>
											<span v-else class="Count">{{sditem.energyNum}}吨</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12" :xs="24">
										<el-form-item label="收集方法" prop="energyCollectionMethob">
											<el-select v-if="notDetail" filterable clearable
												v-model="sditem.energyCollectionMethob" placeholder="请选择">
												<el-option v-for="item in ship_energy_coll_method" :key="item.value"
													:label="item.label" :value="item.value">
												</el-option>
											</el-select>
											<el-tooltip v-else class="item" effect="dark"
												:content="sditem.energyCollectionMethob" placement="top">
												<span class="Count">{{sditem.energyCollectionMethob}}</span>
											</el-tooltip>
										</el-form-item>
									</el-col>
								</el-row>
							</template>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12" :xs="24" class="grid padding-xs">
					<el-card shadow="never" class="flex-sub" :body-style="{ padding: '0' }">
						<div class="square">报表生成</div>
						<div class="padding-sm">
							<el-row>
								<el-col :span="12" :xs="24" v-if="notDetail">
									<el-form-item label="当前时间" prop="currentTime">
										<el-date-picker v-model="currentTime" type="datetime" placeholder="选择日期时间"
											style="width: 200px;">
										</el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24" v-else>
									<el-form-item label="记录时间" prop="currentTime" v-if="notDetail">
										<span class="Count">{{infoForm.nowTime}}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12" :xs="24">
									<el-form-item label="收集人" prop="createUser">
										<el-input style="color: #fbbd08;" v-if="notDetail" v-model="infoForm.createUser"
											placeholder="请输入内容"></el-input>
										<span v-else class="Count">{{infoForm.createUser}}</span>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" :xs="24">
									<el-form-item label="船长签名">
										<div class="pointer flex align-center" style="min-width:150px"
											@click="signName">
											<img style="height: 30px;" :src="autoGraph"
												@click.stop="seePriwerVisible = true">
											<svg-icon icon-class="edit"></svg-icon>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="text-xs text-grey"><span class="text-red">*</span>舶能源消耗收集方法：<span
									class="margin-right-sm" v-for="(item,index) in ship_energy_type"
									:key="index">{{item.value}}、{{item.label}}</span></div>
							<div class="text-xs text-grey"><span class="text-red">*</span>船舶能源种类：<span
									class="margin-right-sm" v-for="(item,index) in ship_energy_coll_method"
									:key="index">{{item.value}}、{{item.label}}</span></div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-form>
		<div class="margin-top text-right padding-xs">
			<el-button type="primary" @click="downLog">生成报表</el-button>
		</div>
		<canvasDrawDialog @finsh="finsh" ref="canvasDrawDialogRef" />
		<el-dialog title="船长签名" v-model="seePriwerVisible">
			<div class="bg-blue">
				<el-image :src="autoGraph" style="width: 100%;"></el-image>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import canvasDrawDialog from "@/components/autoGraph/index";
	const store = useStore();
	const {
		proxy
	} = getCurrentInstance();
	const {
		ship_energy_coll_method,
		ship_energy_type
	} = proxy.useDict("ship_energy_coll_method", "ship_energy_type");
	import {
		reactive,
		ref
	} from "@vue/reactivity";
	import {
		onMounted,
		onBeforeUnmount
	} from "vue";
	import {
		getOneReport,
		getHarBor,
		getHarBorByTime,
		downloadOil
	} from "@/api/oilReport/oilReport";
	const loading = ref(true);
	const notDetail = ref(true);
	const hasInfo = ref(true);
	const loadingO = ref(false);
	const protOptionO = ref([]);
	const loadingH = ref(false);
	const protOptionH = ref([]);
	const autoGraph = ref("");
	const seePriwerVisible = ref(false);
	const data = reactive({
		infoForm: {},
		currentTime: new Date(),
		queryFis: {
			"harborName": undefined,
			"pageNum": 1,
			"pageSize": 999
		}
	});
	const {
		infoForm,
		currentTime,
		queryFis
	} = toRefs(data);
	const resetForm = function() {
		let _name = proxy.$store.state.data.analogList.find((item) => item.sn == proxy.$store.state.data
			.curAnalogSn) || {
				"iboatName": ""
			}
		infoForm.value = {
			auxiliaryMotorPower: 0,
			boilerPower: 0,
			container: null,
			createUser: null,
			detailsList: [{
				energyCollectionMethob: null,
				energyNum: null,
				energyType: null,
			}, ],
			harbor: "",
			lastHarbor: "",
			mainMotorPower: 0,
			mainMotorTime: null,
			nowTime: null,
			operateTime: null,
			pjPowerConsumption: null,
			pjUsageTime: null,
			saltDistance: null,
			saltTime: null,
			shipName: _name.iboatName,
			shipPersonNum: null,
			shipSn: proxy.$store.state.data.curAnalogSn,
			totalWeight: null,
		};
	};
	const timeChange = function(val) {
		getHarBorByTime(`${proxy.$store.state.data.curAnalogSn}/${proxy.parseTime(val, "{y}-{m}-{d} {h}:{i}:{s}")}`)
			.then(res => {
				if (res.code == 200) {
					infoForm.value.harbor = res.harborName;
				} else {
					proxy.$modal.msgError("该时间没有匹配的港口！");
				}
			})
	}
	const remoteMethod = function(query) {
		if (query !== "") {
			loadingO.value = true;
			queryFis.value.harborName = query;
			getProt(1);
		}
	};
	const harborMethod = function(query) {
		if (query !== "") {
			loadingH.value = true;
			getProt(2);
			queryFis.value.harborName = query;
		}
	};
	const getProt = function(cb) {
		getHarBor(queryFis.value).then(res => {
			let _obj = [];
			if (res.code == 200 && res.rows.length) {
				_obj = res.rows.map(item => {
					return {
						value: item.harborId,
						label: item.harborName
					};
				});
			} else {
				_obj = [];
			}
			if (cb == 1) {
				loadingO.value = false;
				protOptionO.value = _obj;
			} else {
				loadingH.value = false;
				protOptionH.value = _obj;
			}
		})
	};
	const signName = function() {
		if (notDetail.value) {
			proxy.$refs["canvasDrawDialogRef"].show();
		}
	};
	const finsh = function(src) {
		autoGraph.value = src;
	};
	const downLog = function() {
		if ((infoForm.value.mainMotorTime + "").indexOf("T") != -1) {
			infoForm.value.mainMotorTime = proxy.parseTime(infoForm.value.mainMotorTime, "{y}-{m}-{d} {h}:{i}:{s}");
		}
		if ((infoForm.value.nowTime + "").indexOf("T") != -1) {
			infoForm.value.nowTime = proxy.parseTime(infoForm.value.nowTime, "{y}-{m}-{d} {h}:{i}:{s}");
		}
		if ((infoForm.value.lastHarbor + "").length) {
			let _att = protOptionO.value.filter(item => item.value == infoForm.value.lastHarbor);
			if (_att.length) infoForm.value.lastHarbor = _att[0].label;
		}
		if ((infoForm.value.harbor + "").length) {
			let _atts = protOptionH.value.filter(item => item.value == infoForm.value.harbor);
			if (_atts.length) infoForm.value.harbor = _atts[0].label;
		}
		let data = {
			"shipEnergyExpendH": infoForm.value,
			"signature": autoGraph.value
		};
		downloadOil(data);
	};
	const getInfo = function() {
		resetForm();
		getOneReport(proxy.$store.state.data.curAnalogSn).then((res) => {
			if (res.code == 200) {
				infoForm.value = res.data;
			}
		})
	}
	watch(
		() => proxy.$store.state.data.curAnalogSn,
		(newValue) => {
			getInfo();
		}
	);
	onMounted(() => {
		getInfo();
	});
</script>

<style lang='scss' scoped>
	.el-input {
		width: auto;
	}
</style>