<template>
	<el-dialog class="api-edit" v-model="showDialog" title="绑定菜单" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="100px">
			<el-form-item label="上级菜单" prop="parentId">
				<el-cascader
					:options="[
						{
							id: -1,
							title: '主类目',
							children: menu,
						},
					]"
					:props="{ label: 'title', value: 'id', checkStrictly: true, emitPath: false }"
					placeholder="请选择上级菜单"
					:clearable="false"
					class="w100"
					v-model="formData.parentId"
				>
					<template #default="{ node, data }">
						<span>{{ data.title }}</span>
						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
					</template>
				</el-cascader>
			</el-form-item>
			<el-form-item label="菜单名称" prop="title">
				<el-input v-model="formData.title" placeholder="请输入菜单名称" clearable @input="formData.name = $event"></el-input>
			</el-form-item>
			<el-form-item label="菜单图标" prop="icon">
				<IconSelector placeholder="请输入菜单图标" v-model="formData.icon" type="all" />
			</el-form-item>
			<el-form-item label="菜单排序">
				<el-input-number v-model="formData.weigh" controls-position="right" placeholder="请输入排序" class="w100" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="showDialog = false">取消</el-button>
				<el-button type="primary" @click="onSubmit">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { ruleRequired } from '/@/utils/validator'
import { ElMessage } from 'element-plus'
import api from '/@/api/system'
import designerApi from '/@/api/modules/designer'
import IconSelector from '/@/components/iconSelector/index.vue'

const emit = defineEmits(['getList'])
const menu = ref([])

api.menu.getList({}).then((res: any) => {
	menu.value = res || []
})

const showDialog = ref(false)
const isEdit = ref(false)
const formRef = ref()

const baseForm = {
	designerId: undefined,
	id: undefined,
	parentId: null,
	menuType: 1,
	title: '',
	name: '',
	path: '',
	component: '',
	icon: undefined,
	weigh: null,
	isHide: 0,
	isLink: 0,
	linkUrl: null,
	isIframe: 0,
	isAffix: 0,
	status: 1,
}

const formData = reactive({
	...baseForm,
})

const ruleForm = {
	title: [ruleRequired('菜单名称不能为空')],
	parentId: [ruleRequired('上级菜单不能为空')],
}

const onSubmit = async () => {
	await formRef.value.validate()

	const theApi = formData.id ? api.menu.edit : api.menu.add

	const res = await theApi(formData)

	if (isEdit.value) {
		ElMessage.success('编辑成功')
		resetForm()
		showDialog.value = false
		return
	}

	await designerApi.publish({ id: formData.designerId, menuId: res.id, status: 1 })

	ElMessage.success('发布成功')
	resetForm()
	showDialog.value = false
	emit('getList')
}

const resetForm = async () => {
	Object.assign(formData, { ...baseForm })
	formRef.value && formRef.value.resetFields()
}

const open = async (row: any) => {
	resetForm()
	nextTick(() => {
		formData.designerId = row.id
		formData.id = row.menuId || undefined
		formData.component = '/designer/view'
		formData.path = '/designerPage/' + row.code
		if (!row.menuId) {
			formData.name = row.name
			formData.title = row.name
		} else {
			isEdit.value = true
			api.menu.detail(row.menuId).then((res: any) => {
				formData.parentId = res.parentId
				formData.name = res.name
				formData.title = res.title
				formData.isHide = res.isHide
				formData.icon = res.icon
				formData.weigh = res.weigh
			})
		}
		showDialog.value = true
	})
}

defineExpose({ open })
</script>
