<template>
	<!-- #ifndef APP-NVUE -->
	<view class="uni-list uni-border-top-bottom">
		<view v-if="border" class="uni-list--border-top"></view>
		<slot />
		<view v-if="border" class="uni-list--border-bottom"></view>
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
		loadmoreoffset="15">
		<slot />
	</list>
	<!-- #endif -->
</template>

<script>
	/**
	 * List 列表
	 * @description 列表组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
	 * @property {String} 	border = [true|false] 		标题
	 */
	export default {
		name: 'uniList',
		'mp-weixin': {
			options: {
				multipleSlots: false
			}
		},
		props: {
			stackFromEnd:{
				type: Boolean,
				default:false
			},
			enableBackToTop: {
				type: [Boolean, String],
				default: false
			},
			scrollY: {
				type: [Boolean, String],
				default: false
			},
			border: {
				type: Boolean,
				default: true
			},
			renderReverse:{
				type: Boolean,
				default: false
			}
		},
		// provide() {
		// 	return {
		// 		list: this
		// 	};
		// },
		created() {
			this.firstChildAppend = false;
		},
		methods: {
			loadMore(e) {
				this.$emit('scrolltolower');
			},
			scroll(e) {
				this.$emit('scroll', e);
			}
		}
	};
</script>
<style lang="scss">
	$uni-bg-color:#ffffff;
	$uni-border-color:#e5e5e5;

	.uni-list {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		background-color: $uni-bg-color;
		position: relative;
		flex-direction: column;
	}

	.uni-list--border {
		position: relative;
		/* #ifdef APP-NVUE */
		border-top-color: $uni-border-color;
		border-top-style: solid;
		border-top-width: 0.5px;
		border-bottom-color: $uni-border-color;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;
		/* #endif */
		z-index: -1;
	}

	/* #ifndef APP-NVUE */

	.uni-list--border-top {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: $uni-border-color;
		z-index: 1;
	}

	.uni-list--border-bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: $uni-border-color;
	}

	/* #endif */
</style>
