<template>
    <div class="section-team-node-with-dept">
        <TreeNode 
            v-if="data.count"
            @handleExpand="handleDeptExpand"
            @handleChecked="handleDeptChecked"
            showExpand
            showExpandIcon
            showChecked
            :expand="deptExpand"
            :checked="deptChecked">
            <template slot="content">{{t('selectMember.dept')}}</template>
            <template slot="children">
                <div v-for="(dept, index) in (data.deptList || [])" :key="index">
                    <DeptNode 
                        @handleChecked="handleSingleDeptChecked"
                        :showExpand="false"
                        :showExpandIcon="false"
                        :data="dept"
                        :key="index"
                        :withMembers="false" />
                </div>
            </template>
        </TreeNode>
        <template v-else>
            <div v-for="(dept, index) in (data.deptList || [])" :key="index">
                <DeptNode 
                    @handleChecked="handleSingleDeptChecked"
                    :showExpand="false"
                    :showExpandIcon="false"
                    :data="dept"
                    :key="index"
                    :withMembers="false" />
            </div>
        </template>
        <TreeNode 
            v-if="data.count"
            @handleExpand="memberExpand = !memberExpand"
            @handleChecked="handleMemberChecked"
            showExpand
            showExpandIcon
            showChecked
            :expand="memberExpand"
            :checked="memberChecked">
            <template slot="content">{{t('selectMember.member')}}</template>
            <template slot="children">
                <div v-for="(item, index) in data.children" :key="index">
                    <MemberNode 
                        :data="item"
                        :parent="data"
                        @handleChecked="handleSingleMemberChecked" />
                </div>
            </template>
        </TreeNode>
    </div>
</template>
<script>
    /**
     * 内部群节点
     *  */
    import MemberNode from './section-member-node';
    import DeptNode from './section-dept-node';
    import Locale from '../../../../mixins/locale';
    import Node from '../mixins/node';
    import axios from 'axios';

    export default {
        name: 'YYTeamNode',
        mixins: [Node, Locale],
        components: {
            MemberNode,
            DeptNode
        },
        inject: ['root'],
        props: {
            data: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        computed: {
            deptChecked() {
                return !!this.data.deptList && !!this.data.deptList.length && this.data.deptList.every(item => item.checked);
            },
            memberChecked() {
                return !!this.data.children && !!this.data.children.length && this.data.children.every(item => item.checked);
            }
        },
        data() {
            return {
                deptLoading: false,
                deptExpand: false,
                memberExpand: false,
                deptHasLoaded: false,
                deptPage: 1
            }
        },
        methods: {
            getTeamDepts(size = 9999) {
                const { host, qzId, language, token, withSecurity } = this.root;
                this.data.loading = true;
                return axios.get(`${host}/cooperation/rest/v1/candidate/${qzId}/team/${this.data.id}/depts`, {
                    params: {
                        page: this.deptPage,
                        size,
                        language,
                        token,
                        withSecurity
                    }
                }).then(res => {
                    if (res && res.data) {
                        this.deptHasLoaded = true;
                        res.data.forEach(item => {
                            item.checked = false
                            item.contain = false
                        })

                        return res.data;
                    }
                    return [];
                }).finally(() => {
                    this.data.loading = false;
                })
            },
            handleMemberChecked(checked) {
                this.$emit('member-checked', checked)
            },
            handleDeptChecked(checked) {
                const checkAllDepts = () => {
                    this.data.deptList.forEach(item => {
                        item.checked = checked;
                        this.root.handleSelected(item);
                        if (!checked) {
                            this.data.checked = false;
                        }
                    })
                }

                if (this.deptHasLoaded) {
                    checkAllDepts();
                    return;
                }
                this.getTeamDepts().then(deptList => {
                    this.$set(this.data, 'deptList', deptList)
                    if(checked && deptList.length + this.root.selectedCount > this.root.limit) {
                        Message.warning(this.t('selectMember.maximum'))
                        return false
                    }
                    checkAllDepts();
                })
            },
            handleSingleDeptChecked(checked, data) {
                if(checked && 1 + this.root.selectedCount > this.root.limit && this.root.limit != 1) {
                    Message.warning(this.t('selectMember.maximum'))
                    return false
                }
                data.checked = checked;
                if (!checked) {
                    this.data.checked = false;
                }
                this.root.handleSelected(data);
            },
            handleSingleMemberChecked(checked, data) {
                if(checked && 1 + this.root.selectedCount > this.root.limit && this.root.limit != 1) {
                    Message.warning(this.t('selectMember.maximum'))
                    return false
                }
                data.checked = checked;
                this.root.handleSelected(data);
            },
            handleDeptExpand(expand) {
                if (this.deptHasLoaded) {
                    this.deptExpand = expand;
                    return;
                }
                this.getTeamDepts().then(deptList => {
                    this.$set(this.data, 'deptList', deptList);
                })
            }
        }
    }
</script>

