<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 @click="onicons" :style="{paddingBottom: paddingB+'px'}">
			<view class="im-friend-header">
				<view class="im-friend-bg">
					<image class="im-friend-image" src="/static/image/user-card-bg.jpg" mode="widthFix"></image>
				</view>
				<view class="im-user im-flex im-justify-content-start align-center">
					<text class="text-white mr-5">{{userInfo.realname}}</text>
					<image class="radius-10" style="width:120rpx;height:120rpx" :src="userInfo.avatar" mode="widthFix"></image>
				</view>
				<view style="position: absolute;top: 15px;right: 18px;" @click="tomoments">
					<image class="radius-10" style="width:50rpx;height:50rpx" src="/static/image/moments.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="text-center" style="background-color: #fff;padding: 10px;" @click="tonotice" v-if="notice>0">
				<view style="width: 100px;height: 30px;background-color: #f0f0f0;line-height: 30px;margin: auto;border-radius: 5px;color: #6b72ff;">{{notice}}条新信息</view>
			</view>
			<view v-for="(item,index) in list" :key="index">
				<view class="cu-card dynamic no-card">
					<view class="cu-item shadow">
						<view class="cu-list menu-avatar">
							<view class="cu-item" style="padding-top: 20px;">
								<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.user.avatar+')'}]"></view>
								<view class="content flex-sub">
									<view>{{item.user.nickname}}</view>
									<view class="text-gray text-sm flex justify-between">
										{{item.create_time}}
									</view>
								</view>
							</view>
						</view>
						<view class="text-content" style="word-break: break-word;" v-if="contenthtml(item.content)" @click="handleLink(item.content)" v-html="item.content"></view>
						<view class="text-content" style="word-break: break-word;" v-html="item.content" v-else></view>
						
						<view class="grid" style="margin: 0px 24rpx;">
							<view class="grid" style="margin: 2rpx 0px;padding: 0px 8rpx;" v-for="(itemss,indexs) in item.files" :key="indexs">
								 <!-- flex-sub -->
								<view class="bg-img" v-if="itemss.type==1">
									<image :src="apiUrl+itemss.src" mode="aspectFill" style="width: 200rpx;height: 200rpx;" :data-src="apiUrl+itemss.src" @tap="previewImage"></image>
								</view>
								<view class='course-video' :style="item.files ? $util.imageCoverStyle(270,480) : ''" v-if="itemss.type==2">
									<view class="relative-shadow" @tap="handlePlay(itemss)" style="">
										<view class="cuIcon-video icon-center f-28 c-white"></view>
									</view>
									<im-image style="position: absolute;top: 0px;" :src="apiUrl+itemss.privacy" ></im-image>
									<!-- :info="item.files" -->
								</view>
							</view>
						</view>
						<view v-if="item.location_address" @tap="openLocation(item.location)" class="im-location-msg im-flex im-rows im-nowrap im-align-items-center radius-8 pd-10">
							<view class="f-20 cuIcon-location pr-5"></view>
							<view>
								<view class="f-10 mb-5">{{item.location_address}}</view>
								<!-- <view class="c-999 f-12">{{item.extends && item.extends.address}}</view> -->
							</view>
							
						</view>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view class="text-gray text-sm padding" style="color: #383bff;" v-if="item.user_id==userInfo.user_id">{{item.privacy_describe == '公开'?'':item.privacy_describe}}</view>
							<view v-else></view>
							<view class="text-gray text-sm text-right padding">
								<!-- <text class="cuIcon-attentionfill margin-lr-xs"></text> 10 -->
								<!-- +item.is_like -->
								<text @click="onLike(item.id)" :class="['cuIcon-appreciatefill', item.is_like === 1 ? 'text-red' : 'margin-lr-xs']"></text> {{item.likes.length}}
								<text @click="onComment(index)" class="cuIcon-messagefill margin-lr-xs"></text> {{item.comment.length}}
								<text v-if="item.user_id==userInfo.user_id" class="cuIcon-delete" style="margin-left: 5px;" @click="Delete(item.id)">删除</text>
							</view>
						</view>
						
						<view v-show="numindex === index&&boll" style="margin: 5px 15px 5px 15px;position: relative;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);">
							<view style="padding-bottom: 45px;">
								<!-- <uni-easyinput id="input" type="textarea" autoHeight v-model="content" placeholder="评论"></uni-easyinput> -->
								 <!-- id="editor1" -->
								<editor :id="'editor' + index" class=" bg-white c-333" style="min-height: 50px;height: 50px;padding:0px 10px;" :adjust-position="false" 
								maxlength="200" cursor-spacing="10" @input="changeMsgText" @ready="onEditorReady(index)" :read-only="readOnly"> </editor>
								 <!-- @focus="InputFocus" @blur="InputBlur" -->
							</view>
							<view style="position: absolute;bottom: 5px;right: 10px;">
								<view style="display: flex;justify-content: space-between;">
									<view>
										<view class="im-menus cuIcon-emoji f-28 ml-5 mr-10" hover-class="tap" @click.stop="showAppBox"></view>
										<scroll-view scroll-y class="icon" v-if="isFocus">
											<view class="im-flex im-wrap im-justify-content-start im-align-items-center pd-10">
												<view v-for="(item,index) in currentEmojiList" class="im-emoji-item" :key="index">
													<image :src="item.src" style="width:44rpx;height:44rpx;" mode="aspectFit" lazy-load @tap="chooseEmoji(item)"></image>
												</view>
											</view>
										</scroll-view>
									</view>
									<button class="cu-btn bg-green shadow " @touchend.prevent="sendTextMsg(item.id)">发送</button>
								</view>
							</view>
						</view>
						
						<view class="flex Likeview" v-if="item.likes.length!=0">
							<view v-for="(itemws,indexws) in item.likes" :key="indexws" class="flex align-center" style="margin-right: 5px;">
								<uni-icons type="heart" size="15" color="#576b95"></uni-icons>
								<view style="margin-left: 2px;">{{itemws.nickname}}</view>
							</view>
						</view>
				
						<view style="margin-bottom: 10px;">
							<view class="cu-list menu-avatar comment" style="margin-top: 0px;" v-for="(iteme,indexw) in item.comment" :key="indexw">
								<view class="comment_view">
									<view class="content">
										<view class="flex align-center" style="gap: 12rpx;" @click.stop="onComment(index,iteme.id)">
											<view>
												<view class="flex" v-if="iteme.reply_user_name!==''">
													<view>{{iteme.nickname}} <text style="color: #000;margin-right: 5px;">回复</text></view>
													<view class="flex-sub"> {{iteme.reply_user_name}}：</view>
												</view>
												<view v-else>{{iteme.nickname}}：</view>
											</view>
											<view class="text-gray text-content text-df" style="flex: 1; min-width: 0; word-break: break-word;">
												<view class="text-content content_img" style="color: #000;" v-if="contenthtml(iteme.content)" @click.stop="handleLink(iteme.content,index,iteme.id)" v-html="iteme.content"></view>
												<view class="text-content" style="color: #000;" v-html="iteme.content" v-else></view>
												<!-- <mp-html container-style="overflow: hidden;display:inline;white-space: pre-wrap;color: #000;" :content="emojiToHtml(iteme.content)"/> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length==0" style="display: flex;justify-content: center;align-items: center;margin-top: 40px;">
				<view>
					<image src="@/static/image/empty.png" mode="widthFix" style="width: 560rpx;"></image>
					<view style="text-align: center;color: #ccc;font-size: 40rpx;margin-right: 10px;">暂无数据</view>
				</view>
			</view>
			
		</view>
		<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
	</scroll-view>
