<template>
  <!-- 菜单管理模块 -->
  <div class="mod-menu">
    <!-- 搜索表单 -->
    <el-form
      :inline="true"
    :model="dataForm"
    >
    <el-form-item>
      <!-- 新增按钮，只有有权限时显示 -->
      <el-button
        v-if="isAuth('sys:menu:save')"
      type="primary"
      @click="onAddOrUpdate()"
      >
      新增
      </el-button>
    </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="dataList"
    border
    style="width: 100%;"
    row-key="menuId"
    >
    <!-- 名称列 -->
    <el-table-column
      prop="name"
    header-align="center"
    tree-key="menuId"
    width="150"
    label="名称"
    />

    <!-- 图标列 -->
    <el-table-column
      header-align="center"
    align="center"
    label="图标"
    >
    <template #default="scope">           <!-- 自定义列内容 -->
      <svg-icon
        :icon-class="`icon-${scope.row.icon}`"
      />
    </template>
    </el-table-column>

    <!-- 类型列 -->
    <el-table-column
      prop="type"
    header-align="center"
    align="center"
    label="类型"
    >
    <template #default="scope">           <!-- 自定义列内容 -->
      <el-tag v-if="scope.row.type === 0">目录</el-tag> <!-- 根据类型动态渲染标签 -->
      <el-tag v-else-if="scope.row.type === 1" type="success">菜单</el-tag>
      <el-tag v-else-if="scope.row.type === 2" type="info">按钮</el-tag>
    </template>
    </el-table-column>

    <!-- 排序号列 -->
    <el-table-column
      prop="orderNum"
    header-align="center"
    align="center"
    label="排序号"
    />

    <!-- 菜单URL列 -->
    <el-table-column
      prop="url"
    header-align="center"
    align="center"
    width="150"
    :show-overflow-tooltip="true"
    label="菜单URL"
    >
    <template #default="scope">           <!-- 自定义列内容 -->
      {{ scope.row.url || '-' }}          <!-- 如果没有值则显示'-' -->
    </template>
    </el-table-column>

    <!-- 授权标识列 -->
    <el-table-column
      prop="perms"
    header-align="center"
    align="center"
    width="150"
    :show-overflow-tooltip="true"
    label="授权标识"
    >
    <template #default="scope">           <!-- 自定义列内容 -->
      {{ scope.row.perms || '-' }}        <!-- 如果没有值则显示'-' -->
    </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column
      fixed="right"
    header-align="center"
    align="center"
    width="150"
    label="操作"
    >
    <template #default="scope">           <!-- 自定义列内容 -->
      <!-- 修改按钮，只有有权限时显示 -->
      <el-button
        v-if="isAuth('sys:menu:update')"
      type="text"
      @click="onAddOrUpdate(scope.row.menuId)"
      >
      修改
      </el-button>
      <!-- 删除按钮，只有有权限时显示 -->
      <el-button
        v-if="isAuth('sys:menu:delete')"
      type="text"
      @click="onDelete(scope.row.menuId)"
      >
      删除
      </el-button>
    </template>
    </el-table-column>
    </el-table>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
    ref="addOrUpdateRef"
    @refresh-data-list="getDataList"
    @close="addOrUpdateVisible=false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { treeDataTranslate, isAuth } from '@/utils' // 导入工具函数
import { ElMessage, ElMessageBox } from 'element-plus' // 导入消息提示和确认框组件
import AddOrUpdate from './add-or-update.vue' // 引入新增/修改弹窗组件

// 表单数据模型
const dataForm = ref({})

// 在组件挂载完成后获取数据列表
onMounted(() => {
  getDataList()
})

// 数据列表绑定的响应式变量
const dataList = ref([])

/**
 * 获取数据列表方法
 */
const getDataList = () => {
  http({
    url: http.adornUrl('/sys/menu/table'), // API端点
    method: 'get', // 请求方式
    params: http.adornParams() // 请求参数
  }).then(({ data }) => {
    dataList.value = treeDataTranslate(data, 'menuId') // 更新表格数据并转换成树形结构
  })
}

// 新增/修改弹窗引用
const addOrUpdateRef = ref(null)
// 控制弹窗显示状态的响应式变量
const addOrUpdateVisible = ref(false)

/**
 * 新增 / 修改菜单项
 * @param id 菜单项ID（可选），如果没有传入，则表示新增
 */
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true // 显示弹窗
  nextTick(() => {
    addOrUpdateRef.value?.init(id) // 初始化弹窗数据
  })
}

/**
 * 删除菜单项
 * @param id 菜单项ID
 */
const onDelete = (id) => {
  // 显示确认框
  ElMessageBox.confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 发送HTTP请求执行删除操作
    http({
      url: http.adornUrl(`/sys/menu/${id}`),
      method: 'delete',
      data: http.adornData()
    }).then(() => {
      // 成功提示
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getDataList() // 刷新数据列表
        }
      })
    })
  })
}
</script>
