<template>
	<view>
		<view v-if="type === 1">
			<u-empty
				mode="list"
				icon="/static/common/empty_data.png"
				:text="loadStatus === 1 ? loadText : showText"
				v-if="dataList.length < 1">
			</u-empty>
			<view class="loadmore" v-else>
				<u-loadmore :status="loadStatus | statusFilter" />
			</view>
		</view>
		
		<view v-if="type === 2">
			<u-empty
				mode="list"
				icon="/static/common/empty_data.png"
				:text="loadStatus === 1 ? loadText : showText"
				v-if="dataList.length < 1">
			</u-empty>
		</view>
		
		<view v-if="type === 3">
			<u-loading-page :loading-text="loadText" :loading="loadStatus === 1"></u-loading-page>
			<u-empty
				mode="list"
				icon="/static/common/empty_data.png"
				:text="showText"
				v-if="loadStatus === 2">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		filters: {
			statusFilter(val) {
				const MAP = {
					0: 'loadmore',
					1: 'loading',
					2: 'nomore',
				}
				return MAP[val];
			}
		},
		
		props: {
			type: {
				type: Number,
				default: 1, // 1=分页列表，2=普通列表，3=其他/详情
			},
			loadStatus: {
				type: Number,
				default: 0 // 0=未加载=loadmore，1=加载中=loading，2=没有更多数据=nomore
			},
			dataList: {
				type: Array,
				default: () => []
			},
			showText: {
				type: String,
				default: '暂无数据'
			},
			loadText: {
				type: String,
				default: '加载中...'
			}
		},
		data() {
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loadmore {
		padding: 20rpx 0;
		.u-loadmore {
			margin: 0;
		}
	}
</style>
