<template>
	<cu-custom bgColor="bg-white" :isBack="true">
		<template #backText></template>
		<template #content>朋友圈</template>
	</cu-custom>
	<!-- #ifdef APP-PLUS -->
	<scroll-view scroll-y @scrolltolower="scrollbot" :lower-threshold="0" refresher-enabled="true" :refresher-triggered="refreshing"
			:refresher-threshold="50" @refresherrefresh="onRefresh" style="height: 88vh;">
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<scroll-view scroll-y @scrolltolower="scrollbot" :lower-threshold="0" refresher-enabled="true" :refresher-triggered="refreshing"
			:refresher-threshold="50" @refresherrefresh="onRefresh" style="height: 93vh;">
	<!-- #endif -->
		<view>
			<view class="im-friend-header">
				<view class="im-friend-bg">
					<image class="im-friend-image" src="/static/image/user-card-bg.jpg" style="width: 750rpx;height: 460rpx;"></image>
				</view>
				<view class="im-user im-flex im-justify-content-start align-center">
					<text class="text-white mr-5">{{name}}</text>
					<image class="radius-10" style="width:120rpx;height:120rpx" :src="urlimg" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="viewtop" v-if="userInfo.user_id==userid">
			<view class="flex view_mar">
				<view class="view_text">今天</view>
				<view class="view_icons">
					<uni-icons @tap="tomoments" type="camera-filled" size="30" color="#8a8a8a" style="padding: 30px;"></uni-icons>
				</view>
			</view>
		</view>
		
		<view v-for="(yearGroup, year) in groupedList" :key="year" class="year-group">
			<!-- 年份标题 -->
			<view class="year-title" @click="toggleYear(year)">
				<text class="year-text">{{ year }}年</text>
			</view>
		
			<!-- 动态内容（展开时显示） -->
			<view v-if="!collapsedYears.includes(year)" class="moments-list">
				<view v-for="(item, index) in yearGroup" :key="item.id" class="moment-item" @click="JumpDetails(item.id)">
					<view class="meta-info" style="width: 120rpx;">
						<text class="time">{{ formatTime(item.create_time) }}</text>
					</view>
					<view class="content1">
						<view v-if="item.files" v-for="(items, indexs) in item.files" :key="indexs">
							<view v-if="items.type==1"><image :src="configurl+items.src" :data-src="configurl+items.src" class="post-image" mode="aspectFill" @tap.stop="previewImage"/></view>
							<view v-if="items.type==2&&items.privacy">
								<view class='course-video' style="width: 80px;height: 90px;">
									<view class="relative-shadow" @tap.stop="handlePlay(items)">
										<view class="cuIcon-video icon-center f-28 c-white"></view>
										<!-- <view class="video-duration f-10 c-white" v-if="item.extends && item.extends.duration">{{$util.videoFormatTime(item.extends.duration)}}</view> -->
									</view>
									<im-image v-if="configurl+items.privacy" :src="configurl+items.privacy"></im-image>
								</view>
								
								<!-- <image :src="configurl+items.privacy" :data-src="configurl+items.privacy" class="post-image1" mode="aspectFill" @tap.stop="previewImage"/> -->
							</view>
						</view>
						<view style="margin-left: 20rpx;width: 320rpx;" class="container">
							<mp-html container-style="overflow: hidden;display:inline;word-break: break-word;" :content="emojiToHtml(item.content)"/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { useloginStore } from '@/store/login'
	import config from '@/common/config.js'
	import {chat} from '@/mixins/chat.js'
	import imImage from '@/components/message/im-image.vue';
	
	const loginStore = useloginStore()
	export default {
		components: {
			imImage
		},
		mixins: [chat],
		data() {
			return {
				page: 1,
				limit: 20,
				list: [],
				// groupedList: {},
				collapsedYears: [],
				status: 'more', //状态
				refreshing: false,
				configurl:config.apiUrl,
				urlimg:'',
				name:'',
				userid:'',
				//显示的状态
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中....',
					contentnomore: '没有更多咯'
				},
				userInfo:loginStore.userInfo,
			}
		},
		computed: {
			// 计算属性保持不变...
			groupedList() {
				return this.groupDataByYear(this.list)
			}
		},
		// watch: {
		// 	list: {
		// 		handler(newVal) {
		// 			this.groupedList = this.groupDataByYear(newVal)
		// 		},
		// 		immediate: true,
		// 		deep: true
		// 	}
		// },
		onLoad(val) {
			this.urlimg = val.avatar
			this.name = val.realname
			this.userid = val.user_id
		},
		onShow() {
			if(this.userInfo.user_id==this.userid){
				this.init()
			}else{
				this.init(this.userid)
			}
		},
		methods: {
			JumpDetails(id){
				uni.navigateTo({
					url:`/pages/compass/friendscircledetails?posts_id=${id}&userid=${this.userid}`
				})
			},
			tomoments(){
				uni.navigateTo({
					url:'/pages/compass/sendtoMoments'
				})
			},
			formatTime(timeStr) {
				const date = new Date(timeStr)
				return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
			},
			groupDataByYear(data) {
				return data.reduce((acc, item) => {
					const year = new Date(item.create_time).getFullYear()
					if (!acc[year]) acc[year] = []
					acc[year].push(item)
					return acc
				}, {})
			},
			previewImage(e) {
			    //预览图片
			    var current = e.target.dataset.src
			    uni.previewImage({
			        current: current,
			        urls: [current]
			    })
			},
			init(id){
				if (this.page > 1) {
					this.page = 1
				}
				let params = {page: this.page,limit: this.limit,friend_user_id: id?+id:''}
				this.status = 'loading'; // 加载中
				this.$api.compaApi.myPosts(params).then(res => {
					res.data.forEach((res) => {
						const [latitudeStr, longitudeStr] = res.location.split('+');
						const location = {
							latitude: +latitudeStr,
							longitude: +longitudeStr
						};
						res.location = location
					})
					if (this.page == 1) {
						this.list.length = 0
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data);
					}
					// 判断是否还有更多数据
					if (res.data.length < res.count) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 还有更多数据
					}
				})
			},
			onRefresh() {
				this.page = 1
				// this.wechatMomentsList()
				if (this.refreshing) return;
				this.refreshing = true;
				setTimeout(() => {
					this.refreshing = false;
				}, 1000)
			},
			scrollbot(){
				if (this.status == 'noMore') {
					return;
				}
				this.page++
				// this.wechatMomentsList()
				// console.log('已触发底部事件');
			},
		}
	}
