<template>
	<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
		<div class="text-center text-bold margin-bottom">提高能效的船舶管理计划</div>
		<el-row :gutter="50">
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<div style="position: relative;padding-left: 30px;">
					<div class="sTitleSty" style="letter-spacing:0;">审核和更新日志</div>
					<el-form ref="eupLogRefs" :rules="rules" :model="increaseForm">
						<el-table :data="increaseForm.eupLogData" stripe style="width: 100%" 
							height="calc(75vh - 156px)"
							@cell-dblclick="changeEdit"
							:highlight-current-row="true"
							:cell-style="{ fontSize: '0.75rem' }"
							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
							<el-table-column prop="timeLine" label="日期/时间线">
								<template #default="scope">
									<el-form-item v-if="eupLogEdit[scope.row.id]" :prop="`eupLogData.${scope.$index}.timeLine`" :rules="rules.timeLine" style="margin: 0;">
										<el-date-picker
										  v-model="scope.row.timeLine"
										  type="date"
										  placeholder="日期/时间线">
										</el-date-picker>
									</el-form-item>
									<span v-else>{{scope.row.timeLine}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="upSection" label="更新部分">
								<template #default="scope">
									<el-form-item v-if="eupLogEdit[scope.row.id]" :prop="`eupLogData.${scope.$index}.upSection`" :rules="rules.upSection" style="margin: 0;">
										<el-input type="text" v-model="scope.row.upSection" placeholder="输入加油量"/>
									</el-form-item>
									<span v-else>{{scope.row.upSection}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="eCreator" label="编制者">
								<template #default="scope">
									<el-form-item v-if="eupLogEdit[scope.row.id]" :prop="`eupLogData.${scope.$index}.eCreator`" :rules="rules.eCreator" style="margin: 0;">
										<el-input type="text" v-model="scope.row.eCreator" placeholder="输入加油量"/>
									</el-form-item>
									<span v-else>{{scope.row.eCreator}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="ePerformer" label="执行者">
								<template #default="scope">
									<el-form-item v-if="eupLogEdit[scope.row.id]" :prop="`eupLogData.${scope.$index}.ePerformer`" :rules="rules.ePerformer" style="margin: 0;">
										<el-input type="text" v-model="scope.row.ePerformer" placeholder="输入加油量"/>
									</el-form-item>
									<span v-else>{{scope.row.ePerformer}}</span>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
				</div>
			</el-col>
			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
				<div style="position: relative;padding-left: 30px;">
					<div class="sTitleSty" style="letter-spacing:0;">措施</div>
					<el-form ref="measuresRefs" :rules="rules" :model="increaseForm">
						<el-table :data="increaseForm.measuresData" stripe style="width: 100%" 
							height="calc(75vh - 156px)"
							:highlight-current-row="true"
							:cell-style="{ fontSize: '0.75rem' }"
							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
							<el-table-column prop="date" label="能效措施">
								<template #default="scope">
									<el-form-item :prop="`measuresData.${scope.$index}.energyMeasures`" :rules="rules.energyMeasures" style="margin: 0;">
										<el-input type="text" v-model="scope.row.energyMeasures" placeholder="能效措施"/>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="执行(包括开始日期)">
								<template #default="scope">
									<el-form-item :prop="`measuresData.${scope.$index}.executionDate`" :rules="rules.executionDate" style="margin: 0;">
										<el-date-picker
										  v-model="scope.row.executionDate"
										  type="date"
										  placeholder="选择时间">
										</el-date-picker>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="负责人员">
								<template #default="scope">
									<el-form-item :prop="`measuresData.${scope.$index}.person`" :rules="rules.person" style="margin: 0;">
										<el-input type="text" v-model="scope.row.person" 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" style="padding-right: 40px;">
				<el-form ref="increaseFormRef" :model="increaseForm" label-width="70px">
					<div class="grid col-2">
						<el-form-item label="编制日期" style="margin-bottom: 8px;">
							<el-date-picker
							  v-model="increaseForm.compilationDate"
							  type="date"
							  size="small"
							  placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="编制者" style="margin-bottom: 8px;">
							<el-select v-model="increaseForm.creator" placeholder="请选择"
							  size="small">
								<el-option
								  v-for="item in compilationOptions"
								  :key="item.value"
								  :label="item.label"
								  :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="执行时间" style="margin-bottom: 8px;">
							<el-date-picker
							  v-model="increaseForm.executionTime"
							  type="daterange"
							  range-separator="~"
							  size="small"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="执行者" style="margin-bottom: 8px;">
							<el-select v-model="increaseForm.performer" placeholder="请选择"
							  size="small">
								<el-option
								  v-for="item in executionOptions"
								  :key="item.value"
								  :label="item.label"
								  :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="flex">
						<el-form-item label="计划的下次评估日期" label-width="140px" class="flex-twice" style="margin-bottom: 8px;">
							<el-date-picker
							  v-model="increaseForm.evaluationDate"
							  type="date"
							  size="small"
							  placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-button type="primary" size="small">保存</el-button>
					</div>
				</el-form>
				<div style="position: relative;padding-left: 30px;">
					<div class="sTitleSty" style="letter-spacing:0;">目标</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="可测量的目标"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 100px);"
					  v-model="increaseForm.target">
					</el-input>
				</div>
				<div style="position: relative;padding-left: 30px;" class="margin-tb">
					<div class="sTitleSty" style="letter-spacing:0;">监测</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="监测工具的描述"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 100px);"
					  v-model="increaseForm.monitor">
					</el-input>
				</div>
				<div style="position: relative;padding-left: 30px;">
					<div class="sTitleSty" style="letter-spacing:0;">评估</div>
					<el-input
					  type="textarea"
					  resize="none"
					  placeholder="评估程序"
					  class="margin-top-xs areaInput"
					  style="height: calc(23.33vh - 100px);"
					  v-model="increaseForm.assessment">
					</el-input>
				</div>
			</el-col>
		</el-row>
	</el-card>
			
</template>

<script setup>
	import { reactive } from "vue";
	const distanceArea = ref("");
	const compilationOptions = ref([]);
	const executionOptions = ref([]);
	const eupLogEdit = ref({});
	const data = reactive({
		rules: {
			person: [{
				required: true,
				message: "请输入负责人",
				trigger: "blur"
			}],
			energyMeasures: [{
				required: true,
				message: "请输入能效措施",
				trigger: "blur"
			}],
			executionDate: [{
				required: true,
				message: "请选择执行日期",
				trigger: "blur"
			}],
			ePerformer: [{
				required: true,
				message: "请输入执行者",
				trigger: "blur"
			}],
			eCreator: [{
				required: true,
				message: "请输入编制者",
				trigger: "blur"
			}],
			upSection: [{
				required: true,
				message: "请输入更新部分",
				trigger: "blur"
			}],
			timeLine: [{
				required: true,
				message: "请选择时间",
				trigger: "blur"
			}],
		},
		increaseForm: {
			eupLogData: [{
				id: 121,
				timeLine: '2016-05-02',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 122,
				timeLine: '2016-05-04',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 123,
				timeLine: '2016-05-01',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 124,
				timeLine: '2016-05-03',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 125,
				timeLine: '2016-05-02',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 126,
				timeLine: '2016-05-04',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 127,
				timeLine: '2016-05-01',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			},{
				id: 181,
				timeLine: '2016-05-03',
				upSection: "更新了哈哈哈",
				eCreator: '王小虎',
				ePerformer: '温大壮'
			}],
			measuresData: [{
				id: 195,
				executionDate: '2016-05-02',
				person: '王小虎',
				energyMeasures: '上海市'
			},{
				id: 196,
				executionDate: '2016-05-04',
				person: '王小虎',
				energyMeasures: '普陀区'
			},{
				id: 198,
				executionDate: '2016-05-01',
				person: '王小虎',
				energyMeasures: '金沙江路'
			},{
				id: 221,
				executionDate: '2016-05-03',
				person: '王小虎',
				energyMeasures: '1516弄'
			},{
				id: 226,
				executionDate: '2016-05-02',
				person: '王小虎',
				energyMeasures: '上海市'
			},{
				id: 274,
				executionDate: '2016-05-04',
				person: '王小虎',
				energyMeasures: '普陀区'
			},{
				id: 279,
				executionDate: '2016-05-01',
				person: '王小虎',
				energyMeasures: '金沙江路'
			},{
				id: 244,
				executionDate: '2016-05-03',
				person: '王小虎',
				energyMeasures: '1516弄'
			}],
		}
	});
	const { increaseForm, rules } = toRefs(data);
	const changeEdit = function(row, column, event){
		console.log(row, column, event)
		// eupLogEdit.value[row.id] = true;
	}
	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>