<template>
  <div class="permission-menu">
    <el-card class="!border-none" shadow="never">
      <div class="wd-card-header">
        <el-button v-perms="['auth.menu/add']" type="primary" icon="Plus" @click="handleAdd()">新增</el-button>
        <el-button @click="handleExpand" icon="Sort">展开/折叠</el-button>
        <right-toolbar :search="false" v-model:columns="columns" @refresh="getLists"></right-toolbar>
      </div>
      <el-table
        ref="tableRef"
        size="large"
        v-loading="isLoading"
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="菜单名称" prop="name" min-width="150" show-overflow-tooltip />
        <el-table-column
          label="菜单类型"
          prop="type"
          min-width="90"
          align="center"
          show-overflow-tooltip
          v-if="columns.type.visible"
        >
          <template #default="{ row }">
            <el-tag v-if="row.type == 1">目录</el-tag>
            <el-tag effect="dark" v-else-if="row.type == 2">菜单</el-tag>
            <el-tag type="success" v-else-if="row.type == 3">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图标" prop="icon" min-width="80" align="center" v-if="columns.icon.visible">
          <template #default="{ row }">
            <div class="flex justify-center" v-if="row.icon">
              <icon :name="row.icon" size="20px" :type="row.icon_type" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="路由路径"
          prop="paths"
          min-width="150"
          show-overflow-tooltip
          align="center"
          v-if="columns.paths.visible"
        />
        <el-table-column
          label="组件路径"
          prop="component"
          min-width="150"
          show-overflow-tooltip
          align="center"
          v-if="columns.component.visible"
        />
        <el-table-column
          label="权限标识"
          prop="perms"
          min-width="150"
          show-overflow-tooltip
          align="center"
          v-if="columns.perms.visible"
        />
        <el-table-column
          label="排序"
          prop="sort"
          min-width="100"
          show-overflow-tooltip
          align="center"
          v-if="columns.sort.visible"
        />
        <el-table-column
          label="是否缓存"
          prop="is_cache"
          min-width="90"
          show-overflow-tooltip
          align="center"
          v-if="columns.is_cache.visible"
        >
          <template #default="{ row }">
            <div v-if="row.type !== 3">
              <el-tag v-if="row.is_cache == 1">缓存</el-tag>
              <el-tag v-else type="danger">不缓存</el-tag>
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          label="显示状态"
          prop="is_show"
          min-width="90"
          show-overflow-tooltip
          align="center"
          v-if="columns.is_show.visible"
        >
          <template #default="{ row }">
            <div v-if="row.type !== 3">
              <el-tag v-if="row.is_show == 1">显示</el-tag>
              <el-tag v-else type="danger">隐藏</el-tag>
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          label="菜单状态"
          prop="is_disable"
          min-width="90"
          show-overflow-tooltip
          align="center"
          v-if="columns.is_disable.visible"
        >
          <template #default="{ row }">
            <div v-if="row.type !== 3">
              <el-tag type="danger" v-if="row.is_disable == 1">停用</el-tag>
              <el-tag v-else>正常</el-tag>
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right" align="center" v-if="columns.operation.visible">
          <template #default="{ row }">
            <el-button v-perms="['auth.menu/add']" type="primary" link @click="handleAdd(row.id)" v-if="row.type !== 3">
              新增
            </el-button>
            <el-button v-perms="['auth.menu/edit']" type="primary" link @click="handleEdit(row.id)"> 编辑 </el-button>
            <el-button v-perms="['auth.menu/delete']" type="danger" link @click="handleDelete(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <edit-menu ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts" name="PermissionMenu">
import { menuLists, menuDelete } from '@/api/permission/menu'
import EditMenu from './edit.vue'

// 组件参数
const tableRef = shallowRef()
const editRef = shallowRef<InstanceType<typeof EditMenu>>()
const isExpand = ref(false)
const isLoading = ref(false)
const tableData = ref<Record<string, any>[]>([])
const columns = ref({
  type: { label: '菜单类型', visible: true },
  icon: { label: '图标', visible: true },
  paths: { label: '路由路径', visible: true },
  component: { label: '组件路径', visible: true },
  perms: { label: '权限标识', visible: true },
  sort: { label: '排序', visible: true },
  is_cache: { label: '是否缓存', visible: false },
  is_show: { label: '显示状态', visible: false },
  is_disable: { label: '菜单状态', visible: true },
  operation: { label: '操作', visible: true }
})

// 获取列表
const getLists = async () => {
  isLoading.value = true
  menuLists()
    .then((data) => {
      tableData.value = data
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 新增
const handleAdd = async (id?: number) => {
  editRef.value?.open('add')
  if (id) editRef.value?.setFormData({ pid: id })
  else editRef.value?.setFormData()
}
// 编辑
const handleEdit = async (id: number) => {
  editRef.value?.open('edit')
  editRef.value?.setFormData({ id })
}
// 删除
const handleDelete = (id: number) => {
  ElMessageBox.confirm('确定要删除？', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await menuDelete({ id })
      ElMessage.success('删除成功')
      getLists()
    })
    .catch(() => {})
}
// 展开/收起
const handleExpand = () => {
  isExpand.value = !isExpand.value
  toggleExpand(tableData.value, isExpand.value)
}
// 递归展开/收起
const toggleExpand = (children: any[], unfold = true) => {
  for (const key in children) {
    tableRef.value?.toggleRowExpansion(children[key], unfold)
    if (children[key].children) {
      toggleExpand(children[key].children!, unfold)
    }
  }
}

onMounted(() => {
  getLists()
})
</script>
