<template>
	<view style="height: 100%;" :class="bodyClass">
		<block v-if="list.length>0">
			<slot></slot>
			<loadMore class="more" :status="this[NAME][DEFAULT_PAGE_STATE_NAME]"></loadMore>
		</block>
		<empty :note="noteEmpty" v-else></empty>
	</view>
</template>

<script>
	import {
		buildPagingData,
		pagingDataProcessing,
		DEFAULT_PAGE_DATA_NAME,
		DEFAULT_PAGE_STATE_NAME
	} from 'fellw-uni/js/request.js'

	import empty from './empty-content.vue'
	import loadMore from 'fellw-uni/components/uni-load-more/uni-load-more.vue'

	const NAME = 'data'

	export default {
		components: {
			empty,
			loadMore
		},
		watch: {
			[NAME]: {
				handler() {
					this.$nextTick(() => this.$emit('listDomUpdate'))
				},
				deep: true
			}
		},
		props: ['noteEmpty', 'api', 'bodyClass', 'param'],
		data() {
			return {
				[NAME]: buildPagingData(),
				...{
					DEFAULT_PAGE_DATA_NAME,
					DEFAULT_PAGE_STATE_NAME,
					NAME
				},
				pullCan: true,
				list: []
			}
		},
		mounted() {
			this.getListRequest(true)
		},
		methods: {
			async getListRequest(refresh) {
				const pullCan = this.pullCan
				if (refresh && !pullCan) {
					return
				}
				try {
					await pagingDataProcessing({
						item: this[NAME],
						refresh,
						api: this.api,
						param: this.param
					})
				} catch (e) {
					this.$error(`Load list fail:`, e)
				} finally {
					if (refresh) this.pullCan = true
				}

				const list = this.getList()
				this.list = list
				this.$emit('updateList', this.list)
			},
			getList() {
				return this[NAME][DEFAULT_PAGE_DATA_NAME] || []
			},
			pullDownRefresh() {
				this.getListRequest(true)
			},
			reachBottom() {
				this.getListRequest()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		width: 100%;
	}
</style>
