<template>
    <div class="section-role-node">
        <TreeNode height="auto"
            :showExpand="withMembers && !!data.userNum"
            :showExpandIcon="withMembers && !!data.userNum" 
            :showChecked="withMembers ? !!data.userNum && root.limit > 1 : true"
            :checked="checked" 
            :loading="data.loading" 
            :expand="data.expand" 
            @handleExpand="handleExpand" 
            @handleChecked="handleChecked">
            <template slot="content">
                <div class="section-role-node-content">
                    <div class="section-role-node-content-name">{{this.data.roleName + (this.root.showRoleCode ? `（${this.data.roleCode}）` : '')}}</div>
                </div>
            </template>
            <template slot="children" v-if="data.children && data.children.length">
                <MemberNode v-for="(item, index) in data.children" :key="index" :data="item" :parent="data" @handleChecked="handleChecked" />
            </template>
        </TreeNode>
    </div>
</template>

<script>
import Node from '../mixins/node';
import MemberNode from './section-member-node';
export default {
    name: 'YYRoleNode',
    mixins: [Node],
    inject: ['root'],
    components: {
        MemberNode
    },
    props: {
        data: {
            type: Object,
            default () {
                return {}
            }
        },
        withMembers: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    computed: {
        checked() {
            if (this.withMembers) {
                const even = this.data.children.every(item => {
                    return item.checked
                })
                return this.data.children.length ? even : false
            }
            const data = this.root.selected.role['m' + this.data.roleId]
            this.data.checked = !!data
            return !!data
        }
    }

}
</script>