</template>

<script>
	import { useloginStore } from '@/store/login'
	import config from '@/common/config.js'
	import emoji from '@/utils/emoji.js'
	import Edit from '@/utils/edit.js'
	import { chat } from '@/mixins/chat.js'
	import imImage from '@/components/message/im-image.vue';
	
	import pinia from '@/store/index'
	import { storeToRefs } from 'pinia';
	import { useMsgStore } from '@/store/message';
	const msgStore = useMsgStore(pinia)
	const {NoticeCount} = storeToRefs(msgStore);
	
	const loginStore = useloginStore()
	export default {
		components:{
			imImage
		},
		mixins:[chat],
		data() {
			return {
				notice:NoticeCount,
				isCard: true,
				apiUrl: config.apiUrl,
				userInfo:loginStore.userInfo,
				paddingB:0,
				page:1,
				limit:20,
				content:'',
				numindex:-1,
				boll:false,
				list:[],
				// editorCtx:null,
				editorCtx:{},
				currentEmojiList:[],
				emojiMap:[],
				isFocus:false,
				edit: null,
				readOnly:false,
				refreshing: false,
				status: 'more',//状态
				inputMsg:'',
				bool: 0,
				//显示的状态
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中....',
					contentnomore: '没有更多咯'
				},
			};
		},
		created(){
			// #ifdef H5
			this.paddingB=this.inlineTools;
			// #endif
			
			// #ifndef H5
			this.paddingB=this.navBarHeight+this.inlineTools;
			// #endif
			this.currentEmojiList=emoji[0]['children'];
			
			let emojiMap=[];
			// 解析所有表情
			emoji.forEach(function (item) {
				let child=item.children;
			  if(child.length>0){
				  child.forEach(function (val) {
					  let name=val.name;
					  let src=val.src;
					  emojiMap[name]=src;
				  })
			  }
			});
			this.emojiMap=emojiMap;
			this.page = 1;
			this.wechatMomentsList();
		},
		onShow() {
			if(this.bool==1){
				this.page = 1;
				this.wechatMomentsList();
			}
		},
		methods: {
			onRefresh() {
				this.page = 1
				this.wechatMomentsList()
				if (this.refreshing) return;
				this.refreshing = true;
				setTimeout(() => {
					this.refreshing = false;
				}, 1000)
			},
			contenthtml(val){
				return val && (val.includes('http://') || val.includes('https://'));
			},
			handleLink(url,index,id){
				const textOnly = url.replace(/<[^>]+>/g, ''); 
				const urlRegex = /https?:\/\/[^\s"']+/g;
				const urls = textOnly.match(urlRegex) || [];
				// console.log(urls);
				if(urls.length > 0){
					urls.forEach((res,index)=>{
						// #ifdef H5
						    window.open(urls[index], '_blank');
						// #endif
						// #ifdef APP-PLUS
						    plus.runtime.openURL(urls[index]);
						// #endif
					})
				}else{
					this.onComment(index,id)
					return
				}
				
			},
			IsCard(e) {
				this.isCard = e.detail.value
			},
			wechatMomentsList(){
				let params = {page:this.page,limit:this.limit}
				this.status = 'loading'; // 加载中
				this.$api.compaApi.wechatMomentsList(params).then(res => {
					res.data.forEach((res)=>{
						const [latitudeStr, longitudeStr] = res.location.split('+');
						const location = {
						  latitude: +latitudeStr,
						  longitude: +longitudeStr
						};
						res.location = location
						res.content = res.content.replace(/\n/g, '<br>')
					})
					this.bool = 0
					if (this.page === 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data);
					}
					// 判断是否还有更多数据
					if (this.list.length < res.count) {
						this.status = 'more'; // 还有更多数据
					} else {
						this.status = 'noMore'; // 没有更多数据
					}
					
					// console.log(res);
				})
			},
			scrollbot(){
				if (this.status == 'noMore') {
					return;
				}
				this.page++
				this.wechatMomentsList()
				// console.log('已触发底部事件');
			},
			tomoments(){
				this.bool = 1;
				uni.navigateTo({
					url:'/pages/compass/sendtoMoments'
				})
			},
			tonotice(){
				this.bool = 1;
				uni.navigateTo({
					url:'/pages/compass/Informationdetails'
				})
			},
			onLike(id){
				this.$api.compaApi.onlikes({posts_id:id}).then(res => {
					this.wechatMomentsList()
					// this.list = res.data
					// console.log(res);
				})
			},
			onComment(index,id){
				// 如果点击的是同一个项，关闭编辑
				if (this.numindex === index) {
					this.boll = false
					uni.removeStorageSync('pid')
					this.numindex = -1
				  return
				}
				
				this.numindex = index
				this.boll = !this.boll
				if(id&&this.boll == true){
					uni.setStorageSync('pid',id)
				}
			},
			showAppBox(){
				this.isFocus = !this.isFocus;
			},
			onicons(){
				this.isFocus = false;
			},
			// 选择表情
			chooseEmoji(item){
				// #ifdef H5
					this.editorCtx[this.numindex].insertImage({
						src: item.src,
						alt: item.title,
						width: 18,
						height: 18,
						nowrap:true, 
						extClass:'emoji-image',
						success: ()=>{
						},
						complete: ()=> {
							this.editorCtx[this.numindex].blur();
						},
					});
					// console.log(this.editorCtx[this.numindex]);
				// #endif
				// #ifndef H5
					this.readOnly= true
					setTimeout(()=>{
						this.editorCtx[this.numindex].insertImage({
							src: item.src,
							alt: item.title,
							width: 18,
							height: 18,
							nowrap:true, 
							extClass:'emoji-image',
							success: function() {
							},
							complete: ()=> {
								this.readOnly= false
							},
						});
					},10);
				// #endif
			},
			onEditorReady(index) {
				const editorId = 'editor' + index;
				// #ifdef MP-BAIDU
				// this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor1');
				this.editorCtx[index] = requireDynamicLib('editorLib').createEditorContext(editorId);
				// #endif
			
				// #ifdef APP-PLUS || MP-WEIXIN || H5
				const query = uni.createSelectorQuery().in(this);
				// query.select('#editor1').context((res) => {
				query.select('#editor' + index).context((res) => {
					this.edit = new Edit({context: res.context,maxCount: 300});
					this.editorCtx[index] = res.context
				}).exec()
				// #endif
			},
			changeMsgText(e){
				const txt=e.detail.text.replace(/\n/g, '');
				if(txt=='' && e.detail.html=='<p><br></p>'){
					this.inputMsg='';
				}else{
					this.inputMsg=e.detail.html;
				}
			},
			// 自动解析消息中的表情
			emojiToHtml(str){
				if(!str){
					return;
				}
				let emojiMap=this.emojiMap;
				return str.replace(/\[!(\w+)\]/gi, function (str, match) {
					var file = match;
					return emojiMap[file] ? "<img class='mr-5' style=\"width:18px;height:18px\" emoji-name=\"".concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
				  });
			},
			previewImage(e) {
			    //预览图片
			    var current = e.target.dataset.src
			    uni.previewImage({
			        current: current,
			        urls: [current]
			    })
			},
			Delete(id){
				const _this = this
				uni.showModal({
				    title: "提示",
				    content: "是否要删除该内容",
				    success: (res) => {
				        if (res.confirm) {
							_this.$api.compaApi.Deleteapost({posts_id:id}).then(res => {
								_this.wechatMomentsList()
							})
				        }else if (res.cancel) {
							console.log('用户点击取消');
						}
				    }
				})
			},
			sendTextMsg(id1){
				const _this = this
				const pid = uni.getStorageSync('pid')
				const currentIndex = this.numindex
				this.editorCtx[currentIndex].getContents({
					success:(e)=>{
						let msg=e.html;
						// console.log('消息发送',e);
						let params = {posts_id:id1,content:msg,pid:pid?pid:""}
						const text = /^\s*$/.test(params.content.replace(/<[^>]+>/g, ""));
						const hasImg = /<img\b/i.test(params.content);
						if(params.content==''|| (text && !hasImg)){
							uni.showToast({title: '内容不能为空！',icon:'error'});
							return
						}
						_this.$api.compaApi.oncomments(params).then(res => {
							uni.removeStorageSync('pid')
							_this.wechatMomentsList()
							_this.inputMsg = ""
							_this.boll = false;
							_this.editorCtx[currentIndex].clear();
							// _this.list = res.data
							// console.log(_this.editorCtx.clear());
						})
					}
				})
			},
		}
	}
</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;
	}
}
.im-input{
	height:100%;
	font-size: 28rpx;
	min-height:150rpx;
	max-height: 300rpx;
	padding:14rpx 14rpx; 
	border-radius:10rpx;
	word-break: break-all;
	margin:0 8rpx !important;
}
.im-location-msg{ 
	color:#2B2E3D;
	margin: 5px 10px;
	text-align: left !important;
}
.relative-shadow{
	z-index:1;
	width:100%;
	height:100%;
	height: 240px;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
}
.Likeview{
	padding: 5px;
	display: flex;
	color: #576b95;
	align-items: center;
	background-color: #f7f7f7;
	margin: 0rem 0.9375rem 0rem 2rem;
}
.course-video{
	overflow: hidden;
	position: relative;
}
.comment_view{
	height: auto;
	color: #576b95;
	padding: 20rpx 30rpx;
	background-color: #f7f7f7;
	margin: 0rem 0.9375rem 0rem 2rem;
}
::v-deep .ql-editor{
	padding-top: 10px;
}

::v-deep .content_img img{
	width: 18px;
	margin-right: 5px;
}
</style>