<template>
    <view v-if="show">
        <view
            class="u-load-more-wrap"
            :style="'background-color: ' + bgColor + '; margin-bottom: ' + (marginBottom + 'rpx') + '; margin-top: ' + (marginTop + 'rpx') + ';height: 100rpx'"
        >
            <view v-if="line" style="width: 100rpx; border-bottom: 1rpx dashed #d4d4d4"></view>
            <!-- 加载中和没有更多的状态才显示两边的横线 -->
            <view :class="'u-load-more-inner ' + (status == 'loadmore' || status == 'nomore' ? 'u-more' : '')">
                <view class="u-loadmore-icon-wrap">
                    <van-loading class="u-loadmore-icon" :color="iconColor" type="spinner" size="18px" v-if="status == 'loading' && icon"></van-loading>
                </view>
                <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
                <view
                    :class="'u-line-1 ' + (status == 'nomore' && isDot == true ? 'u-dot-text' : 'u-more-text')"
                    :style="
                        'color: ' +
                        (status != 'nomore' ? loadingColor : noMoreColor) +
                        '; font-size: ' +
                        (fontSize + 'rpx') +
                        '; position: relative; z-index: 1; background-color: ' +
                        bgColor
                    "
                    @click="loadMore"
                >
                    {{ showLoadMoreText }}
                </view>
            </view>
            <view v-if="line" style="width: 100rpx; border-bottom: 1rpx dashed #d4d4d4"></view>
        </view>
    </view>
</template>
<script>
const app = getApp();
export default {
    data() {
        return {
            // 粗点
            dotText: '●'
        };
    },
    options: {
        styleIsolation: 'shared'
    },
    // 组件的对外属性，是属性名到属性设置的映射表
    props: {
        show: {
            type: Boolean,
            default: true
        },
        // 组件背景色
        bgColor: {
            type: String,
            default: 'transparent'
        },
        line: {
            type: Boolean,
            default: true
        },
        // 是否显示加载中的图标
        icon: {
            type: Boolean,
            default: true
        },
        // 字体大小
        fontSize: {
            type: String,
            default: '28'
        },
        // 字体颜色
        loadingColor: {
            type: String,
            default: '#606266'
        },
        // 没有更多字体颜色
        noMoreColor: {
            type: String,
            default: 'rgba(0,0,0,0.35)'
        },
        // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        status: {
            type: String,
            default: 'loadmore'
        },
        // 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
        iconType: {
            type: String,
            default: 'circle'
        },
        // 显示的文字
        loadText: {
            type: Object,
            default: () => ({
                loadmore: '上滑加载更多',
                loading: '正在加载',
                nomore: '没有更多了'
            })
        },
        // 在“没有更多”状态下，是否显示粗点
        isDot: {
            type: Boolean,
            default: false
        },
        // 加载中显示圆圈动画时，动画的颜色
        iconColor: {
            type: String,
            default: '#528EF7'
        },
        // 上边距
        marginTop: {
            type: Number,
            default: 0
        },
        // 下边距
        marginBottom: {
            type: Number,
            default: 0
        },
        // 高度，单位rpx
        height: {
            type: String,
            default: 'auto'
        }
    },
	computed: {
		cricleStyle(circleColor) {
		  return {
		    "border-color": "#e5e5e5 #e5e5e5 #e5e5e5 ${circleColor}"
		  }
		},
		
		// 显示的提示文字
		showLoadMoreText() {
			let { status,loadText,isDot,dotText } = this
			var text = '';
			if(status == 'loadmore') text = loadText.loadmore;
			else if(status == 'loading') text = loadText.loading;
			else if(status == 'nomore' && isDot) text = dotText;
			else text = loadText.nomore;
			return text;
		}
	},
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    // 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
    methods: {
        // 在组件实例进入页面节点树时执行
        attached: function () {},

        loadMore() {
            const { status } = this;
            // 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
            if (status == 'loadmore') {
                this.$emit('loadmore');
            }
        }
    },
    created: function () {}
};
</script>
<style>
/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.u-load-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-load-more-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12rpx;
}

.u-more {
    position: relative;
    display: flex;
    justify-content: center;
}

.u-dot-text {
    font-size: 28rpx;
}

.u-loadmore-icon-wrap {
    margin-right: 8rpx;
}

.u-loadmore-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
