<template>
	<div>
		<el-drawer v-model="open" 
			:title="`添加ECA区域数据`" 
			:before-close="handleClose" 
			direction="rtl" 
			class="demo-drawer"
			modal-class="el-subscribe-drawer" 
			size="50%">
			<div class="margin-bottom-xs flex justify-between">
				<el-button type="success" @click="handleNew">新增一行</el-button>
				<div>
					<el-button plain @click="handleClose">取 消</el-button>
					<el-button :disabled="disabled" type="primary" @click="submitForm">提 交</el-button>
				</div>
			</div>
			<el-form ref="formRegionalRefs" :rules="rules" :model="formRegional">
				<el-table :data="formRegional.tableData" border>
					<el-table-column label="序号" align="center" type="index" width="80" />
					<el-table-column label="名称" align="center" prop="regionalName">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.regionalName`" :rules="rules.regionalName" style="margin: 0;">
								<span v-if="scope.row.regionalId">{{scope.row.regionalName}}</span>
								<el-input v-else type="text" v-model="scope.row.regionalName" 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;">
								<span v-if="scope.row.regionalId">{{scope.row.longitude}}</span>
								<el-input v-else 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;">
								<span v-if="scope.row.regionalId">{{scope.row.latitude}}</span>
								<el-input v-else type="text" v-model="scope.row.latitude" placeholder="输入纬度"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column align="center">
						<template #default="scope">
							<div v-if="scope.row.regionalId">
								<elIcon class="margin-right-sm" @click="handleEdit(scope.row)"><Edit class="text-green pointer"/></elIcon>
								<elIcon @click="handleDelete(scope.row)"><Delete class="text-red pointer"/></elIcon>
							</div>
							<elIcon v-else @click="handleDel(scope.$index)"><Remove class="text-red pointer"/></elIcon>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
		</el-drawer>
		<el-dialog
		  title="修改区域数据"
		  v-model="dialogVisible"
		  width="30%">
			<el-form ref="regionalFormRef" :rules="rules" :model="regionalForm" label-width="100px">
				<el-form-item prop="regionalName" label="名称：">
					<el-input type="text" v-model="regionalForm.regionalName" placeholder="输入名称"/>
				</el-form-item>
				<el-form-item prop="longitude" label="经度：">
					<el-input type="text" v-model="regionalForm.longitude" placeholder="输入经度"/>
				</el-form-item>
				<el-form-item prop="latitude" label="纬度：">
					<el-input type="text" v-model="regionalForm.latitude" placeholder="输入纬度"/>
				</el-form-item>
				<el-form-item label="">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
	const { proxy } = getCurrentInstance();
	const open = ref(false);
	const dialogVisible = ref(false);
	const disabled = ref(true);
	const data = reactive({
		formRegional: {
			tableData: []
		},
		regionalForm: {},
		rules: {
			regionalName: [{
				required: true,
				message: "请输入名称",
				trigger: "blur"
			}],
			longitude: [{
				required: true,
				message: "请输入经度",
				trigger: "blur"
			}],
			latitude: [{
				required: true,
				message: "请输入纬度",
				trigger: "blur"
			}]
		}
	})
	
	const { formRegional, regionalForm, rules } = toRefs(data);
	// 显示弹框
	function show() {
		open.value = true;
		formRegional.value.tableData = [{
			regionalId: 126,
			regionalName: "加油记录-1",
			longitude: "113.23656",
			latitude: "23.64589"
		}];
	}
	// 关闭按钮
	function handleClose() {
		formRegional.value = {
			tableData: []
		}
		open.value = false;
		// emit("close");
	}
	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["formRegionalRef"].validate(valid => {
			if (valid) {
				
			}
		})
	}
	// 新增一条数据
	function handleNew(){
		let _data = { 
			regionalName: "",
			longitude: 0,
			latitude: 0
		};
		formRegional.value.tableData.push(_data);
	}
	// 移除一条新增的数据
	function handleDel(index){
		formRegional.value.tableData.splice(index, 1);
	}
	// 表单重置
	function reset() {
	    regionalForm.value = {
			regionalName: null,
			longitude: null,
			latitude: null
	    };
	    proxy.resetForm("regionalFormRef");
	}
	// 编辑数据库里的数据
	function handleEdit(row) {
		reset();
	    // getMaintenanceApply(maintenanceApplyId).then(response => {
	        regionalForm.value = JSON.parse(JSON.stringify(row));
	        dialogVisible.value = true;
	    // });
	}
	// 删除数据库里的数据
	function handleDelete(_row){
		proxy.$modal.confirm('是否确认删除该ECA区域数据"' + _row.regionalName + '"的数据项？').then(function () {
		    // return delMaintenanceApply(_row.regionalId);
		}).then(() => {
		    // getList();
		    proxy.$modal.msgSuccess("删除成功");
		}).catch(() => { });
	}
	defineExpose({
		show,
		handleClose,
	});
</script>

<style>
</style>