<template>
  <div>
    <div class="title">
      菜单管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div>
          菜单名称&ensp;&ensp;<el-input v-model="menuName" style="width: 375px" size="large" placeholder="输入角色名称" />
        </div>

        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;菜单状态&ensp;&ensp;<el-select
            v-model="visible"
            placeholder="请选择"
            size="large"
            style="width: 240px"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <!-- <el-button type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button> -->

      <div>&ensp;</div>
      <el-table
        :data="tableData"
        ref="multipleTableRef"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="menuName" label="菜单名称" />
        <el-table-column prop="meta.icon" label="图标" align="center">
          <template #default="scope">
            <el-icon size="20">
              <component :is="scope.row.icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="请求地址" />
        <el-table-column prop="menuType" label="类型" align="center">
          <template #default="scope">
            <div v-if="scope.row.menuType == 'M'">目录</div>
            <div v-else>菜单</div>
          </template>
        </el-table-column>
        <el-table-column prop="isRefresh" label="可见" align="center">
          <template #default="scope">
            <div v-if="scope.row.isRefresh == 1">显示</div>
            <div v-else>隐藏</div>
          </template>
        </el-table-column>
        <el-table-column prop="perms" label="权限标识" />
        <!-- <el-table-column label="操作" align="center">
          <el-button color="#0052d9" type="primary">编辑</el-button>
          <el-button>删除</el-button>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

// import { useRouter } from "vue-router";
// const router = useRouter();
const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "显示"
  },
  {
    value: "0",
    label: "隐藏"
  }
]);

// const newaddition = () => {
//   router.push("/role/addition");
// };
import { ElTable } from "element-plus";
import { platformmenulist } from "@/api/home/Multisite";
import { other } from "@/api/interface";

const tableData = ref();
const menuName = ref("");
const visible = ref("");
const query = (val: any) => {
  if (val == 0) {
    getplatformuserlist();
  } else {
    menuName.value == "", (visible.value = "");
    getplatformuserlist();
  }
  console.log(val);
};
const getplatformuserlist = async () => {
  let obj = {
    menuName: menuName.value,
    visible: visible.value
  };
  const { data } = await platformmenulist(obj);
  // tableData.value = data;
  console.log(data);
  tableData.value = buildTree(data);
};

const buildTree = (data: other.tableData1[]) => {
  const tree: other.tableData1[] = [];
  const map: { [key: string]: other.tableData1 } = {};

  // 创建一个map以便快速找到item
  data.forEach((item: other.tableData1) => {
    map[item.id] = { ...item, children: [] };
  });

  data.forEach((item: { parentId: string; id: string | number }) => {
    if (item.parentId === "0") {
      // 根节点，假设根节点的 parentId 是空字符串或者其他标识
      tree.push(map[item.id]);
    } else {
      // 子节点
      if (map[item.parentId]) {
        map[item.parentId].children.push(map[item.id]);
      }
    }
  });

  return tree;
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<other.tableData1[]>([]);

const handleSelectionChange = (val: other.tableData1[]) => {
  multipleSelection.value = val;
};
const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
