<template>
	<div>
		<el-drawer v-model="open" 
			:title="`设备报警设置`" 
			:before-close="handleClose" 
			direction="rtl" 
			class="demo-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="formAlarmRefs" :rules="rules" :model="formAlarm">
				<el-table :data="formAlarm.tableData" border>
					<el-table-column label="序号" align="center" type="index" width="80" />
					<el-table-column label="设备名称" align="center" prop="deviceName">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.deviceName`" :rules="rules.deviceName" style="margin: 0;">
								<span v-if="scope.row.alarmSetId">{{scope.row.deviceName}}</span>
								<el-input v-else type="text" v-model="scope.row.deviceName" placeholder="输入设备名称"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="内容" align="center" prop="content">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.content`" :rules="rules.content" style="margin: 0;">
								<span v-if="scope.row.alarmSetId">{{scope.row.content}}</span>
								<el-input v-else type="text" v-model="scope.row.content" placeholder="输入内容"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="最小值" align="center" prop="minValue">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.minValue`" :rules="rules.minValue" style="margin: 0;">
								<span v-if="scope.row.alarmSetId">{{scope.row.minValue}}</span>
								<el-input v-else type="number" v-model="scope.row.minValue" placeholder="输入最小值"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="最大值" align="center" prop="maxValue">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.maxValue`" :rules="rules.maxValue" style="margin: 0;">
								<span v-if="scope.row.alarmSetId">{{scope.row.maxValue}}</span>
								<el-input v-else type="number" v-model="scope.row.maxValue" placeholder="输入最大值"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="报警值" align="center" prop="alarmValue">
						<template #default="scope">
							<el-form-item :prop="`tableData.${scope.$index}.alarmValue`" :rules="rules.alarmValue" style="margin: 0;">
								<span v-if="scope.row.alarmSetId">{{scope.row.alarmValue}}</span>
								<el-input v-else type="number" v-model="scope.row.alarmValue" placeholder="输入报警值"/>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column width="80" align="center">
						<template #default="scope">
							<div v-if="scope.row.alarmSetId">
								<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="alarmFormRef" :rules="rules" :model="alarmForm" label-width="100px">
				<el-form-item prop="deviceName" label="设备名称：">
					<el-input type="text" v-model="alarmForm.deviceName" placeholder="输入设备名称"/>
				</el-form-item>
				<el-form-item prop="content" label="内容：">
					<el-input type="text" v-model="alarmForm.content" placeholder="输入内容"/>
				</el-form-item>
				<el-form-item prop="minValue" label="最小值：">
					<el-input type="number" v-model="alarmForm.minValue" placeholder="输入最小值"/>
				</el-form-item>
				<el-form-item prop="maxValue" label="最大值：">
					<el-input type="number" v-model="alarmForm.maxValue" placeholder="输入最大值"/>
				</el-form-item>
				<el-form-item prop="alarmValue" label="报警值：">
					<el-input type="number" v-model="alarmForm.alarmValue" 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({
		formAlarm: {
			tableData: []
		},
		alarmForm: {},
		rules: {
			deviceName: [{
				required: true,
				message: "请输入设备名称",
				trigger: "blur"
			}],
			content: [{
				required: true,
				message: "请输入内容",
				trigger: "blur"
			}],
			maxValue: [{
				required: true,
				message: "请输入最大值",
				trigger: "blur"
			}],
			minValue: [{
				required: true,
				message: "请输入最小值",
				trigger: "blur"
			}],
			alarmValue: [{
				required: true,
				message: "请输入报警值",
				trigger: "blur"
			}]
		}
	})
	
	const { formAlarm, alarmForm, rules } = toRefs(data);
	// 显示弹框
	function show() {
		open.value = true;
		formAlarm.value.tableData = [{
			alarmSetId: 124,
			deviceName: "主机转速",
			content: "主机转速过高",
			maxValue: 3000,
			minValue: 0,
			alarmValue: 2500
		}]
	}
	// 关闭按钮
	function handleClose() {
		formAlarm.value = {
			tableData: []
		}
		open.value = false;
		// emit("close");
	}
	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["formAlarmRef"].validate(valid => {
			if (valid) {
				
			}
		})
	}
	// 新增一条数据
	function handleNew(){
		let _data = { 
			deviceName: "",
			content: "",
			maxValue: 0,
			minValue: 0,
			alarmValue: 0
		};
		formAlarm.value.tableData.push(_data);
	}
	// 移除一条新增的数据
	function handleDel(index){
		formAlarm.value.tableData.splice(index, 1);
	}
	// 表单重置
	function reset() {
	    alarmForm.value = {
			deviceName: null,
			content: null,
			maxValue: 0,
			minValue: 0,
			alarmValue: 0
	    };
	    proxy.resetForm("alarmFormRef");
	}
	// 编辑数据库里的数据
	function handleEdit(row) {
		reset();
	    // getMaintenanceApply(maintenanceApplyId).then(response => {
	        alarmForm.value = JSON.parse(JSON.stringify(row));
	        dialogVisible.value = true;
	    // });
	}
	// 删除数据库里的数据
	function handleDelete(_row){
		proxy.$modal.confirm('是否确认删除该报警设置数据"' + _row.deviceName + '"的数据项？').then(function () {
		    // return delMaintenanceApply(_row.regionalId);
		}).then(() => {
		    // getList();
		    proxy.$modal.msgSuccess("删除成功");
		}).catch(() => { });
	}
	defineExpose({
		show,
		handleClose,
	});
</script>

<style>
</style>