<template>
	<cu-custom bgColor="bg-white" :isBack="true">
		<template #backText></template>
		<template #content>详情</template>
	</cu-custom>
	<scroll-view scroll-y style="height: 92vh;">
		<view class="cu-card dynamic no-card">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item" style="margin-top: 20px;" v-if="list.user">
						<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+list.user.avatar+')'}]"></view>
						<view class="content flex-sub">
							<view>{{list.user.nickname}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{list.create_time}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					<!-- <mp-html container-style="overflow: hidden;display:inline;white-space: pre-wrap" :content="emojiToHtml(list.content)"/> -->
					<view class="text-content" v-if="contenthtml(list.content)" @click="handleLink(list.content)" v-html="list.content"></view>
					<view class="text-content" v-html="list.content" v-else></view>
				</view>
				<view class="grid" style="margin: 0px 24rpx;">
					<view class="grid" style="margin: 2rpx 0px;padding: 0px 8rpx;" v-for="(itemss,indexs) in list.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="list.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>
						</view>
					</view>
				</view>
				<view v-if="list.location" @tap="openLocation(list.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">{{list.address}}</view>
					</view>
					
				</view>
				<view class="text-gray text-sm text-right padding">
					<text @click="onLike(list.id)" :class="['cuIcon-appreciatefill', list.is_like === 1 ? 'text-red' : 'margin-lr-xs']"></text> {{list.likes?list.likes.length:0}}
					<text @click="onComment(null)" class="cuIcon-messagefill margin-lr-xs"></text> {{list.comment?list.comment.length:0}}
					<text v-if="list.user_id==userInfo.user_id" class="cuIcon-delete" style="margin-left: 5px;" @click="Delete(list.id)">删除</text>
				</view>
				
				<view v-show="boll" style="margin: 5px 15px;position: relative;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);">
					<view style="padding-bottom: 45px;">
						<editor id="editor" class="bg-white c-333" style="min-height: 50px;height: 50px;padding:0px 10px ;" :adjust-position="false" maxlength="300" cursor-spacing="10"
						@input="changeMsgText" @ready="onEditorReady" :read-only="readOnly"> </editor>
					</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 " @click="sendTextMsg(list.id)">发送</button>
						</view>
					</view>
				</view>
				
				<view class="flex Likeview" style="flex-wrap: wrap;" v-if="list.likes?.length!==0">
					<uni-icons type="heart" size="15" color="#576b95"></uni-icons>
					<view v-for="(itemws,indexws) in list.likes" :key="indexws" class="flex align-center" style="margin: 5px;">
						<!-- <view style="margin-left: 2px;">{{itemws.nickname}}</view> -->
						<image :src="itemws.avatar" mode="widthFix" style="width: 60rpx;margin-left: 2px;"></image>
					</view>
				</view>
		
				<view style="margin-bottom: 10px;" v-if="list.comment?.length!==0">
					<view class="cu-list menu-avatar comment" style="margin-top: 0px;" v-for="(iteme,indexw) in list.comment" :key="indexw">
						<view class="comment_view">
							<view class="content">
								<view class="flex align-center" style="gap: 12rpx;" @click.stop="onComment(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;">
										<!-- <mp-html container-style="overflow: hidden;display:inline;white-space: pre-wrap;color: #000;" :content="emojiToHtml(iteme.content)"/> -->
										<view class="text-content content_img" style="color: #000;" v-if="contenthtml(iteme.content)" @click="handleLink(iteme.content)" v-html="iteme.content"></view>
										<view class="text-content" style="color: #000;" v-html="iteme.content" v-else></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</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';
	
	const loginStore = useloginStore()
	export default {
		components:{
			imImage
		},
		mixins:[chat],
		data() {
			return {
				list: {},
				boll:false,
				edit: null,
				userid:'',
				inputMsg:'',
				posts_id:0,
				emojiMap:[],
				isFocus:false,
				readOnly:false,
				currentEmojiList:[],
				apiUrl: config.apiUrl,
				userInfo:loginStore.userInfo,
			}
		},
		created(){
			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;
		},
		onLoad(option) {
			this.posts_id = option.posts_id
			if(this.userInfo.user_id==option.userid){
				this.userid = ""
			}else{
				this.userid = option.userid
			}
		},
		onShow() {
			if(this.userid){
				this.init(this.userid)
			}else{
				this.init()
			}
		},
		methods: {
			showAppBox(){
				this.isFocus = !this.isFocus;
			},
			// 选择表情
			chooseEmoji(item){
				// #ifdef H5
					this.editorCtx.insertImage({
						src: item.src,
						alt: item.title,
						width: 18,
						height: 18,
						nowrap:true, 
						extClass:'emoji-image',
						success: ()=>{
						},
						complete: ()=> {
							this.editorCtx.blur();
						},
					});
				// #endif
				// #ifndef H5
					this.readOnly= true
					setTimeout(()=>{
						this.editorCtx.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() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif
			
				// #ifdef APP-PLUS || MP-WEIXIN || H5
				const query = uni.createSelectorQuery().in(this);
				query.select('#editor').context((res) => {
					this.edit = new Edit({context: res.context,maxCount: 300});
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			previewImage(e) {
			    //预览图片
			    var current = e.target.dataset.src
			    uni.previewImage({
			        current: current,
			        urls: [current]
			    })
			},
			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;
				}
			},
			onLike(id){
				this.$api.compaApi.onlikes({posts_id:id}).then(res => {
					if(this.userid){
						this.init(this.userid)
					}else{
						this.init()
					}
					// this.list = res.data
					// console.log(res);
				})
			},
			onComment(id){
				this.boll = !this.boll
				if(id){
					uni.setStorageSync('pid',id)
				}
			},
			Delete(id){
				const _this = this
				uni.showModal({
				    title: "提示",
				    content: "是否要删除该图片",
				    success: (res) => {
				        if (res.confirm) {
							_this.$api.compaApi.Deleteapost({posts_id:id}).then(res => {
								if(_this.userid){
									_this.init(_this.userid)
								}else{
									_this.init()
								}
							})
				        }else if (res.cancel) {
							console.log('用户点击取消');
						}
				    }
				})
			},
			contenthtml(val){
				return val && (val.includes('http://') || val.includes('https://'));
			},
			handleLink(url){
				const textOnly = url.replace(/<[^>]+>/g, ''); 
				const urlRegex = /https?:\/\/[^\s"']+/g;
				const urls = textOnly.match(urlRegex) || [];
				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{
					return
				}
				
			},
			init(id){
				this.$api.compaApi.detailsList({posts_id:+this.posts_id,friend_user_id:id?+id:''}).then(res => {
					const [latitudeStr, longitudeStr] = res.data.location?.split('+');
					const location = {
						latitude: +latitudeStr?+latitudeStr:0,
						longitude: +longitudeStr?+longitudeStr:0
					};
					res.data.location = location
					this.list = res.data
				})
			},
			sendTextMsg(id1){
				const _this = this
				const pid = uni.getStorageSync('pid')
				this.editorCtx.getContents({
					success:(e)=>{
						let msg=e.html;
						const text = /^\s*$/.test(msg.replace(/<[^>]+>/g, ""));
						const hasImg = /<img\b/i.test(msg);
						if(msg==''||(text && !hasImg)){
							uni.showToast({ title: "内容不能为空", icon: "none" });
							msg=''
							_this.editorCtx.clear();
							return
						}
						let params = {posts_id:id1,content:msg,pid:pid?pid:""}
						// console.log(params);
						_this.$api.compaApi.oncomments(params).then(res => {
							uni.removeStorageSync('pid')
							if(_this.userid){
								_this.init(_this.userid)
							}else{
								_this.init()
							}
							_this.editorCtx.clear();
							this.boll = false;
							// _this.list = res.data
							// console.log(res);
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.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;
}
.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;
	}
}
::v-deep .ql-editor{
	padding-top: 10px;
}
::v-deep .content_img img{
	width: 18px;
	margin-right: 5px;
}
</style>
