<template>
    <div class="nus_pullupload"
        v-if="isSupport">
        <div class="nu_before-trigger"
            v-if="!isLoading">
            <slot name="hook_loadText"
                :nameText="myNameText"
                :state="state">
                <nu-textl :nameText="myNameText"></nu-textl>
            </slot>
        </div>
        <div class="nu_after-trigger" v-else>
            <slot name="hook_loading">
                <nu-loadingc
                    :size="'20px'"></nu-loadingc>
            </slot>
        </div>
    </div>
</template>

<script>
import { STATE_TYPE } from '../basement/constants';
import NuLoadingc from '../../../widget/loading/loadingc';
import LayoutTmp from '../../_comm/LayoutTmp';
import NuTextl from '../../../widget/text/textl';
export default {
    extends: LayoutTmp,
    components: {
        NuLoadingc,
        NuTextl
    },
    props: {
        /**
         * 是否支持上拉加载
         */
        isSupport: {
            type: Boolean | Object,
            default: true
        },
        /**
         * 上拉加载状态
         */
        state: {
            type: String,
            default: STATE_TYPE.READY
        },
        /**
         * 有更多数据的显示文案
         */
        moreText: {
            type: String,
            default: 'load more'
        },
        /**
         * 没有更多数据的显示文案
         */
        noMoreText: {
            type: String,
            default: 'No more data'
        }
    },
    computed: {
        /**
         * 是否处于loading状态
         * @returns {Boolean} 返回是否处于loading状态
         */
        isLoading () {
            const _that = this;
            return _that.state == STATE_TYPE.LOADING;
        },
        /**
         * 显示的文案
         * @returns {String} 返回显示的文案
         */
        myNameText () {
            const _that = this;
            let _res;
            switch (_that.state) {
                case STATE_TYPE.NO_MORE:
                    _res = _that.noMoreText;
                    break;
                case STATE_TYPE.COMPLETE:
                case STATE_TYPE.READY:
                    _res = _that.moreText;
                    break;
            }
            return _res || '';
        }
    }
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_pullupload {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    .nu_before-trigger {
        width: 100%;
    }
    .nu_after-trigger {
        font-size: 0;
    }
}
</style>
