<template>
	<view class="page-container">
		<view class="search-box-common">
			<image src="/static/images/search-icon.png" class="search-icon" @click="refreshContentList"></image>
			<input placeholder="搜索" style="width: 100%;" v-model="queryParams.content" @keypress.enter="refreshContentList"  placeholder-class="placeholder-class" />
		</view>

		<scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" v-if="list.length>0"
			@scrolltolower="loadMore">
			<template v-for="(item,index) in list">
				<dynamic-item :form="item" @refresh="refreshContentList"></dynamic-item>
			</template>
		</scroll-view>
		<scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" v-else>
			<list-empty></list-empty>
		</scroll-view>
		<!-- 发布按钮 -->
		<movable-area class="movable-area">
			<movable-view class="add-dynamic-box move-button" :x="area.x+'rpx'" :y="area.y + 'rpx'" direction="all" @change="onChange"
				damping="30" @click="toPublishPage">
				<image class="icon" src="/static/images/publish-icon.png"></image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import DynamicItem from '@/components/Dynamic-Item.vue'
	import ListEmpty from '@/components/ListEmpty.vue';
	import emotions from '@/utils/emjo';
	import {
		dynamicList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				area: {
					x: 620,
					y: 1060
				},
				emotions
			}
		},
		components: {
			DynamicItem,
			ListEmpty
		},
		onLoad() {
			this.getList()
			let _this = this;
			uni.$on('hanldeDynamicRefresh', function() {
				_this.list = [];
				_this.queryParams.pageNum = 1;
				_this.getList()
			})
		},
		beforeDestroy() {
			uni.$off('hanldeDynamicRefresh')
		},
		onPullDownRefresh() {
			this.refreshContentList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			getList() {
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				dynamicList(this.queryParams).then(res => {
					this.list = [...this.list, ...res.rows]
					
					this.total = res.total
				}).finally(() => {
					uni.hideLoading()
				})
			},

			loadMore() {
				if (this.list.length < this.total) {
					this.queryParams.pageNum += 1;
					this.getList()
				}
			},
			toPublishPage() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			// 下拉刷新
			refreshContentList() {
				this.list = [];
				this.queryParams.pageNum = 1;
				this.getList();
			},
			toPKDetailPage() {
				uni.navigateTo({
					url: '/pages/pk-detail/pk-detail'
				})
			},
			onChange(e) {
				this.area.y = e.detail.y;
				this.area.x = e.detail.x
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/styles/index.scss';

	.movable-area {
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 998;
		pointer-events: none;
		left: 0;
		top: 0;

		.move-button {
			pointer-events: auto;
		
			pointer-events: auto;
		}

	}
</style>