<template>
    <div class="section-role">
        <Scroller ref="scroller" @on-scroll-y="handleScroll">
            <div ref="scrollerContent">
                <RoleNode v-for="(item, index) in list" :key="index" :data="item" :withMembers="withMembers" @handleExpand="handleExpand" @handleChecked="handleChecked" />
                <Load :hasData="!!list.length" :hasMore="hasMore" :loading="loading" @on-load="getRoleList" />
                <Empty v-if="!loading && !hasMore && !list.length" />
            </div>
        </Scroller>
    </div>
</template>

<script>
import Seciton from '../mixins/section'
import RoleNode from './section-role-node'
import Empty from '../../../base/empty/'
import Load from '../../../base/page/'
import axios from 'axios'
import {getRoleMemberList, getRoleList} from '../utils'
export default {
    name: 'YYSectionRole',
    mixins: [Seciton],
    components: {
        RoleNode,
        Load,
        Empty
    },
    inject: ['root'],
    props: {
        withMembers: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleScroll(y) {
            const scrollerHeight = this.$refs.scroller.$el.clientHeight
            const scrollerContentHeight = this.$refs.scrollerContent.offsetHeight
            if ((scrollerContentHeight - (scrollerHeight + y)) < 20 && this.loading == false) {
                this.getRoleList()
            }
        },
        getMemberList(roleId, role, isSelect) {
            role && (role.loading = true)
            const { commonSelectMemberHost, qzId, keyword, language, security, token, tenantId } = this.root
            getRoleMemberList(commonSelectMemberHost, tenantId, qzId, roleId,{
                page: 1,
                size: 9999,
                keyword: keyword || '',
                language: language,
                security: security,
                token: token,
                includeDuty: true
            },).then(res => {
                role.loading = false
                const data = res && res.data;
                data.forEach(member => {
                    member.checked = !!isSelect
                    if (isSelect) {
                        this.$emit('handleSelected', member)
                    }
                })
                this.$set(role, 'children', data)
            }).catch(err => {
                role.loading = false;
                role.expand = false;
            })
        },
        getRoleList() {
            this.loading = true
            const deptIds = (this.root.deptList && this.root.deptList.map((item) => {
                return item.deptId
            }) || []).join(',')
            const {
                commonSelectMemberHost,
                orgId,
                keyword,
                chooseDeptType,
                language,
                security,
                token,
                tenantId
            } = this.root
            getRoleList(commonSelectMemberHost, tenantId, {
               page: this.page,
                size: this.size,
                keyword: keyword || '',
                deptIds: deptIds || orgId,
                type: chooseDeptType,
                language: language,
                security: security,
                token: token,
                includeDuty: true 
            }).then(res => {
                let data = res && res.data || []
                data.forEach(item => {
                    item.expand = false
                    item.checked = false
                    item.loading = false
                    item.type = 6
                    item.id = item.roleId
                    item.name = item.roleName
                    item.children = []
                })
                this.hasMore = !(data.length < this.size)
                this.page++
                this.loading = false
                return this.list = (this.list || []).concat(data)
            }).catch(error => {
                this.handleError()
            })
        },
        handleExpand(expand, data) {
            data.expand = expand
            if (data.children && data.children.length) return
            this.getMemberList(data.roleId, data, false)
        },
        handleChecked(checked, data) {
            if (data.loading) return false
            if (!this.withMembers || data.type === 0) {
                if (checked && 1 + this.root.selectedCount > this.root.limit && this.root.limit != 1) {
                    Message.warning(t('selectMember.maximum'))
                    return false
                }
                data.checked = checked
                this.$emit('handleSelected', data)
                return true
            }
            if (checked && data.groupMemberCount + this.root.selectedCount > this.root.limit) {
                Message.warning(t('selectMember.maximum'))
                return false
            }
            if (data.children && data.children.length) {
                data.checked = checked
                data.children.forEach((item) => {
                    item.checked = checked
                    this.$emit('handleSelected', item)
                })
                return true
            }
            data.expand = true
            this.getMemberList(data.roleId, data, true)
            return true
        }

    },
    created() {
        this.getRoleList()
    }
}
</script>
