<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="菜单管理"
      row-key="menuId"
      :pagination="false"
      :indent="20"
      :columns="columns"
      :request-api="getTableList"
      :default-expand-all="defaultExpandAllKey">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
        <el-button type="info" icon="Sort" @click="changeExpand"> 展开/折叠 </el-button>
      </template>
      <!-- 图标 -->
      <template #icon="scope">
        <el-icon :size="18" v-if="scope.row.meta.icon">
          <SvgIcon v-if="scope.row.meta.icon.startsWith('svg-')" :name="scope.row.meta.icon.substring(4)" />
          <component v-else :is="scope.row.meta.icon" />
        </el-icon>
      </template>

      <template #operation="{ row }">
        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
      </template>
    </ProTable>
    <MenuDrawer ref="drawerRef" size="50%" />
  </div>
</template>
<script lang="tsx" setup name="MenuManage">
import MenuApi from '@/api/module/system/menu'
import MenuDrawer from './components/MenuDrawer.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { useDictOptions, useHandleData } from '@/hooks'
import { MenuBO, MenuVO } from '@/api/interface/system/menu'
const defaultExpandAllKey = ref(true)

const proTableRef = ref<ProTableInstance>()

// 表格配置项
const columns: ColumnProps<Menu.MenuOptions[]>[] = [
  { type: 'index', width: 60, label: '序号' },
  { prop: 'meta.title', label: '名称', align: 'left', width: 150 },
  {
    prop: 'menuType',
    label: '类型',
    tag: true,
    enum: useDictOptions('MENU_TYPE'),
    width: 80,
    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
  },
  { prop: 'meta.icon', label: '图标', width: 100 },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: useDictOptions('COMMON_STATUS'),
    width: 80,
    fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
  },
  { prop: 'name', label: '路由名称' },
  { prop: 'path', label: '路由地址' },
  { prop: 'component', label: '组件路径' },
  { prop: 'orderNum', label: '排序' },
  { prop: 'remark', label: '备注' },
  { prop: 'createByName', label: '创建人' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

const changeExpand = () => {
  defaultExpandAllKey.value = !defaultExpandAllKey.value
  proTableRef.value?.refresh()
}

// 获取table列表
const getTableList = (params: MenuBO) => MenuApi.list(params)

// 单行删除
const deleteRow = async (row: MenuVO) => {
  await useHandleData(MenuApi.delete, [row.menuId], `删除【${row.title}】数据`)
  proTableRef.value?.getTableList()
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof MenuDrawer> | null>(null)
const openDrawer = (title: string, row: Partial<MenuBO> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === '查看',
    api: title === '新增' ? MenuApi.add : title === '编辑' ? MenuApi.edit : undefined,
    getTableList: proTableRef.value?.getTableList
  }
  drawerRef.value?.acceptParams(params)
}
</script>
