<template>
    <div class="menu-edit">
        <el-card shadow="never">
            <el-page-header :content="id ? '编辑菜单' : '新增菜单'" @back="$router.back()" />
        </el-card>

        <el-card class="m-t-15" shadow="never">
            <div class="m-t-15">
                <el-form
                    ref="formRefs"
                    :model="formData"
                    label-width="120px"
                    size="small"
                    style="max-width: 460px"
                >
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="formData.menuType">
                            <el-radio
                                :label="menuDataType.CATALOG"
                                @change="changeType(menuDataType.CATALOG)"
                            >
                                目录
                            </el-radio>
                            <el-radio :label="menuDataType.MENU" @change="changeType(menuDataType.MENU)">
                                菜单
                            </el-radio>
                            <el-radio :label="menuDataType.BUTTON" @change="changeType(menuDataType.BUTTON)">
                                按钮
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="父级菜单">
                        <el-cascader
                            v-model="formData.pid"
                            style="width: 340px"
                            :options="menuList"
                            :props="{
                                checkStrictly: true,
                                emitPath: false,
                                label: 'menuName',
                                value: 'id',
                            }"
                            clearable
                        ></el-cascader>
                    </el-form-item>

                    <div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
                        <el-form-item label="请选择图标">
                            <div class="flex">
                                <select-icon v-model:icon="formData.menuIcon"></select-icon>
                            </div>
                        </el-form-item>
                    </div>

                    <el-form-item label="菜单名称">
                        <el-input
                            v-model="formData.menuName"
                            show-word-limit
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>

                    <div v-if="formData.menuType == menuDataType.BUTTON">
                        <el-form-item label="菜单权限字符">
                            <el-input
                                v-model="formData.perms"
                                show-word-limit
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
                        <el-form-item label="路由地址">
                            <el-input
                                v-model="formData.paths"
                                show-word-limit
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="formData.menuType == menuDataType.MENU">
                        <el-form-item label="组件路径">
                            <el-input
                                v-model="formData.component"
                                show-word-limit
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="菜单权限字符">
                            <el-input
                                v-model="formData.perms"
                                show-word-limit
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="路由参数">
                            <el-input
                                v-model="formData.params"
                                show-word-limit
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="选中菜单">
                            <el-input
                                v-model="formData.selected"
                                show-word-limit
                                placeholder="请输入选中菜单路径"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <el-form-item label="菜单排序">
                        <el-input
                            v-model="formData.menuSort"
                            show-word-limit
                            type="number"
                            placeholder="请输入排序"
                        ></el-input>
                    </el-form-item>

                    <div v-if="formData.menuType == menuDataType.MENU">
                        <el-form-item label="是否缓存">
                            <el-radio-group v-model="formData.isCache">
                                <el-radio :label="1">缓存</el-radio>
                                <el-radio :label="0">不缓存</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
                        <el-form-item label="显示状态">
                            <el-radio-group v-model="formData.isShow">
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="菜单状态">
                            <el-radio-group v-model="formData.isDisable">
                                <el-radio :label="0">正常</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-card>
        <footer-btns>
            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup>
    import { useAdmin } from '@/core/hooks/app'
    import { onMounted, reactive, ref } from 'vue'
    import FooterBtns from '@/components/footer-btns/index.vue'
    import type { ElForm, ElMessage } from 'element-plus'
    import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit } from '@/api/auth'
    import SelectIcon from './select-icon/index.vue'

    const menuDataType = {
        CATALOG: 'M', // 目录
        MENU: 'C', // 菜单
        BUTTON: 'A', // 按钮
    }

    const { router, route } = useAdmin()
    const id: any = route.query.id

    const formRefs = ref<InstanceType<typeof ElForm>>()

    // 父级菜单选择
    const menuList = ref<any>([])

    // 表单数据
    const formData = ref({
        pid: '', // 上级ID
        menuType: 'M', // 菜单类型
        menuName: '', // 菜单名称
        menuIcon: '', // 菜单图标
        menuSort: '', // 菜单排序
        perms: '', // 菜单权限字符
        paths: '', // 路由路径
        component: '', // 前端组件
        selected: '', // 选中路径
        params: '', // 路由参数
        isShow: 1, // 是否显示：0=否， 1=是
        isCache: 0, // 是否缓存：0=否， 1=是
        isDisable: 0, // 是否禁用: 0=否， 1=是
    })

    // 获取详情
    const getMenuDetail = async (id: number) => {
        ;(formData.value as {}) = await apiMenuDetail({ id })
        getFatherMenu()
    }

    // 获取父级菜单选择
    const getFatherMenu = async () => {
        const menus = (await apiConfigGetMenu()) || []
        menuList.value = [{ id: 0, menuName: '顶级' }, ...menus]
    }

    // 添加菜单
    const handleMenuAdd = async () => {
        await apiMenuAdd({ ...formData.value })
        router.back()
    }

    // 编辑菜单
    const handleMenuEdit = async () => {
        await apiMenuEdit({ ...formData.value })
        router.back()
    }

    // 保存
    const onSubmit = () => {
        formRefs.value?.validate()?.then((valid) => {
            if (!valid) {
                return
            }

            if (!id) handleMenuAdd()
            else handleMenuEdit()
        })
    }

    // 切换
    const changeType = (val: string) => {
        menuDataType.value = val
    }

    onMounted(() => {
        if (id) getMenuDetail(id)
        getFatherMenu()
    })
</script>

<style lang="scss" scoped></style>
