<template>
  <div class="system-menu-container layout-pd">
    <el-card shadow="hover">
      <div class="system-menu-search mb15">
        <el-input
          size="default"
          v-model="title"
          placeholder="请输入菜单名称"
          style="max-width: 180px"
        >
        </el-input>
        <el-button size="default" type="primary" class="ml10" @click="getTableData()">
          <el-icon>
            <ele-Search />
          </el-icon>
          查询
        </el-button>
        <el-button size="default" class="ml10" @click="onOpenAddMenu">
          <el-icon>
            <ele-FolderAdd />
          </el-icon>
          新增菜单
        </el-button>
      </div>
      <el-table
        :data="state.tableData.data"
        v-loading="state.tableData.loading"
        style="width: 100%"
        border
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="菜单名称" show-overflow-tooltip>
          <template #default="scope">
            <span class="ml10">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限图标" show-overflow-tooltip>
          <template #default="scope">
            <SvgIcon :name="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="path"
          label="路由路径"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="权限类型" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限标识" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限状态" show-overflow-tooltip width="100">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.enable == 1" size="small">正常</el-tag>
            <el-tag type="danger" v-else size="small">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" show-overflow-tooltip width="80">
          <template #default="scope">
            {{ scope.row.sort }}
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="140">
          <template #default="scope">
            <el-button
              size="small"
              text
              type="primary"
              @click="onOpenEditMenu('edit', scope.row)"
              >修改</el-button
            >
            <el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <MenuDialog ref="menuDialogRef" @refresh="getTableData()" />
  </div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from "vue";
import { RouteRecordRaw } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { useRoutesList } from "/@/stores/routesList";
import { menuApi } from "/@/api/sys/menu";
const title = ref("");
// 引入组件
const MenuDialog = defineAsyncComponent(() => import("/@/views/system/menu/dialog.vue"));

// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
  tableData: {
    data: [] as RouteRecordRaw[],
    loading: true,
  },
});

// 获取路由数据，真实请从接口获取
const getTableData = async () => {
  state.tableData.loading = true;
  let item = await menuApi().getMenuList({ title: title.value });
  let routes = item.data;
  // 获取路由数据 剔除顶部菜单
  let lists = [] as any | string;
  routes.forEach((res: any) => {
    lists = res.children;
  });
  state.tableData.data = lists;
  // 剔除type==2的菜单后存入缓存
  let unlist = JSON.parse(JSON.stringify(lists));
  let typelist = typeclear(unlist);
  stores.setpageroute(typelist);
  state.tableData.loading = false;
};

// 剔除type==2的菜单
function typeclear(list: Array<any>) {
  return list.filter((item: any) => {
    if (item.type == 2) {
      return false;
    }
    if (item.children && item.children.length > 0) {
      item.children = typeclear(item.children);
    }
    return true;
  });
}

// 打开新增菜单弹窗
const onOpenAddMenu = (type: string) => {
  menuDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: RouteRecordRaw) => {
  menuDialogRef.value.openDialog(type, row);
};
// 删除当前行
const onTabelRowDel = (row: any) => {
  let rows: any = Object.assign({}, row);
  ElMessageBox.confirm(`您确认要删除路由：${row.title}?`, "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      rows.enable = 0;
      rows.delFlag = 0;
      // 修改菜单
      let item = await menuApi().delMenu(rows.id);
      if (item.code == 200) {
        ElMessage.success(item.msg);
      } else {
        ElMessage.error(item.msg);
      }
      getTableData();
      //await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
    })
    .catch(() => {});
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>
