<template>
	<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
		<div class="text-center text-bold margin-bottom-xs">船舶燃油消耗数据收集计划</div>
		<el-row :gutter="24">
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<div style="position: relative;padding-left: 40px;">
					<div class="sTitleSty" style="letter-spacing:0;">审核和更新日志</div>
					<el-form ref="upLogFormRefs" :rules="rules" :model="upLogForm">
						<el-table :data="upLogForm.upLogData" stripe style="width: 100%" 
							height="calc(37vh - 65px)"
							:highlight-current-row="true"
							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
							<el-table-column prop="date" label="日期/时间线">
								<template #default="scope">
									<el-form-item :prop="`upLogData.${scope.$index}.date`" :rules="rules.date" style="margin: 0;">
										<el-date-picker
										  v-model="scope.row.date"
										  type="date"
										  placeholder="日期/时间线">
										</el-date-picker>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="updateSection" label="更新部分">
								<template #default="scope">
									<el-form-item :prop="`upLogData.${scope.$index}.updateSection`" :rules="rules.updateSection" style="margin: 0;">
										<el-input type="text" v-model="scope.row.updateSection" placeholder="更新部分"/>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="creator" label="编制者">
								<template #default="scope">
									<el-form-item :prop="`upLogData.${scope.$index}.creator`" :rules="rules.creator" style="margin: 0;">
										<el-input type="text" v-model="scope.row.creator" placeholder="编制者"/>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="performer" label="执行者">
								<template #default="scope">
									<el-form-item :prop="`upLogData.${scope.$index}.performer`" :rules="rules.performer" style="margin: 0;">
										<el-input type="text" v-model="scope.row.performer" placeholder="执行者"/>
									</el-form-item>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
				</div>
				<div style="position: relative;padding-left: 40px;margin-top:40px;">
					<div class="sTitleSty" style="letter-spacing:0;">设备燃油类型</div>
					<el-form ref="equiFuelRefs" :rules="rules" :model="upLogForm">
						<el-table :data="upLogForm.equiFuelData" stripe 
							style="width: 100%" 
							:highlight-current-row="true"
							height="calc(32vh - 65px)"
							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
							<el-table-column prop="equipmentName" label="设备">
								<template #default="scope">
									<el-form-item :prop="`equiFuelData.${scope.$index}.equipmentName`" :rules="rules.equipmentName" style="margin: 0;">
										<el-input type="text" v-model="scope.row.equipmentName" placeholder="设备"/>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="power" label="功率">
								<template #default="scope">
									<el-form-item :prop="`equiFuelData.${scope.$index}.power`" :rules="rules.power" style="margin: 0;">
										<el-input type="text" v-model="scope.row.power" placeholder="功率"/>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="oilType" label="燃油类型">
								<template #default="scope">
									<el-select v-model="scope.row.oilType" size="small" placeholder="选择加油类型">
										<el-option
										  v-for="item in oilsTypeOptions"
										  :key="item.value"
										  :label="item.label"
										  :value="item.value">
										</el-option>
									</el-select>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
				</div>
			</el-col>
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<div>
					<div class="text-bold text-sm">测量燃油消耗量的方法</div>
					<el-input
					  placeholder="方法"
					  class="margin-bottom-sm margin-top-xs"
					  v-model="upLogForm.fuelConsMethod">
					</el-input>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="描述"
					  class="areaInput"
					  style="height: calc(23.33vh - 110px);"
					  v-model="upLogForm.fuelConsRemark">
					</el-input>
				</div>
				<div class="margin-tb">
					<div class="text-bold text-sm">测量航行距离的方法</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="方法"
					  class="margin-top-xs areaInput"
					  style="height: calc(20vh - 80px);"
					  v-model="upLogForm.sailDistaMethod">
					</el-input>
				</div>
				<div>
					<div class="text-bold text-sm margin-bottom-xs">燃油消耗数据收集计划修改记录</div>
					<el-form ref="modifyRecordRefs" :rules="rules" :model="upLogForm">
						<el-table :data="upLogForm.modifyRecordsData" stripe 
							style="width: 100%" 
							:highlight-current-row="true"
							height="calc(26.66vh - 56px)"
							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
							<el-table-column prop="date" label="修改日期">
								<template #default="scope">
									<el-form-item :prop="`modifyRecordsData.${scope.$index}.modificDate`" :rules="rules.modificDate" style="margin: 0;">
										<el-date-picker
										  v-model="scope.row.modificDate"
										  type="date"
										  placeholder="修改日期">
										</el-date-picker>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="修改条款">
								<template #default="scope">
									<el-form-item :prop="`modifyRecordsData.${scope.$index}.modificTxt`" :rules="rules.modificTxt" style="margin: 0;">
										<el-input type="text" v-model="scope.row.modificTxt" placeholder="修改条款"/>
									</el-form-item>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
				</div>
			</el-col>
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<div>
					<div class="text-bold text-sm">测量航行小时数的方法</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="方法"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 90px);"
					  v-model="upLogForm.sailHourMethod">
					</el-input>
				</div>
				<div class="margin-tb-xl">
					<div class="text-bold text-sm">用于向主管机关报告数据的程序</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="评估程序"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 90px);"
					  v-model="upLogForm.evaluaProcedure">
					</el-input>
				</div>
				<div>
					<div class="text-bold text-sm">数据质量</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="数据质量"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 90px);"
					  v-model="upLogForm.dataQuality">
					</el-input>
				</div>
				<div class="margin-top">
					<el-button type="primary" size="small">保存</el-button>
					<el-button type="success" size="small">导出</el-button>
				</div>
			</el-col>
		</el-row>
	</el-card>
