<template>
	<el-main v-if="!mode">
		<el-scrollbar>
			<el-empty class="do" description="请选择左侧菜单/按钮后操作" :image-size="100"></el-empty>
			<el-empty class="media-do" description="请选择上侧菜单/按钮后操作" :image-size="100"></el-empty>
		</el-scrollbar>
	</el-main>

	<template v-else>
		<el-header class="aminui-main-container__query-header">
			<scTitle border>{{ titleMap[mode] }}</scTitle>
		</el-header>

		<el-main>
			<el-scrollbar ref="formScrollbar">
				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="108px">
					<el-form-item label="上级菜单:" prop="pid">
						<el-input v-model="pName" disabled placeholder="采购管理平台"></el-input>
					</el-form-item>
					<el-form-item label="类型:" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio-button label="目录" value="0"></el-radio-button>
							<el-radio-button label="菜单" value="1"></el-radio-button>
							<el-radio-button label="按钮" value="2"></el-radio-button>
						</el-radio-group>
					</el-form-item>

					<template v-if="form.type == 2">
						<el-form-item label="按钮名称:" prop="title">
							<el-input v-model="form.title" placeholder="按钮显示名字"></el-input>
						</el-form-item>
						<el-form-item label="权限标识:" prop="permission">
							<el-input v-model="form.permission" placeholder="按钮权限标识"></el-input>
						</el-form-item>
					</template>
					<template v-else>
						<el-form-item label="菜单标题:" prop="title">
							<el-input v-model="form.title" placeholder="菜单显示名字"></el-input>
						</el-form-item>
						<el-form-item label="菜单图标:" prop="icon">
							<sc-icon-select v-model="form.icon" clearable></sc-icon-select>
						</el-form-item>
						<el-form-item label="菜单可见:" prop="hidden">
							<el-radio-group v-model="form.hidden">
								<el-radio-button label="是" :value="false"></el-radio-button>
								<el-radio-button label="否" :value="true"></el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="外链菜单:" prop="iframe">
							<el-radio-group v-model="form.iframe">
								<el-radio-button label="是" :value="true"></el-radio-button>
								<el-radio-button label="否" :value="false"></el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="路由地址:" prop="path">
							<el-input v-model="form.path" placeholder="路由地址"></el-input>
						</el-form-item>
					</template>
					<el-form-item label="菜单排序:" prop="menuSort">
						<el-input-number v-model="form.menuSort" :min="0" :max="999" step-strictly controls-position="right" placeholder="0"></el-input-number>
					</el-form-item>

					<template v-if="form.type == 1 && !form.iframe">
						<el-form-item label="组件名称:" prop="componentName">
							<el-input v-model="form.componentName" placeholder="匹配组件内Name字段"></el-input>
						</el-form-item>
						<el-form-item label="组件路径:" prop="component">
							<el-input v-model="form.component" placeholder="组件路径">
								<template #prepend>views/</template>
							</el-input>
						</el-form-item>
					</template>
					
					<el-form-item>
						<el-button :loading="isSaveing" type="primary" @click="save">保 存</el-button>
					</el-form-item>
				</el-form>
			</el-scrollbar>
		</el-main>
	</template>
</template>

<script>
	import scIconSelect from "@/components/scIconSelect";
	import config from "@/config/iconSelect";
	import { menuData } from "./main";

	export default {
		emits: ["success"],

		components: {
			scIconSelect
		},
		
		data(){
			return {
				mode: "",
				titleMap: {
					add: "新增菜单",
					edit: "编辑菜单"
				},

				form: menuData,
				pName: null,
				rules: {
					title: [{ required: true, message: "请输入显示名字" }],
					path: [{ required: true, message: "请输入路由地址" }],
					permission: [{ required: true, message: "请输入权限标识" }],
					componentName: [{ message: "请输入组件名称" }],
					component: [{ required: true, message: "请输入组件路径" }],
					menuSort: [{ required: true, message: "请输入菜单排序" }]
				},
				isSaveing: false
			}
		},
		
		methods: {
			// 显示
			open(mode = "add") {
				this.mode = mode;
				if (this.$refs.dialogForm && mode == "add") this.$refs.dialogForm.resetFields();
				return this;
			},

			// 表单注入数据
			setData(data, name) {
				this.form = Object.assign({}, menuData, data);
				this.pName = name;
				if (data.icon) this.form.icon = config.selectIcon(data.icon);
			},

			// 保存
			save() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
						const icon = this.form.icon ? this.form.icon.split("el-icon-").join("").split("sc-icon-").join("") : null;
						const query = Object.assign({}, this.form, { icon });

						this.isSaveing = true;
						this.$API.system.menu[this.mode](query).then(res => {
							this.isSaveing = false;
							this.$message.success("操作成功");
							this.visible = false;
							this.$emit("success", res);
						}).catch(() => this.isSaveing = false);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.media-do {
  display: none;
}

.aminui-main-container__query-header {
  margin-bottom: 0;

  .sc-title {
    flex-basis: 100%;
  }
}

.el-main {
  padding-right: 40px;
  background: #fff;

  .el-form {
    max-width: 420px;
  }
}

@media (max-width: 992px) {
  .media-do {
    display: flex;
  }

  .do {
    display: none;
  }

  .el-main {
    padding-right: 15px;

    .el-form {
      max-width: unset;
    }
  }
}
</style>