<template>
    <div :class="prefixCls">
        <span :class="`${prefixCls}-more`" v-if="hasMore" @click="handleLoad">
            {{loading ? t('page.loading') : t('page.loadMore')}}
            <Icon type="loading" v-if="loading"/>
            <Icon type="arrow-down" v-else />
        </span>
        <span v-if="!hasMore && hasData && showNoMoreTip">
            {{noMoreText}}
        </span>
    </div>
</template>
<script>
    import Locale from '../../../mixins/locale'
    import Icon from '../../base/icon/'
    import { t } from '../../../locale/'
    const prefixCls = 'yy-page'
    export default {
        name: 'YYPage',
        mixins: [Locale],
        components: {
            Icon
        },
        props: {
            hasMore: {
                type: Boolean,
                default: true
            },
            loading: {
                type: Boolean,
                default: false
            },
            hasData: {
                type: Boolean,
                default: false
            },
            showNoMoreTip: {
                type: Boolean,
                default: true
            },
            error: {
                type: Boolean,
                default: false
            },
            noMoreText: {
                type: String,
                default: function() {
                    return t('page.noMore')
                }
            }
        },
        data() {
            return {
                prefixCls: prefixCls
            }
        },
        methods: {
            handleLoad() {
                if (!this.loading) {
                    this.$emit('on-load')
                }
            }
        }
    }
</script>
