<template>
    <div class="section-member">
        <div class="section-member-fixed">
            <a href="javascript:void(0)" 
                :class="{'active':curActiveChar==''}"
                @click="setChar('',index)">
                {{t('selectMember.all')}}
            </a>
            <a href="javascript:void(0)" 
                :class="{'active':curActiveChar==String.fromCharCode(64+num)}"
                @click="setChar(String.fromCharCode(64+num), index)"
                v-for="(num, index) in 26" :key="index">{{String.fromCharCode(64+num)}}</a>
        </div>
        <Scroller ref="scroller" @on-scroll-y="handleScroll">
            <div ref="scrollerContent">
                <MemberNode 
                    v-for="(item, index) in list"
                    :key="index"
                    :data="item"
                    @handleChecked="handleChecked" />
                <Load 
                    :hasData="!!list.length"
                    :hasMore="hasMore"
                    :loading="loading" 
                    @on-load="getMemberList"/>
                <Empty v-if="!loading && !hasMore && !list.length"/>
            </div>
        </Scroller>
    </div>
</template>
<script>
    import MemberNode from './section-member-node'
    import Section from '../mixins/section'
    import Load from '../../../base/page/'
    import Empty from '../../../base/empty/'
    import Locale from '../../../../mixins/locale'
    import axios from 'axios'

    export default {
        name: 'YYSectionMember',
        mixins: [Section, Locale],
        components: {
            MemberNode,
            Load,
            Empty
        },
        inject: ['root'],
        data() {
            return {
                curActiveChar: ''
            }
        },
        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.getMemberList()
                }
            },
            getMemberList() { // 拉取当前组织树
                this.loading = true
                const deptIds = (this.root.deptList && this.root.deptList.map((item)=>{
                    return item.deptId
                }) || []).join(',')
                const { host, qzId, orgId, keyword, chooseDeptType, language, security, token } = this.root
                axios.get(`${host}/cooperation/rest/v1/candidate/${qzId}/members`, {
                    params: {
                        page: this.page,
                        size: this.size,
                        keyword: keyword || '',
                        firstLetter: this.curActiveChar,
                        deptIds: deptIds || orgId,
                        type: chooseDeptType,
                        language: language,
                        security: security,
                        token: token,
                        includeDuty: true
                    },
                    withCredentials: true
                }).then(res => {
                    let data = res && res.data || []
                    data.forEach(item => {
                        item.checked = false
                    })
                    this.hasMore = !(data.length < this.size)
                    this.page++
                    this.loading = false
                    return this.list = (this.list || []).concat(data)
                }).catch(error => {
                    this.handleError()
                })
            },
            initMemberList() {
                this.page = 1
                this.list = []
                this.hasMore = true
                this.$refs.scroller.updateScroll()
            },
            setChar(chara) {
                this.curActiveChar = chara
                this.$refs.scroller.scrollTo(0)
                this.initMemberList()
                this.getMemberList()
            }
        },
        created() {
            this.getMemberList()
        }
    }
</script>
