<template>
	<el-row :gutter="40">
		<el-col v-if="form.parentId===''">
			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="20">
				<h2>{{ form.title || "新增菜单" }}</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="显示名称" prop="title">
						<el-input v-model="form.title" clearable placeholder="菜单显示名字" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parent_id">
						<el-cascader ref="parentId" v-model="form.parent_id" :options="menuOptions" :props="menuProps"
									 :show-all-levels="false" placeholder="顶级菜单" clearable style="width: 300px;"></el-cascader>
					</el-form-item>
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio-button :value="0">菜单</el-radio-button>
							<el-radio-button :value="1">按钮</el-radio-button>
							<el-radio-button :value="2">接口</el-radio-button>
							<el-radio-button :value="3">外链</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="form.type == 0 || form.type == 3" label="菜单图标" prop="icon">
						<pi-icon-select v-model="form.icon" style="width: 300px;"></pi-icon-select>
					</el-form-item>
					<el-form-item v-if="form.type == 0" label="页面名称" prop="name">
						<el-input v-model="form.name" clearable style="width: 300px;"></el-input>
						<div class="el-form-item-msg">
							系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏
						</div>
					</el-form-item>
					<el-form-item v-if="form.type == 0" label="路由地址" prop="path">
						<el-input v-model="form.path" clearable style="width: 300px;"></el-input>
						<div class="el-form-item-msg">首位不需要填写 "/"， 自动匹配页面路径</div>
					</el-form-item>
					<el-form-item v-if="form.type == 0" label="是否隐藏" prop="hidden">
						<el-checkbox v-model="form.hidden" :true-value="1" :false-value="0">隐藏菜单</el-checkbox>
					</el-form-item>
					<el-form-item v-if="form.type == 3" label="外部链接" prop="path">
						<el-input v-model="form.path" clearable style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item v-if="form.type == 0 || form.type == 3" label="页面顺序" prop="rank">
						<el-input v-model="form.rank" clearable style="width: 300px;"></el-input>
						<div class="el-form-item-msg">数值越大越靠前</div>
					</el-form-item>
					<el-form-item v-if="form.type == 2" label="请求方式" prop="method">
						<el-select v-model="form.method" style="width: 300px;">
							<el-option
								v-for="item in methodOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item v-if="form.type == 1 || form.type == 2" label="权限标识" prop="flag">
						<el-input v-model="form.flag" clearable style="width: 300px;"></el-input>
						<div class="el-form-item-msg">权限分隔符":"分割</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</template>
	</el-row>

</template>

<script setup>
import piIconSelect from '@/components/piIconSelect'
import {ref, watch, getCurrentInstance} from "vue";
import api from "@/api/index";

defineExpose({
	setData
})

const props = defineProps({
	menu: {
		type: Object, default: () => {
		}
	},
})

const {proxy} = getCurrentInstance()

let form = ref({
	menu_id: "",
	parent_id: "",
	belong: 0,
	name: "",
	path: "",
	title: "",
	icon: "",
	type: 0,
	flag: "",
	hidden: "",
	method: "",
	rank: 1
})

let menuOptions = ref([])
let menuProps = ref({
	value: 'menu_id',
	label: 'title',
	checkStrictly: true
})

let rules = ref([])
let loading = ref(false)
let methodOptions = ref([
	{
		label: "get",
		value: "get"
	},
	{
		label: "post",
		value: "post"
	},
	{
		label: "put",
		value: "put"
	},
	{
		label: "delete",
		value: "delete"
	}
])

watch(() => props.menu, () => {
	menuOptions.value = treeToMap(props.menu)
}, {deep: true})

function treeToMap(tree) {
	const map = []
	tree.forEach(item => {
		var obj = {
			menu_id: item.menu_id,
			parent_id: item.parent_id,
			title: item.title,
			children: item.children && item.children.length > 0 ? treeToMap(item.children) : null
		}
		map.push(obj)
	})
	return map
}

async function save() {
	loading.value = true
	if (Array.isArray(form.value.parent_id)) {
		form.value.parent_id = form.value.parent_id[form.value.parent_id.length - 1] ?? 0
	}
	const res = form.value.menu_id == "" ? await api.system.menu.add(form.value) :
		await api.system.menu.edit(form.value);
	loading.value = false

	proxy.$message.success(res.msg)
	if (form.value.menu_id == "") {
		form.value.menu_id = res.data.menu_id
	}
}

function setData(data) {
	form.value = data
}

</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
	color: #fff;
}
</style>
