<template>
	<el-dialog title="新增菜单" v-model="state.dialogVisible" width="769px" draggable destroy-on-close append-to-body @close="close">
		<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="90px" label-poistion="left">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="上级菜单" prop="parentId" :rules="[{ required: false, message: '请选择上级菜单', trigger: 'change' }]">
						<el-cascader
							:options="state.menuData"
							filterable
							:props="{ checkStrictly: true, value: 'id', label: 'title', emitPath: false }"
							placeholder="请选择上级菜单"
							clearable
							class="w100"
							v-model="state.ruleForm.parentId"
						>
						</el-cascader>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="菜单类型">
						<el-radio-group v-model="state.ruleForm.menuType">
							<el-radio :value="1">目录</el-radio>
							<el-radio :value="2">菜单</el-radio>
							<el-radio :value="3">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="菜单名称" prop="pageName" :rules="[{ required: false, message: '请填写菜单名称', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.pageName" placeholder="请填写菜单名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<template v-if="[1, 2].includes(state.ruleForm.menuType)">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item
							label="路由名称"
							prop="ruleName"
							:rules="[{ required: state.ruleForm.isKeepAlive, message: '请填写路由名称', trigger: 'blur' }]"
						>
							<el-input v-model="state.ruleForm.ruleName" placeholder="路由中的 name 值" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="路由路径" prop="path" :rules="[{ required: true, message: '请填写路由路径', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="重定向" prop="redirect" :rules="[{ required: false, message: '请填写重定向', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.redirect" placeholder="重定向" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="组件路径" prop="component" :rules="[{ required: false, message: '请填写组件路径', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.component" placeholder="组件路径" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="菜单图标" prop="icon" :rules="[{ required: false, message: '请填写菜单名称', trigger: 'blur' }]">
							<icon-selector placeholder="请填写菜单图标" v-model="state.ruleForm.icon" type="all" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item
							label="链接地址"
							prop="link"
							:rules="[{ required: state.ruleForm.isLink, message: '请填写外链/内嵌时链接地址', trigger: 'blur' }]"
						>
							<el-input v-model="state.ruleForm.link" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="!state.ruleForm.isLink">
							</el-input>
						</el-form-item>
					</el-col>
				</template>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="权限编码" prop="permissionCode" :rules="[{ required: true, message: '请填写权限编码', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.permissionCode" placeholder="权限编码" clearable> </el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="权限标志" prop="forePermissionCode" :rules="[{ required: false, message: '请填写权限标志', trigger: 'blur' }]">
						<el-input v-model="state.ruleForm.forePermissionCode" placeholder="权限标志" clearable> </el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="菜单排序">
						<el-input-number v-model="state.ruleForm.displayOrder" controls-position="right" placeholder="请填写排序" class="w100" />
					</el-form-item>
				</el-col>
				<template v-if="[1, 2].includes(state.ruleForm.menuType)">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="快捷入口">
							<template #label>
								<p class="flex-center-align">
									<el-tooltip content="首页常用入口可选" placement="top-start" trigger="hover">
										<SvgIcon name="ele-QuestionFilled" class="mr3"></SvgIcon>
									</el-tooltip>
									快捷入口
								</p>
							</template>
							<el-switch v-model="state.ruleForm.isFast" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
				</template>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="是否隐藏">
						<el-switch v-model="state.ruleForm.isHide" inline-prompt active-text="是" inactive-text="否" />
					</el-form-item>
				</el-col>
				<template v-if="[1, 2].includes(state.ruleForm.menuType)">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否缓存">
							<el-switch v-model="state.ruleForm.isKeepAlive" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否固定">
							<el-switch v-model="state.ruleForm.isAffix" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否外链">
							<el-switch
								v-model="state.ruleForm.isLink"
								:disabled="state.ruleForm.isLink && state.ruleForm.isIframe"
								inline-prompt
								active-text="是"
								inactive-text="否"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否内嵌">
							<el-switch v-model="state.ruleForm.isIframe" @change="onSelectIframeChange" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">确 定 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="systemMenuAdd">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { FormInstance } from 'element-plus';
import { addMenu } from '@/api/system/menu';

// 引入组件
const IconSelector = defineAsyncComponent(() => import('@/components/IconSelector/index.vue')); // 图标选择器

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
const props = defineProps<{
	menuData: {
		type: Array<any>;
		default: () => [];
	};
}>();
// 定义变量内容
const ruleFormRef = ref<FormInstance>();
const state = reactive<any>({
	dialogVisible: false,
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		parentId: '', // 上级菜单Id
		ruleName: '', // 路由名称
		component: '', // 组件路径
		isLink: false, // 是否外链
		displayOrder: 0, // 菜单排序
		path: '', // 路由路径
		pageName: '', // 菜单名称
		icon: '', // 菜单图标
		isHide: false, // 是否隐藏
		isKeepAlive: true, // 是否缓存
		isAffix: false, // 是否固定
		link: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
		isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
		permissionCode: '', //权限编码
		isFast: false, //是否是快捷入口
		fastIcon: '', //入口图片
		redirect: null, // 重定向地址
		menuType: 1, //菜单类型 1：目录 2：菜单 3：按钮
		forePermissionCode: '', //前端权限编码
	},
	menuData: [], // 上级菜单数据
	loading: false, // 加载状态
});

// 打开弹窗
const openDialog = () => {
	state.dialogVisible = true;
	state.menuData = props.menuData;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.clearValidate();
};
// 是否内嵌下拉改变
const onSelectIframeChange = () => {
	state.ruleForm.isLink = state.ruleForm.isIframe;
};
// 新增
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (!valid) return;
		state.loading = true;
		addMenu(state.ruleForm)
			.then(() => {
				emit('updateList');
				state.dialogVisible = false;
				ElMessage.success('新增成功');
				state.loading = false;
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
