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

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