<template>
    <div class="system">
        <!-- 缺少通配搜索组件 -->

        <div class="header">
            <h4>菜单列表</h4>
            <el-button type="primary" :icon="Plus" @click="handleAddMenu">新增菜单</el-button>
        </div>

        <div class="table-container">
            <el-table :data="menuTree" row-key="id" :tree-props="{ children: 'son' }" border highlight-current-row>
                <el-table-column prop="name" label="菜单名称" />
                <el-table-column prop="path" label="路由路径" />
                <el-table-column prop="icon" label="图标">
                    <template #default="{ row }">
                        <el-icon v-if="row.icon && iconMap[row.icon]">
                            <component :is="iconMap[row.icon]" />
                        </el-icon>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型">
                    <template #default="{ row }">
                        {{ row.type === 1 ? '目录' : '按钮' }}
                    </template>
                </el-table-column>
                <!-- 新增：状态列 -->
                <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                        <el-tag size="small" :type="row.status === 1 ? 'success' : 'danger'">
                            {{ row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="handleEditMenu(row)">
                            编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click="handleDeleteMenu(row)">
                            删除
                        </el-button>
                        <el-button link size="small" :type="row.status === 1 ? 'warning' : 'success'"
                            @click="handleToggleStatus(row)">
                            {{ row.status === 1 ? '禁用' : '启用' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增菜单' : '编辑菜单'" width="600px" destroy-on-close>
        <el-form ref="menuFormRef" :model="menuForm" :rules="menuFormRules">
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="menuForm.name" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="父级菜单" prop="parentId">
                <el-select v-model="menuForm.parentId" placeholder="请选择父级菜单" style="width:100%">
                    <el-option label="主菜单" value="0" />
                    <el-option v-for="item in menuTree" :key="item.id" :label="item.name" :value="item.id + ''" />
                </el-select>
            </el-form-item>
            <el-form-item label="路由路径" prop="path">
                <el-input v-model="menuForm.path" placeholder="例如：/system/menuList" />
            </el-form-item>
            <el-form-item label="后端路由" prop="api">
                <el-input v-model="menuForm.api" placeholder="例如：/api/system/menu/list（可选）" />
            </el-form-item>
            <el-form-item label="图标名称" prop="icon">
                <el-select v-model="menuForm.icon" placeholder="请选择图标（二级菜单可留空）" style="width: 100%" clearable>
                    <el-option v-for="item in iconOptions" :key="item.value" :label="item.label" :value="item.value">
                        <template #label>
                            <span style="display: flex; align-items: center; gap: 8px;">
                                <el-icon v-if="item.icon">
                                    <component :is="item.icon" />
                                </el-icon>
                                <span>{{ item.label }}</span>
                            </span>
                        </template>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="menuForm.sort" :min="0" placeholder="数字越小越靠前（默认1）" style="width: 100%" />
            </el-form-item>
            <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="menuForm.type">
                    <el-radio :value="1">菜单（显示在侧边栏）</el-radio>
                    <el-radio :value="2">按钮（权限控制）</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button @click="() => { { dialogVisible = false, dialogType = 'add' } }">取消</el-button>
            <el-button type="primary" @click="handleSubmitMenu">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { Tools, List, HomeFilled, UserFilled, Platform, BellFilled, GoodsFilled, WarningFilled, Plus } from '@element-plus/icons-vue'

import { getMenuApi, addMenuApi, deleteMenuApi, editMenuApi } from '@/api/modules/menu'
import { rules } from './rules'

// 定义图标映射表和选择图标选项列表
const iconMap: Record<string, any> = {
    Tools,
    List,
    HomeFilled,
    UserFilled,
    Platform,
    BellFilled,
    GoodsFilled,
    WarningFilled
}
// 图标配置（可随时扩展）
const iconOptions = [
    { label: "无图标", value: "无图标" },
    { label: "Tools(工具)", value: "Tools", icon: Tools },
    { label: "List(列表)", value: "List", icon: List },
    { label: "HomeFilled(首页)", value: "HomeFilled", icon: HomeFilled },
    { label: "UserFilled(用户)", value: "UserFilled", icon: UserFilled },
    { label: "Platform(平台)", value: "Platform", icon: Platform },
    { label: "BellFilled(铃铛)", value: "BellFilled", icon: BellFilled },
    { label: "GoodsFilled(商品)", value: "GoodsFilled", icon: GoodsFilled },
    { label: "WarningFilled(警告)", value: "WarningFilled", icon: WarningFilled },
]

//menu数据
const menuTree = ref<any[]>([])

// 定义菜单表单数据
const menuForm = ref({
    name: '', // 菜单名称
    parentId: '0', // 默认一级菜单
    path: '', // 路由路径
    api: '', // 后端路由
    icon: '', // 图标名称
    sort: 1, // 排序（默认1）
    type: 1 // 默认是菜单类型
})
const menuFormRef = ref<FormInstance>()
// 核心：表单验证规则
const menuFormRules = rules(menuForm.value, iconOptions)

// 定义弹窗显示状态
const dialogVisible = ref(false)
// 新增：区分新增/编辑模式
const dialogType = ref<'add' | 'edit'>('add')
// 编辑菜单ID
const currentEditId = ref(null)

//所有的方法

// 获取菜单列表
onMounted(async () => {
    try {
        const res = await getMenuApi()
        menuTree.value = filterEnabledMenus(res)
    } catch (err) {
        console.error('获取菜单列表失败')
    }
})

// 处理菜单状态，只保留 status=1 的菜单
const filterEnabledMenus = (menuList: any[]) => {
    const enabledMenus = menuList.filter(menu => menu.status === 1)
    enabledMenus.forEach(menu => {
        if (menu.son && menu.son.length) {
            menu.son = filterEnabledMenus(menu.son)
        }
    })
    return enabledMenus
}

// 打开新增弹窗
const handleAddMenu = () => {
    // 清空表单数据
    menuForm.value = {
        name: '',
        parentId: '0',
        path: '',
        api: '',
        icon: '',
        sort: 1,
        type: 1
    }
    dialogVisible.value = true
    console.log('dialogType.value', dialogType.value);
}

//打开编辑弹窗
const handleEditMenu = (row: any) => {
    dialogType.value = 'edit'
    currentEditId.value = row.id

    menuForm.value = {
        name: row.name,
        parentId: row.parent_id,
        path: row.path,
        api: row.api,
        icon: row.icon,
        sort: row.sort,
        type: row.type
    }
    dialogVisible.value = true
}

// 提交表单（新增/编辑）
const handleSubmitMenu = async () => {
    try {
        await menuFormRef.value?.validate()
        if (dialogType.value === 'add') {
            await addMenuApi({
                ...menuForm.value,
                parent_id: menuForm.value.parentId
            })
            const res = await getMenuApi()
            menuTree.value = filterEnabledMenus(res)
        } else {
            await editMenuApi({
                id: currentEditId.value || 0,
                status: menuForm.value.type === 2 ? 0 : 1, // 按钮默认禁用
                parent_id: menuForm.value.parentId,
                ...menuForm.value
            })
            const res = await getMenuApi()
            menuTree.value = filterEnabledMenus(res)
        }
        dialogVisible.value = false
    } catch (err) {
        console.log('提交菜单失败', err)
    }
}

//删除菜单
const handleDeleteMenu = async (row: any) => {
    try {
        await deleteMenuApi({ id: row.id })
        const res = await getMenuApi()
        menuTree.value = filterEnabledMenus(res)
    } catch (err) {
        console.log('删除菜单失败', err)
    }
}


// 切换状态
const handleToggleStatus = async (row: any) => {
    row.status = row.status === 1 ? 0 : 1
    ElMessage.success(`已${row.status === 1 ? '启用' : '禁用'}`)
}
</script>