<template>
    <div class="qg-container" style="padding-top: 20px;">
        <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤菜单"
        />
        <div class="qg-menu-header">
            <div class="qg-menu-name" style="width: 346px">菜单</div>
            <div class="qg-menu-auths">功能权限</div>
        </div>
        <el-tree
            ref="authTree"
            v-loading="loading"
            class="qg-menu-tree filter-tree"
            :props="{children:'childList',label:'name'}"
            :data="menuData"
            node-key="id"
            show-checkbox
            :expand-on-click-node="false"
            :default-expanded-keys="['*']"
            :filter-node-method="filterNode"
        >
            <div slot-scope="{ node, data }" class="qg-menu-tree-node">
                <div class="qg-menu-name" :style="`width: ${300-(node.level-1)*18}px`">{{ data.name }}</div>
                <div class="qg-menu-auths">
                    <div style="white-space: normal;padding: 5px 0;">
                        <template v-if="data.buttonList">
                            <el-checkbox
                                v-for="(item,index) in data.buttonList"
                                :key="index"
                                v-model="buttonAuths"
                                :label="item.id"
                                :disabled="item.disabled"
                            >
                                {{ item.name }}
                            </el-checkbox>
                        </template>
                    </div>
                </div>
            </div>
        </el-tree>
        <el-form
            v-if="entity && entity.code !== 'default_admin'"
            ref="form"
            size="small"
            label-width="100px"
            style="padding-top:30px"
        >
            <el-form-item>
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import {
        getCanManageAuthTree,
        getSelectedAuthIds
    } from '@/api/moudles/uc/auth';
    import {addRoleAuthRel} from '@/api/moudles/uc/userRoleRel';

    export default {
        name: 'RoleAuth',
        components: {},
        props: {
            entity: {
                type: Object,
                default: () => {
                }
            }
        },
        data() {
            return {
                menuData: [],
                filterText: '',
                ownedAuthIds: [],
                roleId: (this.entity && this.entity.id) || '',
                loading: false,
                buttonAuths: []
            };
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
            entity(val) {
                if (!val) {
                    this.roleId = '';
                    this.authRequest = null;
                    return;
                }
                this.roleId = (this.entity && this.entity.id) || '';
                this.getDetail();
            }
        },
        created() {
            this.getDetail();
        },
        methods: {
            filterNode(value, data) {
                if (!value) {
                    return true;
                }
                return data.name.indexOf(value) !== -1;
            },
            filterCheckKey(data, checkKey) {
                let keys = [];
                data.forEach(item => {
                    if (item.buttonList && item.buttonList.length > 0) {
                        this.buttonAuths = this.buttonAuths.concat(this.filterCheckKey(item.buttonList, checkKey));
                    }
                    if (checkKey === 'all') {
                        item.disabled = true;
                    }

                    if (Array.isArray(checkKey) && checkKey.indexOf(item.id) > -1 && (!item.childList || item.childList.length === 0)) {
                        keys.push(item.id);
                    } else if (item.childList && item.childList.length > 0) {
                        keys = keys.concat(this.filterCheckKey(item.childList, checkKey));
                    } else if (typeof checkKey === 'string') {
                        keys.push(item.id);
                    }
                });
                return keys;
            },
            getDetail() {
                if (!this.roleId) {
                    this.$refs.authTree.setCheckedKeys([]);
                    return;
                }
                this.loading = true;
                this.buttonAuths = [];
                getCanManageAuthTree(this.roleId).then(res => {
                    if (res.success && res.data) {
                        this.menuData = [res.data];
                    } else {
                        this.menuData = [];
                    }
                    if (this.entity.code === 'default_admin') {
                        this.loading = false;
                        this.$refs.authTree.setCheckedKeys(this.filterCheckKey(this.menuData, 'all'));
                        return;
                    }
                    getSelectedAuthIds(this.roleId).then(res => {
                        if (res.success && res.data && res.data.length > 0) {
                            this.$refs.authTree.setCheckedKeys(this.filterCheckKey(this.menuData, res.data));
                        } else {
                            this.$refs.authTree.setCheckedKeys([]);
                        }
                        this.loading = false;
                    });
                });
            },
            handleSave() {
                const checkedNodes = this.$refs.authTree.getCheckedNodes(false, true);
                console.log(checkedNodes, this.buttonAuths);
                const ids = [];
                checkedNodes.forEach(item => {
                    if (item.code === '/' || item.id === '*') {
                        return;
                    }
                    ids.push(item.id);
                });

                const param = {
                    roleId: this.roleId,
                    authIds: ids.concat(this.buttonAuths)
                };

                addRoleAuthRel(param).then(res => {
                    this.$message.success('操作成功');
                });
            },
            handleReset() {
                this.getDetail();
            }
        }
    };
</script>