<template>
	<div>
		<div class="margin-bottom-xs flex justify-between">
			<el-button type="success" @click="handleNew">新增一行</el-button>
			<div>
				<el-button plain @click="handleClance">取 消</el-button>
				<el-button :disabled="!formRecord.tableData.length" type="primary" @click="submitForm">提 交</el-button>
			</div>
		</div>
		<el-form ref="formRecordRefs" :rules="rules" :model="formRecord">
			<el-table :data="formRecord.tableData" border>
				<el-table-column label="序号" align="center" type="index" width="80" />
				<el-table-column label="名称" align="center" prop="oilName">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.oilName`" :rules="rules.oilName" style="margin: 0;">
							<el-input type="text" v-model="scope.row.oilName" placeholder="输入名称"/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="经度" align="center" prop="longitude">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.longitude`" :rules="rules.longitude" style="margin: 0;">
							<el-input type="text" v-model="scope.row.longitude" placeholder="输入经度"/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="纬度" align="center" prop="latitude">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.latitude`" :rules="rules.latitude" style="margin: 0;">
							<el-input type="text" v-model="scope.row.latitude" placeholder="输入纬度"/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="开始时间" align="center" prop="startTime" width="220">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.startTime`" :rules="rules.startTime" style="margin: 0;">
							<el-date-picker
							  v-model="scope.row.startTime"
							  type="datetime"
							  placeholder="选择开始时间">
							</el-date-picker>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="结束时间" align="center" prop="endTime" width="220">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.endTime`" :rules="rules.endTime" style="margin: 0;">
							<el-date-picker
							  v-model="scope.row.endTime"
							  type="datetime"
							  placeholder="选择结束时间">
							</el-date-picker>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="加油量" align="center" prop="oilsVolume">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.oilsVolume`" :rules="rules.oilsVolume" style="margin: 0;">
							<el-input type="text" v-model="scope.row.oilsVolume" placeholder="输入加油量"/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="加油类型" align="center" prop="oilsType">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.oilsType`" :rules="rules.oilsType" style="margin: 0;">
							<el-select v-model="scope.row.oilsType" placeholder="选择加油类型">
							    <el-option
							      v-for="item in oilsTypeOptions"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="加油费用" align="center" prop="oilsMoney">
					<template #default="scope">
						<el-form-item :prop="`tableData.${scope.$index}.oilsMoney`" :rules="rules.oilsMoney" style="margin: 0;">
							<el-input type="text" v-model="scope.row.oilsMoney" placeholder="输入费用"/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="负责人" align="center" prop="person">
					<template #default="scope">
						<el-form-item :prop="`tableData.${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-column width="40">
					<template #default="scope">
						<elIcon @click="handleDel(scope.$index)"><Delete class="text-red pointer"/></elIcon>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
	</div>
</template>

<script setup>
import { watch } from 'vue';
	const emit = defineEmits(["handleClance"]);
	const disabled = ref(true);
	const props = defineProps({
		closes: {
			type: Boolean,
			default: false
		}
	});
	const { closes } = toRefs(props);
	const data = reactive({
		formRecord: {
			tableData: []
		},
		rules: {
			oilName: [{
				required: true,
				message: "请输入名称",
				trigger: "blur"
			}],
			longitude: [{
				required: true,
				message: "请输入经度",
				trigger: "blur"
			}],
			latitude: [{
				required: true,
				message: "请输入纬度",
				trigger: "blur"
			}],
			startTime: [{
				required: true,
				message: "请选择开始时间",
				trigger: "blur"
			}],
			endTime: [{
				required: true,
				message: "请选择结束时间",
				trigger: "blur"
			}],
			oilsVolume: [{
				required: true,
				message: "请输入加油量",
				trigger: "blur"
			}],
			oilsType: [{
				required: true,
				message: "请选择油类型",
				trigger: "blur"
			}],
			oilsMoney: [{
				required: true,
				message: "请输入费用",
				trigger: "blur"
			}],
			person: [{
				required: true,
				message: "请输入负责人",
				trigger: "blur"
			}]
		},
		oilsTypeOptions: [{
			value: 1,
			label: "轻柴油"
		},{
			value: 2,
			label: "重柴油"
		},{
			value: 3,
			label: "燃料油"
		},{
			value: 4,
			label: "渣油型燃料油"
		}]
	})
	
	const { formRecord, rules, oilsTypeOptions } = toRefs(data);
	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["formRecordRef"].validate(valid => {
			if (valid) {
				
			}
		})
	}
	function handleNew(){
		let _data = { 
			oilName: "",
			longitude: "",
			latitude: "",
			startTime: "",
			endTime: "",
			oilsVolume: "",
			oilsType: "",
			oilsMoney: "",
			person: ""
		};
		formRecord.value.tableData.push(_data);
	}
	function handleDel(index){
		formRecord.value.tableData.splice(index, 1);
	}
	function handleClance(){
		emit("handleClance");
	}
	watch(closes, (newValue) => {
		if(newValue){
			formRecord.value.tableData = [];
		}
	})
</script>

<style>
</style>