<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 class="add-dynamic-box" @click="toPublishPage" :style="{ left: iconLeft + 'px', top: iconTop + 'px' }"
			@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<image class="icon" src="/static/images/publish-icon.png"></image>
		</view>
	</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,
				iconLeft: 310,
				iconTop: 480,
				isMoving: false
			}
		},
		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
						});
					}
				})
			},
			// 触摸开始
			handleTouchStart(e) {
				this.isMoving = true;
				// 记录触摸起点（相对于屏幕）
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
				// 记录图标当前位置
				this.initialLeft = this.iconLeft;
				this.initialTop = this.iconTop;
			},
			
			// 触摸移动
			handleTouchMove(e) {
				if (!this.isMoving) return;
				// 防止页面滚动
				e.preventDefault();
			
				// 计算当前触摸位置与起点的偏移量
				const moveX = e.touches[0].clientX - this.startX;
				const moveY = e.touches[0].clientY - this.startY;
			
				// 计算新位置（初始位置 + 偏移量）
				let newLeft = this.initialLeft + moveX;
				let newTop = this.initialTop + moveY;
			
				// 限制图标在屏幕内（可选）
				const windowWidth = uni.getSystemInfoSync().windowWidth;
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				const iconSize = 50; // 图标宽高（根据实际调整）
				// 左右边界
				newLeft = Math.max(0, Math.min(newLeft, windowWidth - iconSize));
				// 上下边界
				newTop = Math.max(0, Math.min(newTop, windowHeight - iconSize));
			
				// 更新位置
				this.iconLeft = newLeft;
				this.iconTop = newTop;
			},
			
			// 触摸结束
			handleTouchEnd() {
				this.isMoving = false;
			}
		}
	}
</script>

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