<!--
通用组件，下拉刷新+上拉加载
-->
<template>
    <div class="widget-refresh-list">
        <van-empty class="refresh-empty" v-if="emptyState" image="search" :description="emptyText" >
            <!-- <van-button class="btn-reset" size="small" round block @click="onRefresh">
                <i solt="icon" class="iconfont icon-reset_light"></i>
                重新加载
            </van-button> -->
        </van-empty>
        <template v-else>
            <van-skeleton :row="15" :row-width="rowWidth" :loading="skeletonLoading" :class="{'fff_bg': ifwhite}">
                <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
                    <van-list
                        ref="widgetList"
                        v-model="listLoading"
                        class="refresh-list"
                        :error.sync="error"
                        :error-text="errorText"
                        :finished="finished"
                        :finished-text="finishedText"
                        :offset="offset"
                        :immediate-check="false"
                        @load="onLoad"
                    >
                        <slot name="list_body" />
                    </van-list>
                </van-pull-refresh>
            </van-skeleton>
        </template>
    </div>
</template>

<script>
export default {
    name: 'L1appLjWidgetRefreshList',
    data() {
        return {
            refreshing: false, // 下拉加载状态
            listLoading: false, // list加载状态
            skeletonLoading: true, // 骨架屏加载
            finished: false, // list全部加载完状态
            emptyState: false, // 空状态
            error: false, // list错误状态
            rowWidth: [240,140,220,270,320,130,240,140,220,270,320,130,240,140,220,270,320,130,240,140]
        };
    },
    props: {
        errorText: {
            type: String,
            default: "请求失败，点击重新加载"
        },
        finishedText: {
            type: String,
            default: "没有更多了"
        },
        offset: { // 滚动条与底部距离小于 offset 时触发load事件
            type: Number / String,
            default: 300,
        },
        emptyText: {
            type: String,
            default: '暂无匹配数据'
        },
        // 骨架是否白色
        ifwhite: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        _autoResetStatus() {
            // this.listLoading = false;
            this.finished = false;
            this.emptyState = false;
            this.error = false;
            console.log('_autoResetStatus this.listLoading :>>', JSON.stringify(this.listLoading));
        },
        /**下拉刷新开始  */
        onRefresh(data) {
            this._autoResetStatus();
            this.listLoading = true;
            this.refreshing = true;
            console.log('组件的onRefresh this.refreshing :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.refreshing));
            this.$emit('onRefresh', data);
        },
        /**单次加载开始 */
        onLoad() {
            console.log(' onLoadthis.listLoading :>>', JSON.stringify(this.listLoading));
            if (this.finished) return false;
            this.listLoading = true;
            this.$emit('onLoad');
        },
        /**单次加载 */
        fnLoading() {
            this._autoResetStatus();
            this.listLoading = true;
            console.log('fnLoading this.listLoading :>>', JSON.stringify(this.listLoading));
        },
        /**骨架屏准备中 */
        fnGotoSkeloading() {
            this._autoResetStatus();
            this.skeletonLoading = true;
            console.log('this.listLoading :>>', JSON.stringify(this.listLoading));
        },
        /**骨架屏就绪 */
        fnReady() {
            this.skeletonLoading = false;
        },
        /**单次加载完成，但无内容 */
        fnLoadedAndEmpty () {
            this.listLoading = false;
            this.emptyState = true;
            this.error = false;
        },
        /**单次加载完成 */
        fnLoaded(type) {
            this.listLoading = false;
            this.emptyState = false;
            this.error = false;
            if (type) {
                /**全部内容加载完成 */
                this.finished = true;
            }
            console.log('this.listLoading :>>', JSON.stringify(this.listLoading));
        },
        /**单次加载失败 */
        fnLoadError() {
            this.listLoading = false;
            this.error = true;
        },
        /**全部内容加载完成 */
        // fnLoadAll() {
        //     this.finished = true;
        // },
        /**下拉刷新完成 */
        fnRefreshed() {
            console.log('this.listLoading :>>', JSON.stringify(this.listLoading));
            this.refreshing = false;
            this.finished = false;
        },
    },
};
</script>

<style lang="less">
    .widget-refresh-list {
        .van-skeleton {
            padding-top: 20px;

            .van-skeleton__row, .van-skeleton__title {
                border-radius: 2px;
            }

            &.fff_bg {
                .van-skeleton__row, .van-skeleton__title {
                    background-color: #fff;
                }
            }
        }
        .van-pull-refresh {
            overflow: unset!important;
        }
    }
</style>