<template>
    <el-form-item>
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选
        </el-checkbox>
        <el-checkbox @change="handleCheckedTreeConnect($event, 'menu')">父子联动
        </el-checkbox>
        <el-tree  :check-strictly="checkstrictly" class="tree-border" @check-change="nodeClick" :data="menuOptions" show-checkbox ref="menuRef"
            :default-expand-all="unwind" node-key="id" empty-text="加载中，请稍候"
            :props="{ label: 'label', children: 'children' }"></el-tree>
    </el-form-item>
</template>
<script setup>
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
import { roleMenuTreeselect, treeselect as menuTreeselect } from "../../api/system/menu";
const { proxy } = getCurrentInstance();
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const unwind = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);
const ids = ref([]);
const deptExpand = ref(true);
const data = reactive({
    form: {},
});
const props = defineProps({
    modelValue: Array,
    id: Number,
    menuExpands: Boolean,
})
const emit = defineEmits()
if (props.menuExpands) {
    unwind.value = true;
    menuExpand.value = true;
}
const checkstrictly = ref(true)
// emit('update:modelValue',[])
console.log('props', props)

/** 根据角色ID查询菜单树结构 */
const getRoleMenuTreeselect = (roleId) => {
    return roleMenuTreeselect(roleId).then(res => {
        // console.log(res, '根据角色ID查询菜单树结构');
        menuOptions.value = res.menus;
        return res;
    });

}
const handleUpdate = (row) => {
    reset();
    const roleId = row || ids.value;
    const roleMenu = getRoleMenuTreeselect(roleId);
    getRole(roleId).then(response => {
        form.value = response.data;
        form.value.roleSort = Number(form.value.roleSort);
        open.value = true;
        nextTick(() => {
            roleMenu.then((res) => {
                let checkedKeys = res.checkedKeys;
                checkedKeys.forEach((v) => {
                    nextTick(() => {
                        menuRef.value.setChecked(v, true, false);
                    });
                });
            });
        });
    });
}
const { form } = toRefs(data);
// /** 查询菜单树结构 */
const getMenuTreeselect = () => {
    menuTreeselect().then(res => {
        // console.log(res, '查询菜单树结构');
        menuOptions.value = res.data
    });
}
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value, type) => {
    if (type == "menu") {
        let treeList = menuOptions.value;
        for (let i = 0; i < treeList.length; i++) {
            menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
        }
    } else if (type == "dept") {
        let treeList = deptOptions.value;
        for (let i = 0; i < treeList.length; i++) {
            deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
        }
    }
}
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value, type) => {
    if (type == "menu") {
        // console.log(menuOptions.value);
        menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
        // getMenuAllCheckedKeys();
    } else if (type == "dept") {
        deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
        // getMenuAllCheckedKeys();
    }
}
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value, type) => {
    if (type == "menu") {
        checkstrictly.value = !value
        form.value.menuCheckStrictly = value ? true : false;
    } else if (type == "dept") {
        form.value.deptCheckStrictly = value ? true : false;
    }
}
/** 所有菜单节点数据 */
const getMenuAllCheckedKeys = () => {
    // 目前被选中的菜单节点
    let checkedKeys = menuRef.value.getCheckedKeys();
    // 半选中的菜单节点
    let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
    emit('update:modelValue', checkedKeys)
    return checkedKeys;
}
/** 重置新增的表单以及其他数据  */
const reset = () => {
    if (menuRef.value != undefined) {
        menuRef.value.setCheckedKeys([]);
    }
    // menuExpand.value = false;
    menuNodeAll.value = false;
    deptExpand.value = true;
    form.value = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
    };
    proxy.resetForm("roleRef");
}
const nodeClick = () => {
    getMenuAllCheckedKeys();
}
onMounted(() => {
    if (props.id) {
        handleUpdate(props.id);
    } else {
        getMenuTreeselect();
    }
})
</script>