</script>

<style scoped lang="scss">
.im-friend-header{
	width:100%;height:400rpx;position: relative;
	.im-friend-bg{
		width:100%;height:400rpx;overflow: hidden;
		.im-friend-image{
			width:100%;height:400rpx;
		}
	}
}
.im-user{
	position: absolute;
	right:60rpx;
	top:210rpx;
	overflow: hidden;
}
.icon{
	top: -440rpx;
	left: -170rpx;
	width: 400rpx;
	height: 400rpx;
	position: absolute;
	border-radius: 10rpx;
	background-color: #fff;
	box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);
	
	.im-emoji-item{
		padding:22rpx;
	}
}
.viewtop{
	padding: 0px 30rpx;
	
	.view_mar{
		margin-top: 100rpx;
		
		.view_text{
			font-size: 34rpx;
			font-weight: bold;
		}
		.view_icons{
			display: flex;
			margin-left: 40rpx;
			align-items: center;
			justify-content: center;
			background-color: #c3c3c3;
		}
	}
}
.year-group {
	padding: 0px 30rpx;
	margin-top: 40rpx;
	
	.year-title{
		font-size: 38rpx;
	}
	
	.moment-item{
		display: flex;
		margin-top: 40rpx;
		
		.meta-info{
			font-size: 36rpx;
			margin-right: 40rpx;
			margin-left: 20rpx;
		}
	}
}
.content1{
	display: flex;
	
	.post-image{
		width: 160rpx;
		height: 160rpx;
	}
	.post-image1{
		width: 160rpx;
		height: 160rpx;
	}
}
.course-video{
	overflow: hidden;
	position: relative;
}
.relative-shadow{
	z-index:1;
	width:100%;
	height:100%;
	position: absolute;
	background: #8383833d;
}
.icon-center{
	position: absolute;
	top: 50%;
	z-index: 4;
	transform: translate(-50%, -50%);
	left: 50%;
	padding: 0 4rpx 0 6rpx;
}
.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 根据行高计算，约5行（假设行高20px） */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100px; /* 最大高度限制 */
}
</style>