<!--
@ 作者: 秦东
@ 时间: 2024-04-25 13:30:19
@ 备注: 修改自定义应用菜单
-->
<script lang='ts' setup>
import { appMenuTreeInfo } from "@/api/date/type" 
import { editAppMenuLable } from '@/api/DesignForm/requestapi'
const props = defineProps({
	isShow:{
		type: Boolean,
		default: false,
	},
	menuCont:{
		type:Object,
		default(){
			return {}
		}
	},
});
const saveMenuName = ref(ElForm);
const loading = ref(false)
const emits = defineEmits(["update:isShow","updateMenu"]);
const appMenuInfo = ref<appMenuTreeInfo>({})
//监听页面是否打开
watch(()=>props.isShow,(val:boolean)=>{
	if(val){
		appMenuInfo.value = props.menuCont
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-04-25 13:39:46
@ 功能: 关闭页面
*/
const handleClose = () => {
	loading.value = false;
	emits("updateMenu")
	emits("update:isShow",false)
	resetForm()
}
/**
@ 作者: 秦东
@ 时间: 2024-04-24 09:33:56
@ 功能: 重置表单
*/
const resetForm = () => {
	saveMenuName.value.resetFields();
	saveMenuName.value.clearValidate();
	appMenuInfo.label = "";
}
/**
@ 作者: 秦东
@ 时间: 2024-04-24 09:29:59
@ 功能: 表单验证规则
*/
const rules = reactive({
	label: [{ required: true, message: "请输入名称", trigger: "blur" }],
});
/**
@ 作者: 秦东
@ 时间: 2024-04-25 13:44:42
@ 功能: 提交数据
*/
const saveMenuData = () => {
	loading.value = true;
	saveMenuName.value.validate((valid: any) => {
		if (valid) {
			editAppMenuLable({id:appMenuInfo.value.id, label:appMenuInfo.value.label})
				.then((data) =>{
					console.log("提交数据", data)
					emits("updateMenu")
					ElMessage({
						message: data.msg,
						type: 'success',
					});
					handleClose();
				})
		}else{
			loading.value = false;
		}
	})
}
</script>
<template>
	<el-dialog
		v-model="props.isShow"
		title="编辑名称"
		width="500"
		:before-close="handleClose"
	>
		<el-form
			ref="saveMenuName"
			:model="appMenuInfo"
			:rules="rules"
			label-width="120px"
		>
			<el-form-item label="名称" prop="label">
				<el-input v-model="appMenuInfo.label" clearable placeholder="请输入名称" />
			</el-form-item>
			
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="handleClose">取消</el-button>
				<el-button type="primary" v-loading="loading" :disabled="loading" @click="saveMenuData">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>
