<template>
  <div class="system">
    <!-- 菜单列表头 -->
    <div class="header">
      <h4>菜单列表</h4>
      <el-button type="primary" @click="handleAddMenu" v-auth="'menus_create'">新增菜单</el-button>
    </div>
    <!-- 菜单列表表格 -->
    <MenuTable
      :table-data="menuTree"
      :columns="menuTableColumns"
      row-key="id"
      :tree-props="treeProps"
    >
      <template #icon="{ row }">
        <el-icon v-if="row.icon && menuiconMap[row.icon]">
          <component :is="menuiconMap[row.icon]" />
        </el-icon>
        <span v-else>-</span>
      </template>
      <template #type="{ row }">
        {{ row.type === 1 ? '目录' : '按钮' }}
      </template>
      <template #status="{ row }">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </template>
      <template #action="{ row }">
        <el-button
          link
          type="primary"
          size="small"
          @click="handleEditMenu(row)"
          v-auth="'menus_edit'"
        >
          编辑
        </el-button>
        <el-button
          link
          type="danger"
          size="small"
          @click="handleDeleteMenu(row)"
          v-auth="'menus_del'"
        >
          删除
        </el-button>
      </template>
    </MenuTable>
  </div>
  <!-- 菜单新增/编辑弹窗 -->
  <MenuDialog
    :visible="dialogVisible"
    :title="dialogTitle"
    :type="dialogType"
    @confirm="handleSubmit"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <MenuForm
      :form-data="menuForm"
      :form-rules="menuFormRules"
      :form-items="menuFormItemOptions"
      :options-map="menuFormOptionsMap"
      ref="menuFormRef"
    />
  </MenuDialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// 组件配置
import MenuHeader from '@/components/common/Header.vue'
import MenuTable from '@/components/common/Table.vue'
import MenuDialog from '@/components/common/Dialog.vue'
import MenuForm from '@/components/common/Form.vue'
import { menuTableColumns, menuiconOptions, menuiconMap, menuFormItemOptions } from './options'
import { rules } from './rules'

import { getMenuApi, createMenuApi, editMenuApi, deleteMenuApi } from '@/api/modules/system/menu'
// 定义header配置
const menuTitle = ref('菜单管理')
const menuHeaderButtons = [
  { label: '新增菜单', type: 'primary' as const, icon: Plus, key: 'addMenu' },
]

// 定义表格配置
const menuTree = ref<any[]>([])
const treeProps = { children: 'son' }

// 定义弹窗配置
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('add')

// 定义菜单表单数据
const menuForm = ref({
  name: '', // 菜单名称
  parentName: '', // 上级菜单名称
  path: '', // 路由路径
  api: '', // 后端路由
  icon: '', // 图标名称
  sort: null, // 排序（默认1）
  type: null, // 默认是菜单类型
  status: null, // 默认是启用状态
})
const menuFormRef = ref<FormInstance>()
// 表单验证规则
const menuFormRules = rules(menuForm.value, menuiconOptions)
// icon和菜单表单选项映射
const menuFormOptionsMap = ref({
  parentName: [] as any[],
  icon: menuiconOptions,
  type: [
    { label: '菜单', value: 1 },
    { label: '按钮', value: 2 },
  ],
  status: [
    { label: '启用', value: 1 },
    { label: '禁用', value: 2 },
  ],
})

/** 
@description: 新增菜单
**/
const handleAddMenu = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增菜单'
  menuForm.value.status = 1 as any // 默认是启用状态
}

/** 
@description: 菜单数据处理
**/

// 获取菜单列表
const fetchMenuList = async () => {
  try {
    const data = await getMenuApi()
    menuTree.value = data
    // 处理parentName选项，添加一级菜单选项
    const parentNameOptions = data.map((item) => ({
      label: item.name,
      value: item.id ?? '',
    }))
    menuFormOptionsMap.value.parentName = [{ label: '一级菜单', value: '0' }, ...parentNameOptions]
  } catch (err) {
    console.error('获取菜单列表失败', err)
  }
}
// 页面加载时获取菜单列表
onMounted(async () => {
  await fetchMenuList()
})

/** 
@description: 处理菜单编辑/删除/状态切换
**/
const handleEditMenu = (row: any) => {
  console.log('编辑菜单', row)
  dialogVisible.value = true
  dialogTitle.value = '编辑菜单'
  dialogType.value = 'edit'
  menuForm.value = {
    ...row,
    id: row.id, // 菜单id
    parentName: row.name,
    status: row.status ?? 1, // 默认是启用状态
    api: row.api, // 后端路由
  }
}
const handleDeleteMenu = async (row: any) => {
  try {
    await deleteMenuApi({ id: row.id })
    await fetchMenuList()
  } catch (err) {
    console.error('删除菜单失败')
  }
}

/** 
@description: 处理弹窗提交/取消/关闭事件
**/
const handleSubmit = async () => {
  console.log('提交菜单表单')
  try {
    await menuFormRef.value?.validate()
    if (dialogType.value === 'add') {
      const params = {
        name: menuForm.value.name, // 菜单名称
        parent_id: menuForm.value.parentName, // 上级菜单id
        path: menuForm.value.path, // 路由路径
        api: menuForm.value.api, // 后端路由
        icon: menuForm.value.icon, // 图标名称
        sort: menuForm.value.sort ?? 1, // 排序（默认1）
        type: menuForm.value.type ?? 1, // 默认是菜单类型
      }
      await createMenuApi(params)
      await fetchMenuList()
    } else {
      await editMenuApi(menuForm.value)
      console.log('编辑菜单成功', menuForm.value)
      await fetchMenuList()
    }
    dialogVisible.value = false
  } catch (err) {
    console.log('表单验证失败')
    return
  }
}
const handleCancel = () => {
  dialogVisible.value = false
  dialogType.value = 'add'
  menuForm.value = {
    name: '', // 菜单名称
    parentName: '', // 上级菜单名称
    path: '', // 路由路径
    api: '', // 后端路由
    icon: '', // 图标名称
    sort: null, // 排序（默认1）
    type: null, // 默认是菜单类型
    status: null, // 默认是启用状态
  }
}
const handleClose = () => {
  dialogVisible.value = false
  dialogType.value = 'add'
  menuForm.value = {
    name: '', // 菜单名称
    parentName: '', // 上级菜单名称
    path: '', // 路由路径
    api: '', // 后端路由
    icon: '', // 图标名称
    sort: null, // 排序（默认1）
    type: null, // 默认是菜单类型
    status: null, // 默认是启用状态
  }
}
</script>
