<template>
    <el-drawer v-model="props.show" :title="title" @close="handleClose" @open="radioChange(radio)">
        <el-card>
            <el-form ref="form" :model="formData" :rules="rules" size="large" label-position="right" label-width="80px">
                <el-radio-group v-model="radio" @change="radioChange">
                    <el-radio :label="0">一级菜单</el-radio>
                    <el-radio :label="1">子菜单</el-radio>
                    <!-- <el-radio :label="2">按钮/权限</el-radio> -->
                </el-radio-group>
                <el-form-item v-for="i in formItem" :prop="i.prop" :label="i.label">
                    <el-input v-if="i.type == 'input'" v-model="formData[i.prop]"></el-input>
                    <el-tree-select ref="tree" v-if="i.type == 'selectTree'" v-model="formData[i.prop]" :data="menus"
                        show-checkbox :check-strictly="true" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="emit('close-drawer')">关闭</el-button>
                    <el-button type="primary" @click="handleSubmit(title)">{{ title }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormRules, FormInstance } from 'element-plus'
import { addMenu, editMenu, queryTreeList } from '@/services/api/menu/menuAPI'
const props = defineProps({
    show: {
        type: Boolean,
    },
    title: {
        type: String
    }
})
const emit = defineEmits(['close-drawer', 'init'])
let formData = reactive<any>({})
const rules = reactive<FormRules>({
    title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
    path: [{ required: true, message: '请输入菜单路径', trigger: 'blur' }],
    component: [{ required: true, message: '请输入组件', trigger: 'blur' }],
})
const radio = ref(0)
const formItem = ref()
const tree = ref()
let menus = ref([])
const radioChange = (value: number | string | boolean) => {
    if (value == 0) {
        formItem.value = [{ type: 'input', label: '菜单名称', prop: 'title' }, { type: 'input', label: '菜单路径', prop: 'path' }, { type: 'input', label: '前端组件', prop: 'component' }, { type: 'input', label: '菜单图标', prop: 'icon' }, { type: 'input', label: '排序', prop: 'sortNo' }]
    }
    if (value == 1) {
        formItem.value = [{ type: 'input', label: '菜单名称', prop: 'title' }, { type: 'selectTree', label: '上级菜单', prop: 'parentId' }, { type: 'input', label: '菜单路径', prop: 'path' }, { type: 'input', label: '前端组件', prop: 'component' }, { type: 'input', label: '菜单图标', prop: 'icon' }, { type: 'input', label: '排序', prop: 'sortNo' }]
    }
    if (value == 2) {
        formItem.value = []
    }
}
const handleClose = () => {
    emit('close-drawer')
}
const handleInit = () => {
    emit('init')
}
const handleSubmit = (title: any) => {
    if (title == '编辑') {
        editMenu(formData).then((res) => {
            if (res.code == 200) {
                handleClose()
                handleInit()
            }
        })
    }
    if (title == '新增') {
        Object.defineProperty(formData, 'type', { value: radio.value, writable: true, enumerable: true, configurable: true })
        addMenu(formData).then((res) => {
            if (res.code == 200) {
                handleClose()
                handleInit()
            }
        })
    }
}
queryTreeList().then((res) => {
    if (res.code == 200) {
        menus.value = res.data.treeList
    }
})
defineExpose({
    radio,
    formData,
    menus
})
</script>
<style>
</style>