</template>

<script setup>
	import { reactive } from "vue";
	const distanceArea = ref("");
	const oilsTypeOptions = ref([]);
	const data = reactive({
		rules: {
			performer: [{
				required: true,
				message: "请输入执行者",
				trigger: "blur"
			}],
			creator: [{
				required: true,
				message: "请输入编制者",
				trigger: "blur"
			}],
			updateSection: [{
				required: true,
				message: "请输入更新部分",
				trigger: "blur"
			}],
			date: [{
				required: true,
				message: "请选择时间",
				trigger: "blur"
			}],
			equipmentName: [{
				required: true,
				message: "请输入设备名称",
				trigger: "blur"
			}],
			power: [{
				required: true,
				message: "请输入功率",
				trigger: "blur"
			}],
			oilType: [{
				required: true,
				message: "请选择燃油类型",
				trigger: "blur"
			}],
			modificDate: [{
				required: true,
				message: "请选择时间",
				trigger: "blur"
			}],
			modificTxt: [{
				required: true,
				message: "请输入修改条款",
				trigger: "blur"
			}]
		},
		upLogForm: {
			fuelConsMethod: "",
			fuelConsRemark: "",
			sailDistaMethod: "",
			sailHourMethod: "",
			evaluaProcedure: "",
			dataQuality: "",
			equiFuelData: [{
				equipmentName: "主机",
				power: "123.5",
				oilType: 1
			},{
				equipmentName: "辅机",
				power: "3123.5",
				oilType: 2
			},{
				equipmentName: "锅炉",
				power: "123.5",
				oilType: 1
			},{
				equipmentName: "主机",
				power: "123.5",
				oilType: 1
			},{
				equipmentName: "辅机",
				power: "123.5",
				oilType: 1
			},{
				equipmentName: "锅炉",
				power: "123.5",
				oilType: 1
			}],
			modifyRecordsData: [{
				modificDate: "2016-05-02",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-03",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-04",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-05",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-06",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-07",
				modificTxt: "修改了哈哈哈"
			},{
				modificDate: "2016-05-08",
				modificTxt: "修改了哈哈哈"
			}],
			upLogData: [{
				date: '2016-05-02',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-04',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-01',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-03',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-02',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-04',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-01',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			},{
				date: '2016-05-03',
				updateSection: "更新了哈哈哈",
				creator: '王小虎',
				performer: '温大壮'
			}],
		}
	});
	const { upLogForm, rules } = toRefs(data);
	const handleRowClick = function(row, event, column) {
		clickedRowIndex.value = alarmLogData.value.indexOf(row);
	};
	const rowClassName = function({rowIndex}) {
		if (clickedRowIndex.value === rowIndex) {
	        return 'highlight-row';
		}
	}
</script>

<style scoped lang="scss">
	
	
</style>