<template>
  <div class="flex-x-between">
    <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
      <template #prefix>
        <Search />
      </template>
    </el-input>

    <div class="flex-center ml-5">
      <el-button type="primary" size="small" plain @click="togglePermTree">
        <template #icon>
          <Switch />
        </template>
        {{ isExpanded ? "收缩" : "展开" }}
      </el-button>
      <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
        父子联动
      </el-checkbox>

      <el-tooltip placement="bottom">
        <template #content>
          如果只需勾选菜单菜单，不需要勾选子菜单或者按钮菜单，请关闭父子联动
        </template>
        <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
          <QuestionFilled />
        </el-icon>
      </el-tooltip>
    </div>
  </div>

  <el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions"
    :filter-node-method="handlePermFilter" :default-expand-all="true" :check-strictly="!parentChildLinked" class="mt-5">
    <template #default="{ data }">
      {{ data.label }}
    </template>
  </el-tree>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";

const shopUser = useUserStore();
import MenuAPI from "@/api/account/menu";

const modelValue = defineModel("modelValue", {
  type: Array,
  required: true,
  default: () => [],
});
const permKeywords = ref("");
const isExpanded = ref(true);
const parentChildLinked = ref(false);
const permTreeRef = ref();
// 展开/收缩 菜单菜单树
function togglePermTree() {
  isExpanded.value = !isExpanded.value;
  if (permTreeRef.value) {
    Object.values(permTreeRef.value.store.nodesMap).forEach((node) => {
      if (isExpanded.value) {
        node.expand();
      } else {
        node.collapse();
      }
    });
  }
}
function handlePermFilter(value, data) {
  if (!value) return true;
  return data.label.includes(value);
}

// 父子菜单节点是否联动
function handleparentChildLinkedChange(val) {
  parentChildLinked.value = val;
}

// 菜单菜单下拉
const menuPermOptions = ref([]);

function returnMenu(menu) {
  return menu.map((v) => {
    return {
      ...v,
      label: v.title,
      value: v.menuId,
      children: v.children ? returnMenu(v.children) : [],
    };
  });
}
// 获取所有的菜单
async function getMenuPermOptions() {
  console.log(shopUser.userInfo);
  let arr =
    shopUser.userInfo.account === "admin" ? await MenuAPI.getList() : await MenuAPI.getRoutes();
  menuPermOptions.value = returnMenu(arr);
}
getMenuPermOptions();

onMounted(() => {
  console.log(modelValue.value);
});

watch(
  () => modelValue.value,
  (newval) => { }
);

function getPerms() {
  return permTreeRef.value.getCheckedKeys();
}
function reset() {
  console.log("reset");
  permTreeRef.value.setCheckedKeys([]);
}
function setChecked(checkedMenuIds) {
  checkedMenuIds.forEach((menuId) => {
    permTreeRef.value.setChecked(menuId, true, false);
  });
}
defineExpose({
  getPerms,
  setChecked,
  reset,
});
</script>
