<template>
  <div class="manage-container menu-manage" v-loading="loading">
    <div class="manage-content table-container">
      <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 #header-actions>
          <el-button type="primary" @click="handleAdd">新增 </el-button>
        </template>

        <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"
    >
      <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 { Plus, Edit, Delete } from "@element-plus/icons-vue";
import commonForm from "@/components/common/commonForm.vue";
import CommonTable from "@/components/common/commonTable.vue";
import { da } from "element-plus/es/locales.mjs";

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";
.menu-manage {
  padding: 20px;
  background: rgba(157, 188, 218, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search-form {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .table-container {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>
