<template>
	<div style="padding: 20px 40px;" class="inpData">
		<div class="shipInfo margin-bottom-sm">
			<el-row>
				<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5">
					<div>船舶名称：<span class="Count">{{infoForm.shipName}}</span></div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5">
					<div>船舶识别号：<span class="Count">{{infoForm.shipSn}}</span></div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5">
					<div>主机额定功率：<span class="Count">{{infoForm.mainMotorPower}} kw</span></div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5">
					<div>副机额定功率：<span class="Count">{{infoForm.auxiliaryMotorPower}} kw</span></div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
					<div>锅炉额定功率：<span class="Count">{{infoForm.boilerPower}} kw</span></div>
				</el-col>
			</el-row>
		</div>
		<div>
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="12" :lg="7" :xl="7">
					<div class="Tiel">当前港口</div>
					<div class="grid-content">
						<div class="flex align-center">
							<div>当前港口：</div>
							<el-select
							    v-model="infoForm.harbor"
							    filterable
							    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" effect="dark" :content="infoForm.harbor" placement="top">
								<span class="Count">{{infoForm.harbor}}</span>
							</el-tooltip>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
					<div class="Tiel">岸电使用</div>
					<div class="grid-content">
						<div>
							<span>使用时长：</span>
							<el-input v-if="notDetail" v-model="infoForm.pjUsageTime" placeholder="使用时长"></el-input>
							<span v-else class="Count">{{infoForm.pjUsageTime}}</span>
							 h
						</div>
						<div>
							<span>消耗电量：</span>
							<el-input v-if="notDetail" v-model="infoForm.pjPowerConsumption" placeholder="消耗电量"></el-input>
							<span v-else class="Count">{{infoForm.pjPowerConsumption}}</span>
							 kw.h
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
					<div class="Tiel">时间</div>
					<div class="grid-content">
						<div>
							<span>航行时间：</span>
							<el-input v-if="notDetail" v-model="infoForm.saltTime" placeholder="航行时间"></el-input>
							<span v-else class="Count">{{infoForm.saltTime}}</span>
							 h
						</div>
						<div>
							<span>营运时间：</span>
							<el-input v-if="notDetail" v-model="infoForm.operateTime" placeholder="营运时间"></el-input>
							<span v-else class="Count">{{infoForm.operateTime}}</span>
							 h
						</div>
					</div>
				</el-col>
			</el-row>
		</div>	
		<div style="margin: 20px 0px;">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
					<div class="Port">
						<div class="Tiel">航段</div>
						<div class="Tiel">距离<span class="text-xs">（海里）</span></div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
					<div class="Tiel">客货量</div>
				</el-col>
			</el-row>
			<el-row v-for="(sditem,index) in infoForm.sections" :key="index">
				<el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
					<div class="Port">
						<div>
							<el-input v-if="notDetail" v-model="sditem.shipSection" placeholder="航段"></el-input>
							<span v-else class="Count" style="margin-left: 0;">{{sditem.shipSection}}</span>
						</div>
						<div>
							<el-input v-if="notDetail" v-model="sditem.shipSectionDistance" placeholder="航行距离"></el-input>
							<span v-else class="Count" style="margin-left: 0;">{{sditem.shipSectionDistance}}</span>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
					<div class="Thr">
						<div>
							<span>货物总质量：</span>
							<el-input v-if="notDetail" v-model="sditem.totalWeight" placeholder="货物总质量"></el-input>
							<span v-else class="Count">{{sditem.totalWeight}}</span>
							 吨
						</div>
						<div>
							<span>集装箱：</span>
							<el-input v-if="notDetail" v-model="sditem.container" placeholder="集装箱"></el-input>
							<span v-else class="Count">{{sditem.container}}</span>
							 TEU
						</div>
						<div>
							<span>载客：</span>
							<el-input v-if="notDetail" v-model="sditem.shipPersonNum" placeholder="载客"></el-input>
							<span v-else class="Count">{{sditem.shipPersonNum}}</span>
							 人
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div>
			<div class="Tiel">能量消耗</div>
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8"
					v-for="(sditem,index) in infoForm.detailsList" :key="index">
					<div class="flex">
						<img src="/src/assets/images/power.png" style="height: 91px;" alt="">
						<div class="grid-content margin-left-sm">
							<div class="flex align-center">
								<div>能量种类：</div>
								<el-select v-if="notDetail" filterable clearable v-model="sditem.energyType" placeholder="请选择">
								    <el-option
								      v-for="item in energyTypes"
								      :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>
							</div>
							<div>
								<span>能量数量：</span>
								<el-input style="width: 132px;margin-right: 6px;" v-if="notDetail" v-model="sditem.energyNum" placeholder="能量数量"></el-input>
								<span v-else class="Count">{{sditem.energyNum}}</span>
								 吨
							</div>
							<div class="flex align-center">
								<div>收集方法：</div>
								<el-select v-if="notDetail" filterable clearable v-model="sditem.energyCollectionMethob" placeholder="请选择">
								    <el-option
								      v-for="item in collectionType"
								      :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>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="margin: 30px 0px 10px;">
			<el-row :gutter="10">
				<el-col :xs="12" :sm="12" :md="7" :lg="7" :xl="7">
					<div class="grid-content">
						<div v-if="notDetail">
							<span>当前时间：</span>
							<el-date-picker
							  v-model="infoForm.nowTime"
							  type="datetime"
							  placeholder="选择日期时间"
							  style="width: 200px;">
							</el-date-picker>
						</div>
						<div v-else><span>记录时间：</span><span class="Count">{{infoForm.nowTime}}</span></div>
					</div>
				</el-col>
				<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
					<div class="grid-content">
						<div class="flex align-center">
							<div>收集人：</div>
							<el-input style="color: #fbbd08;" v-if="notDetail" v-model="infoForm.createUser" placeholder="请输入内容"></el-input>
							<span v-else class="Count">{{infoForm.createUser}}</span>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="7" :lg="7" :xl="7">
					<div class="grid-content" @click="signName">
						<div class="flex align-center pointer">
							<div>船长签名：</div>
							<div class="bg-blue">
								<img  style="height: 30px;" :src="autoGraph" @click.stop="seePriwerVisible = true">
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" v-if="notDetail">
					<div><el-button type="primary" @click="downLog" round>生成报表</el-button></div>
				</el-col>
			</el-row>
		</div>
		<div class="text-xs text-grey"><span class="text-red">*</span>舶能源消耗收集方法：<span class="margin-right-sm" v-for="(item,index) in collectionType" :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 energyTypes" :key="index">{{item.value}}、{{item.label}}</span></div>
		<canvasDrawDialog @finsh="finsh" ref="canvasDrawDialogRef" />
		<el-dialog title="船长签名" v-model="seePriwerVisible">
			<div class="bg-blue">
				<el-image :src="autoGraph"></el-image>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import canvasDrawDialog from "@/components/autoGraph/index";
	const store = useStore();
	const { proxy } = getCurrentInstance();
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount } from 'vue';
	const loading = ref(true);
	const collectionType = ref([]);
	const energyTypes = ref([]);
	const notDetail = ref(true);
	const hasInfo = ref(true);
	const loadingO = ref(false);
	const protOptionO = ref([]);
	const autoGraph = ref("");
	const seePriwerVisible = ref(false);
	const data = reactive({
		infoForm: {}
	})
	const { infoForm } = toRefs(data);
	const resetForm = function(){
		infoForm.value = {
			createTime:"",
			createUser: null,
			harbor: "",
			nowTime: "",
			operateTime: null,
			pjPowerConsumption: null,
			pjUsageTime: null,
			saltTime: null,
			sections:[{
				shipPersonNum: null,
				shipSection: null,
				shipSectionDistance: null,
				totalWeight: null,
				container: null
			}],
			auxiliaryMotorPower: 1000,
			boilerPower: 1000,
			detailsList: [{
				energyCollectionMethob: null,
				energyNum: null,
				energyType: null
			}],
			mainMotorPower: 3000,
			shipName: "测试数据",
			shipSn: "390008966"
		};
	};
	const remoteMethod = function(query) {
		if(query !== '') {
			loadingO.value = true;
			// let _opts = {
			// 	url: baseUrl + "/harbor/harbor/list",
			// 	type:"GET"
			// };
			// let _data = {harborName: query};
			// let _hea  = {
			// 	"Authorization":"Bearer " + baseTok,
			// };
			// getAxios(_opts, _data, _hea).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 = [];
			// 	}
				loadingO.value = false;
				// this.protOptionO = _obj;
			// })
		} else {
			protOptionO.value = [];
		}
	};
	const signName = function(){
		if(notDetail.value){
			proxy.$refs["canvasDrawDialogRef"].show();
		}
	};
	const finsh = function(src){
		autoGraph.value = src;
	}
	const downLog = function(src){
	}
	onMounted(()=>{
		resetForm();
	})
</script>

<style lang='scss' scoped>
	.inpData{
		
		.Tiel{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 18px;
		}
		.Count{
			font-size: 16px;
			color: #fbbd08;
			margin-left: 10px;
			letter-spacing: 2px;
			width: calc(100% - 90px);
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
		}
		.Port{
			display: flex;
			flex-wrap: wrap;
		}
		.Port>div{
			margin-bottom: 14px;
			width: 50%;
		}
		.Thr{
			display: flex;
			flex-wrap: wrap;
		}
		.Thr>div{
			margin-bottom: 14px;
			width: 33.33%;
		}
		.grid-content>div{
			margin-bottom: 14px;
		}
/* 		:deep .el-date-editor.el-input, .el-input{
			width: 110px;
		}
		:deep .el-select .el-input{
			width: 160px;
		}
		:deep .el-input__inner{
			color: #fbbd08;
		}
		:deep .el-input__prefix, .el-input__suffix{
			height: auto;
			top: -5px;
		} */
	}
	@media screen and (max-width: 600px) {
		.inpData .Port>div{
			width:100%;
		}
		.inpData .Thr>div{
			width:100%;
		}
	}
</style>