<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" @scroll="onScroll" :scroll-top="scrollTop"> -->
		<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" @refreshCurrent="refreshCurrent"></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,
		dynamicDetail
	} from '@/api/api.js'
	export default {
		data() {
			return {
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				area: {
					x: 620,
					y: 1060
				},
				emotions,
				scrollTop: 0
			}
		},
		components: {
			DynamicItem,
			ListEmpty
		},
		onLoad() {
			this.$store.dispatch('GetInfo').then(res => {
				if (res.code == 200) {
					this.getList()
					let _this = this;
					uni.$on('hanldeDynamicRefresh', function() {
						_this.list = [];
						_this.queryParams.pageNum = 1;
						_this.getList()
					})
				}
				if (res.code == 401) {
					window.location = res.data
				}
			})
		},
		beforeDestroy() {
			uni.$off('hanldeDynamicRefresh')
		},
		onPullDownRefresh() {
			this.refreshContentList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			getList() {
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				const currentScrollTop = this.scrollTop;
				dynamicList(this.queryParams).then(res => {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					setTimeout(() => {
						this.scrollTop = currentScrollTop;
					}, 0);
				}).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) {
				console.log(e)
				this.area.y = e.detail.y;
				this.area.x = e.detail.x
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			// 指定更新
			refreshCurrent(momentId) {
				dynamicDetail(momentId).then(res => {
					if (res.code == 200) {
						const targetIndex = this.list.findIndex(item => item.id === momentId);
						if (targetIndex === -1) return; // 未找到则退出
						// 使用 Vue.set 或展开运算符确保响应式
						this.list.splice(targetIndex, 1, {
							...res.data
						});
					}
				})
			}
		}
	}
</script>

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

	.movable-area {
		position: fixed;
		height: calc(100vh - 3.75rem);
		width: 100%;
		z-index: 998;
		pointer-events: none;
		left: 0;
		top: 0;

		.move-button {
			pointer-events: auto;

			pointer-events: auto;
		}

	}
</style>