<template>
  <div class="system-manage-container menu-manage" v-loading="loading">
    <div class="system-manage-header">
      <div class="header-left"></div>
      <div class="header-right">
        <el-form>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">新增菜单</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="system-manage-content manage-content">
      <common-table
        :data="tableData"
        :columns="tableColumns"
        :pagination="false"
        :indent="30"
        :border="true"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        default-expand-all
      >
        <template #operations="{ row, index }">
          <el-button
            v-if="!row.url"
            link
            type="primary"
            size="small"
            @click="addChildMenu(row, index)"
          >
            新增子菜单
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleEdit(row, index)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleDelete(row, index)"
          >
            删除
          </el-button>
        </template>
      </common-table>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      @close="cancelMenuForm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="menuFormData"
        ref="menuForm"
        :rules="menuRules"
        label-width="100"
      >
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuFormData.name" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="menuFormData.order"
            :min="0"
            :precision="0"
            :max="99999999999"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="路由地址">
          <el-input v-model="menuFormData.url" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelMenuForm">取消</el-button>
          <el-button type="primary" @click="saveMenuForm">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import CommonTable from "@/components/common/commonTable.vue";

const { proxy } = getCurrentInstance();
const loading = ref(false);

const menuForm = ref();
const menuRules = ref({
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
});

// 表格数据
const tableData = ref([]);

// 表格列配置
const tableColumns = [
  {
    prop: "name",
    label: "菜单名称",
    tree: true,
  },
  // {
  //   prop: "order",
  //   label: "排序",
  //   align: "center",
  // },
  {
    prop: "operations",
    label: "操作",
    width: 180,
    slot: "operations",
    fixed: "right",
    align: "right",
  },
];
// 表格数据
const loadTableData = () => {
  loading.value = true;
  proxy.$post({
    url: "/api/user/menu/treeMenu",
    data: {},
    callback: (data) => {
      tableData.value = data;
      loading.value = false;
    },
    error: (err) => {
      loading.value = false;
      ElMessage.error("加载数据失败");
    },
  });
};

// 对话框相关
const dialogVisible = ref(false);
const dialogTitle = ref("");

// 用户表单数据
const menuFormData = ref({});
// 新增菜单
const handleAdd = () => {
  dialogTitle.value = "新增菜单";
  dialogVisible.value = true;
};
const addChildMenu = (row, index) => {
  dialogTitle.value = "新增菜单";
  menuFormData.value.parentId = row.id;
  dialogVisible.value = true;
};
// 编辑
const handleEdit = (row, index) => {
  menuFormData.value = { ...row };
  dialogTitle.value = "编辑菜单";
  dialogVisible.value = true;
};

// 删除
const handleDelete = async (row, index) => {
  ElMessageBox.confirm(`确定删除${row.name}？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    proxy.$post({
      url: "/api/user/menu/deleteMenu",
      data: { id: row.id },
      callback: (data) => {
        ElMessage.success("删除成功");
        loadTableData();
      },
      error: (err) => {
        ElMessage.error("删除失败:", err);
      },
    });
  });
};

const saveMenuForm = () => {
  menuForm.value.validate((valid) => {
    if (valid) {
      let url = menuFormData.value.id ? "updateMenu" : "createMenu";
      proxy.$post({
        url: "/api/user/menu/" + url,
        data: menuFormData.value,
        callback: (data) => {
          ElMessage.success(dialogTitle.value + "成功");
          loadTableData();
          cancelMenuForm();
        },
      });
    }
  });
};
const cancelMenuForm = () => {
  menuForm.value.resetFields();
  menuFormData.value = {};
  dialogVisible.value = false;
};

onMounted(() => {
  loadTableData();
});
</script>

<style scoped lang="less">
@import "@/styles/manage.less";
</style>
