<template>
	<view class="page-container">
		<view class="search-box-common">
			<image src="/static/images/search-icon.png" class="search-icon"></image>
			<input placeholder="搜索" placeholder-class="placeholder-class" />
		</view>

		<scroll-view class="scroll-view-index" scroll-y :show-scrollbar="false" @scrolltolower="loadMore">
			<template v-for="(item,index) in list">
				<dynamic-item :form="item" @refresh="getList"></dynamic-item>
			</template>
		</scroll-view>
		<!-- 发布按钮 -->
		<movable-area class="movable-area">
			<movable-view class="add-dynamic-box move-button" :x="area.x" :y="area.y" 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 {
		dynamicList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				area: {
					x: 330,
					y: 600
				}
			}
		},
		components: {
			DynamicItem
		},
		onLoad() {
			this.getList()
			let _this = this;
			uni.$on('hanldeDynamicRefresh', function() {
				_this.getList()
			})
		},
		beforeDestroy() {
			uni.$off('hanldeDynamicRefresh')
		},
		methods: {
			getList() {
				dynamicList(this.queryParams).then(res => {
					console.log(res)
					this.list = res.rows
				})
			},
			loadMore() {

			},
			toPublishPage() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			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: 999;
		pointer-events: none;
		left: 0;
		top: 0;
		.move-button {
			pointer-events: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			pointer-events: auto;
			border-radius: 50%;
		}

	}
</style>