<template>
	<div class="padding">
		<div style="overflow-x: auto;">
			<div class="margin-top-lg margin-bottom-xs flex text-sm text-bold">
				<div>{{logBookTime}}</div>
			</div>
			<table cellpadding="5">
				<colgroup>
					<col style="width:10%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
					<col style="width:6%;">
				</colgroup>
				<tbody style="text-align: center;">
					<tr>
						<td colspan="16" class="text-bold" style="font-size: 1.2rem;">
							{{tableTitle}}
						</td>
					</tr>
					<tr>
						<td colspan="2">巡航时间（小时）</td>
						<td colspan="2">
							<el-input v-model="form.cruiseDate" placeholder="" :disabled="!editable" v-if="editable"
								type="number">
							</el-input>
							<span v-else>{{form.cruiseDate}}</span>
						</td>
						<td colspan="2">巡航里程（海里）</td>
						<td colspan="2">
							<el-input v-model="form.cruiseMileage" placeholder="" :disabled="!editable" v-if="editable"
								type="number">
							</el-input>
							<span v-else>{{form.cruiseMileage}}</span>
						</td>
						<td colspan="2">夜航时间（小时）</td>
						<td colspan="2">
							<el-input v-model="form.nightCruiseDate" placeholder="" :disabled="!editable"
								v-if="editable" type="number"></el-input>
							<span v-else>{{form.nightCruiseDate}}</span>
						</td>
						<td colspan="2">夜航里程（海里）</td>
						<td colspan="2">
							<el-input v-model="form.nightCruiseMileage" placeholder="" :disabled="!editable"
								v-if="editable" type="number"></el-input>
							<span v-else>{{form.nightCruiseMileage}}</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">水文气象</td>
						<td colspan="7">
							<div>
								<div class="text-left padding-lr-sm">白茆潮汐：</div>
								<div>
									<div class="padding-tb-xs">
										潮时：
										<el-input v-model="form.tidalTime1" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalTime1}}</span>
										潮高：
										<el-input v-model="form.tidalHeight1" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalHeight1}}</span>
									</div>
									<div class="padding-tb-xs">
										潮时：
										<el-input v-model="form.tidalTime2" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalTime2}}</span>
										潮高：
										<el-input v-model="form.tidalHeight2" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalHeight2}}</span>
									</div>
									<div class="padding-tb-xs">
										潮时：
										<el-input v-model="form.tidalTime3" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalTime3}}</span>
										潮高：
										<el-input v-model="form.tidalHeight3" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalHeight3}}</span>
									</div>
									<div class="padding-tb-xs">
										潮时：
										<el-input v-model="form.tidalTime4" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalTime4}}</span>
										潮高：
										<el-input v-model="form.tidalHeight4" placeholder="" :disabled="!editable"
											v-if="editable" style="width:150px">
										</el-input>
										<span v-else>{{form.tidalHeight4}}</span>
									</div>

								</div>
							</div>
						</td>
						<td colspan="7">
							<div class="padding-lr-sm">
								<el-input v-model="form.weather" placeholder="" :disabled="!editable" v-if="editable"
									type="textarea" :rows="10" style="height:100%" :maxlength="255">
								</el-input>
								<pre class="text-left" v-else v-html="form.weather"></pre>
							</div>
						</td>
					</tr>
					<tr>
						<td rowspan="7" colspan="2">巡航数据统计</td>
						<td colspan="7">一、巡航范围（次）</td>
						<td colspan="7">二、巡航任务（次 ）</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">1.重要航路：
							<el-input v-model="form.importantRoute" placeholder="" :disabled="!editable" v-if="editable"
								type="number"></el-input>
							<span v-else>{{form.importantRoute}}</span>
						</td>
						<td colspan="4">2.锚地、停泊区：
							<el-input v-model="form.anchorageBerthing" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.anchorageBerthing}}</span>
						</td>
						<td colspan="3">1.发现违法排放行为：
							<el-input v-model="form.illegalDischargeFound" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.illegalDischargeFound}}</span>
						</td>
						<td colspan="4">2.发现违反航行规定行为：
							<el-input v-model="form.violationNavigationRegulations" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.violationNavigationRegulations}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">3.施工作业区：
							<el-input v-model="form.constructionArea" placeholder="" :disabled="!editable"
								v-if="editable" type="number"></el-input>
							<span v-else>{{form.constructionArea}}</span>
						</td>
						<td colspan="4">4.客运码头、渡口：
							<el-input v-model="form.passengerTerminalFerry" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.passengerTerminalFerry}}</span>
						</td>
						<td colspan="3">3.发现违法施工作业行为：
							<el-input v-model="form.illegalConstructionActivities" placeholder="" :disabled="!editable"
								v-if="editable" type="number"></el-input>
							<span v-else>{{form.illegalConstructionActivities}}</span>
						</td>
						<td colspan="4">4.发现助航标志异常：
							<el-input v-model="form.anomalyNavigationalAids" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.anomalyNavigationalAids}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">5.抛泥区：
							<el-input v-model="form.spoilArea" placeholder="" :disabled="!editable" v-if="editable"
								type="number">
							</el-input>
							<span v-else>{{form.spoilArea}}</span>
						</td>
						<td colspan="4">6.危险品码头、装卸作业区：
							<el-input v-model="form.dangerousGoodsWharf" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.dangerousGoodsWharf}}</span>
						</td>
						<td colspan="3">5.发现违法养殖、采砂行为：
							<el-input v-model="form.illegalBreedingMining" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.illegalBreedingMining}}</span>
						</td>
						<td colspan="4">6.交通组织、护航：
							<el-input v-model="form.trafficOrganizationEscort" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.trafficOrganizationEscort}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">7.其它：
							<el-input v-model="form.other" placeholder="" :disabled="!editable" v-if="editable"
								type="number">
							</el-input>
							<span v-else>{{form.other}}</span>
						</td>
						<td colspan="4"></td>
						<td colspan="3">7.参与救助：
							<el-input v-model="form.participationRescue" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.participationRescue}}</span>
						</td>
						<td colspan="4"></td>
					</tr>
					<tr class="text-left">
						<td colspan="3">三、出动执法人员：
							<el-input v-model="form.dispatchLawEnforcementPersonnel" placeholder=""
								:disabled="!editable" v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.dispatchLawEnforcementPersonnel}}</span>
						</td>
						<td colspan="4">四、巡航次数：
							<el-input v-model="form.numberCruises" placeholder="" :disabled="!editable" v-if="editable"
								type="number">
							</el-input>
							<span v-else>{{form.numberCruises}}</span>
						</td>
						<td colspan="3">五、定线制宣传(次)：
							<el-input v-model="form.routeSettingSystemPublicity" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.routeSettingSystemPublicity}}</span>
						</td>
						<td colspan="4">六、发放资料(份)：
							<el-input v-model="form.distributionMaterials" placeholder="" :disabled="!editable"
								v-if="editable" type="number">
							</el-input>
							<span v-else>{{form.distributionMaterials}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">七、检查船舶：
							<el-input v-model="form.inspectTheShip" placeholder="" :disabled="!editable" v-if="editable"
								type="number"></el-input>
						</td>
						<td colspan="4"></td>
						<td colspan="3"></td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td rowspan="6" colspan="2">作业现场及防污染检查</td>
						<td colspan="3">作业现场检查(次)</td>
						<td colspan="4">缺陷（项）</td>
						<td colspan="3">作业现场检查(次)</td>
						<td colspan="4">缺陷（项）</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">1.压载水排放：
							<el-input v-model="form.ballastWaterDischarge" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.ballastWaterDischarge}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect1" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect1}}</span>
						</td>
						<td colspan="3">6.水工现场：
							<el-input v-model="form.hydraulicSite" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.hydraulicSite}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect6" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect6}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">2.舷外拷铲.油漆：
							<el-input v-model="form.outboardShovelPaint" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.outboardShovelPaint}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect2" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect2}}</span>
						</td>
						<td colspan="3">7.船舶供受油:
							<el-input v-model="form.oilSupplyReceptionShips" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.oilSupplyReceptionShips}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect7" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect7}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">3.残油水接收：
							<el-input v-model="form.residualWaterReceiving" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.residualWaterReceiving}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect3" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect3}}</span>
						</td>
						<td colspan="3">8.供油抽样：
							<el-input v-model="form.oilSupplySampling" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.oilSupplySampling}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect8" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect8}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">4.洗.清舱作业：
							<el-input v-model="form.cleaning" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.cleaning}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect4" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect4}}</span>
						</td>
						<td colspan="3">9.液货过驳：
							<el-input v-model="form.liquidCargoTransfer" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.liquidCargoTransfer}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect9" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect9}}</span>
						</td>
					</tr>
					<tr class="text-left">
						<td colspan="3">5.沉船打捞：
							<el-input v-model="form.sunkenShipSalvage" placeholder="" :disabled="!editable"
								v-if="editable">
							</el-input>
							<span v-else>{{form.sunkenShipSalvage}}</span>
						</td>
						<td colspan="4">
							<el-input v-model="form.defect5" placeholder="" :disabled="!editable"
								v-if="editable"></el-input>
							<span v-else>{{form.defect5}}</span>
						</td>
						<td colspan="3"></td>
						<td colspan="4"></td>
					</tr>
					<tr>
						<td colspan="2">巡航内容</td>
						<td colspan="15" class="text-left">
							<div style="" class="voyageTab">
								<span>辖区巡航：</span>
							</div>
							<div>
								<span>第一航次（08:00 - 11:40）</span>
							</div>
							<div class="padding-sm voyage">
								<el-input v-model="form.theFirstVoyages" placeholder="" :disabled="!editable"
									v-if="editable" type="textarea" :rows="10" :maxlength="1024">
								</el-input>
								<pre class="text-left" v-else >
									<div v-html="form.theFirstVoyages"></div>
								</pre>
							</div>
							<div>
								<span>第二航次（14:10 - 16:00）</span>
							</div>
							<div class="padding-sm voyage">
								<el-input v-model="form.secondVoyages" placeholder="" :disabled="!editable"
									v-if="editable" type="textarea" :rows="10" :maxlength="1024">
								</el-input>
								<pre class="text-left" v-else> 
								<div  v-html="form.secondVoyages"></div>
								</pre>
							</div>
							<div>
								<span>第三航次（17:00 - 19:00）</span>
							</div>
							<div class="padding-sm voyage">
								<el-input v-model="form.thirdVoyages" placeholder="" :disabled="!editable"
									v-if="editable" type="textarea" :rows="10" :maxlength="1024">
								</el-input>
								<pre class="text-left" v-else >
									<div v-html="form.thirdVoyages"></div>
								</pre>
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="2">随艇执法人员：</td>
						<td colspan="15" class="text-left">
							<el-input v-model="form.lawEnforcementOfficials" placeholder="" :disabled="!editable"
								v-if="editable" :maxlength="256">
							</el-input>
							<!-- <span v-else>{{form.lawEnforcementOfficials}}</span> -->
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

</template>

<script setup name="table1">
	const {
		proxy
	} = getCurrentInstance();
	const props = defineProps({
		form: {
			type: Object,
			default: {}
		},
		editable: false,
		rules: {},
		logBookTime: "",

	});
	const {
		editable,
		rules,
		logBookTime
	} = toRefs(props)

	const form = computed({
		get() {
			return props.form
		},
		set(val) {
			console.log(val)
			proxy.$emit('update:form', val)
		}
	})


	const curAnalog = computed(
		() =>
		proxy.$store.state.data.analogList.find(
			(item) => item.sn == proxy.$store.state.data.curAnalogSn
		) || {}
	);

	const tableTitle = computed(() =>
		`${curAnalog.value.iboatName}巡航日志`
	)
</script>

<style>
</style>