<template>
	<ciy-header ref="header" title="ciy-listend组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">列表底部显示</view>
			<view class="content">
				<view class="tip">
					无数据，显示无数据图片和提示语。<br />
					有数据且全部加载，显示到底部效果。<br />
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">listlen</view>
				<view class="tip">
					列表数据条数。
				</view>
				<view class="hr"></view>
				<view class="prp">pageno</view>
				<view class="tip">
					已加载的页数<br />
					-1，已全部加载。
				</view>
				<view class="hr"></view>
				<view class="prp">nodatamsg</view>
				<view class="tip">
					无数据提示语。
				</view>
				<ciy-input bb v-model="props.nodatamsg"></ciy-input>
				<view class="hr"></view>
				<view class="prp">nodataimg</view>
				<view class="tip">
					无数据图片链接。<br />
				</view>
				<ciy-input bb v-model="props.nodataimg"></ciy-input>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@show</view>
				<view class="tip">
					组件在可见区域内事件<br />
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<button class="btn" @tap="err2('')">无数据</button>

		<view v-for="(item,index) in list" :key="item.id">
			<view style="height:5em;text-align: center;">
				{{item.name}}
			</view>
		</view>
		<ciy-listend :page="pageno" :listlen="list.length" :nodataimg="props.nodataimg" :nodatamsg="props.nodatamsg" @show="chglog('show', $event)"></ciy-listend>
	</view>
</template>

<style scoped>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				pageno: 0,
				list: [],
				props: {
					nodataimg: this.file_stor('/img/mbnone.png'),
					nodatamsg: '无记录'
				}
			}
		},
		onLoad() {
			this.getlist();
		},
		onReachBottom(b) {
			this.getlist();
		},
		onPullDownRefresh(b) {
			this.pageno = 0;
			this.getlist();
		},
		methods: {
			err2(msg) {
				this.props.nodatamsg = msg;
				this.list = [];
				this.pageno = -1;
			},
			getlist() {
				if (this.pageno == -1)
					return;
				if (this.pageno >= 5) {
					this.pageno = -1;
					return;
				}
				this.pageno++;
				for (var i = 0; i < 10; i++)
					this.list.push({
						name: this.pageno + '.' + i
					});
			},
		}
	}
</script>