<template>
    <Scroller ref="scroller"> 
        <MemberNode 
            v-for="(item, index) in members"
            :key="index"
            :data="item"
            @handleChecked="handleChecked" />
        <Empty v-if="!loading && !hasMore && !members.length"/>
        <Page 
            v-if="onLoad"
            @on-load="handleLoad"
            :hasMore="hasMore"
            :hasData="!!members.length"
            :loading="loading"/>
    </Scroller>
</template>
<script>
    import MemberNode from './section-member-node'
    import Section from '../mixins/section'
    import Empty from '../../../base/empty/'
    import Page from '../../../base/page/'
    import { deepCopy } from '../../../../utils/assist'

    export default {
        name: 'YYSectionCustomMember',
        mixins: [Section],
        components: {
            MemberNode,
            Empty,
            Page
        },
        props: {
            data: {
                type: Array,
                default: function() {
                    return []
                }
            },
            onLoad: {
                type: Function
            }
        },
        data() {
            return {
                members: deepCopy(this.data),
                loading: false,
                hasMore: true
            }
        },
        computed: {
            isAllChecked() {
                return this.members.length && this.members.every(data => data.checked)
            }
        },
        methods: {
            handleLoad() {
                if(!this.onLoad) return
                this.loading = true
                this.onLoad((data, hasMore) => {
                    data.forEach((member)=>{
                        member.checked = member.checked || false
                        member.type = 0
                        if(member.checked) {
                            this.handleChecked(member.checked, member)
                        }
                    })
                    this.members = data
                    this.loading = false
                    this.hasMore = !!hasMore
                })
            },
            handleSelectAll(checked) {
                return this.members.every(data => this.handleChecked(checked, data));
            }
        },
        created() {
            this.handleLoad()
        }
    }
</script>
