<template>
	<view class="chat-msg-item">
		<view class="chat-msg-tip" v-if="msgInfo.type==MESSAGE_TYPE.RECALL">{{msgInfo.content}}</view>
		<view class="chat-msg-tip" v-if="msgInfo.type==MESSAGE_TYPE.TIP_TIME">
			{{toTimeText(msgInfo.sendTime)}}
		</view>

		<view class="chat-msg-normal" v-if="msgInfo.type>=0 && msgInfo.type<10"
			:class="{'chat-msg-mine':msgInfo.selfSend}">
			<head-image class="avatar" @longpress.prevent="emits('longPressHead')" :id="msgInfo.sendId" :url="headImg" :name="showName" :size="85"></head-image>
			<view class="chat-msg-content" @longpress="onShowMenu($event)">
				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
					<text>{{showName}}</text>
				</view>

				<view class="chat-msg-bottom">
					<rich-text class="chat-msg-text" v-if="msgInfo.type==MESSAGE_TYPE.TEXT"
						:nodes="transform(msgInfo.content)"></rich-text>
					<view class="chat-msg-image" v-if="msgInfo.type==MESSAGE_TYPE.IMAGE">
						<view class="img-load-box">
							<image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
								lazy-load="true" @click.stop="onShowFullImage()">
							</image>
							<loading v-if="loading"></loading>
						</view>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill"></text>
					</view>

					<view class="chat-msg-file" v-if="msgInfo.type==MESSAGE_TYPE.FILE">
						<view class="chat-file-box">
							<view class="chat-file-info">
								<uni-link class="chat-file-name" :text="data.name" showUnderLine="true" color="#007BFF"
									:href="data.url"></uni-link>
								<view class="chat-file-size">{{fileSize}}</view>
							</view>
							<image :src="fileImg" class="chat-file-icon"/>
							<loading v-if="loading"></loading>
						</view>
						<text title="发送失败" v-if="loadFail" @click="onSendFail"
							class="send-fail iconfont icon-warning-circle-fill"></text>
					</view>
					<text class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
							&& msgInfo.status==MESSAGE_STATUS.READED">已读</text>
					<text class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId 
							&& msgInfo.status!=MESSAGE_STATUS.READED">未读</text>

					<!--
					<view class="chat-msg-voice" v-if="msgInfo.type==MESSAGE_TYPE.AUDIO" @click="onPlayVoice()">
						<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
					</view>
					-->
				</view>

			</view>

		</view>
		<pop-menu v-if="state.menu.show" :menu-style="state.menu.style" :items="menuItems" @close="state.menu.show=false"
			@select="onSelectMenu"></pop-menu>
	</view>
</template>

<script setup>
	import { reactive, nextTick, computed, watch, onMounted } from "vue";
	import { toTimeText } from '@/common/config/date.js';
	import { transform } from '@/common/config/emotion.js';
	import { MESSAGE_TYPE, MESSAGE_STATUS } from '@/common/enums/im.ts';
	import headImage from "../../components/head-image.vue";
	import popMenu from "../../components/pop-menu.vue";

	const props = defineProps({
		headImg: {
			type: String,
			required: true
		},
		showName: {
			type: String,
			required: true
		},
		msgInfo: {
			type: Object,
			required: true
		}
	})
	const state = reactive({
		audioPlayState: 'STOP',
		menu: {
			show: false,
			style: ""
		}
	})

	const emits = defineEmits(['longPressHead'])

	function onShowMenu(e) {
		uni.getSystemInfo({
			success: (res) => {
				let touches = e.touches[0];
				let style = "";
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (res.windowHeight / 2)) {
					style = `bottom:${res.windowHeight-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (res.windowWidth / 2)) {
					style += `right:${res.windowWidth-touches.clientX}px;`;
				} else {
					style += `left:${touches.clientX}px;`;
				}
				state.menu.style = style;
				nextTick(() => {
					state.menu.show = true;
				});
			}
		})
	}
	function onSendFail() {
		uni.showToast({
			title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
			icon: "none"
		})
	}
	function onSelectMenu(item) {
		// emits(item.key.toLowerCase(), props.msgInfo);
		state.menu.show = false;
	}
	function onShowFullImage() {
		let imageUrl = JSON.parse(props.msgInfo.content).originUrl;
		uni.previewImage({
			urls: [imageUrl]
		})
	}
	const loading = computed(()=> {
		return props.msgInfo.loadStatus && props.msgInfo.loadStatus === "loading";
	})
	const loadFail = computed(()=> {
		return props.msgInfo.loadStatus && props.msgInfo.loadStatus === "fail";
	})
	const data = computed(() => {
		return JSON.parse(props.msgInfo.content)
	})
	const fileImg = computed(() => {
		const imgType = ['ai','avi','doc','excel','pdf','pptx','psd','sql','txt','zip']
		const nameArr = data.value.name.split('.');
		const type = nameArr[nameArr.length - 1];
		const imgName = imgType.includes(type) ? type : 'unknown'
		return `../../../../../static/im/image/${imgName}.png`
	})
	const fileSize = computed(() =>{
		let size = data.value.size;
		if (size > 1024 * 1024) {
			return Math.round(size / 1024 / 1024) + "M";
		}
		if (size > 1024) {
			return Math.round(size / 1024) + "KB";
		}
		return size + "B";
	})
	const  menuItems = computed(()=> {
		let items = [];
		items.push({
			key: 'DELETE',
			name: '删除',
			icon: 'trash'
		});
		if (props.msgInfo.selfSend && props.msgInfo.id > 0) {
			items.push({
				key: 'RECALL',
				name: '撤回',
				icon: 'refreshempty'
			});
		}
		if (props.msgInfo.type == MESSAGE_TYPE.FILE) {
			items.push({
				key: 'DOWNLOAD',
				name: '下载并打开',
				icon: 'download'
			});
		}
		return items;
	})
</script>

<style scoped lang="scss">
	.chat-msg-item {
		padding: 2rpx 20rpx;

		.chat-msg-tip {
			line-height: 60rpx;
			text-align: center;
			color: #555;
			font-size: 24rpx;
			padding: 10rpx;
		}

		.chat-msg-normal {
			position: relative;
			font-size: 0;
			margin-bottom: 15rpx;
			padding-left: 110rpx;
			min-height: 80rpx;

			.avatar {
				position: absolute;
				top: 0;
				left: 0;
			}

			.chat-msg-content {
				text-align: left;

				.chat-msg-top {
					display: flex;
					flex-wrap: nowrap;
					color: #333;
					font-size: 24rpx;
					line-height: 24rpx;

				}

				.chat-msg-bottom {
					display: inline-block;
					padding-right: 80rpx;

					.chat-msg-text {
						position: relative;
						line-height: 60rpx;
						margin: 10rpx 0 5rpx;
						padding: 5rpx 20rpx;
						background-color: white;
						border-radius: 0 20rpx 20rpx 20rpx;
						color: #333;
						font-size: 30rpx;
						text-align: left;
						display: block;
						word-break: break-all;
						white-space: pre-line;
					}


					.chat-msg-image {
						display: flex;
						flex-wrap: nowrap;
						flex-direction: row;
						align-items: center;

						.img-load-box {
							position: relative;

							.send-image {
								min-width: 200rpx;
								min-height: 200rpx;
								max-width: 400rpx;
								max-height: 400rpx;
								border: 8rpx solid #ebebf5;
								margin-bottom: 5rpx;
								cursor: pointer;
							}
						}


						.send-fail {
							color: #e60c0c;
							font-size: 30px;
							cursor: pointer;
							margin: 0 20px;
						}
					}

					.chat-msg-file {
						display: flex;
						flex-wrap: nowrap;
						flex-direction: row;
						align-items: center;
						cursor: pointer;
						margin-bottom: 5rpx;

						.chat-file-box {
							position: relative;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							border: #dddddd solid 1px;
							border-radius: 20rpx 0 20rpx 20rpx;
							background-color: #fff;
							padding: 20rpx 10rpx 20rpx 30rpx;

							.chat-file-info {
								flex: 1;
								height: 100%;
								text-align: left;
								font-size: 14px;
								width: 300rpx;

								.chat-file-name {
									font-size: 16px;
									font-weight: 600;
									margin-bottom: 15px;
									word-break: break-all;
								}
								.chat-file-size{
									color: #bdc3d6;
									margin-top: 5rpx;
								}
							}

							.chat-file-icon {
								width: 80rpx;
								height: 80rpx;
							}
						}

						.send-fail {
							color: #e60c0c;
							font-size: 50rpx;
							cursor: pointer;
							margin: 0 20rpx;
						}

					}

					
					.chat-unread {
						font-size: 10px;
						color: #f23c0f;
						font-weight: 600;
					}
					
					.chat-readed {
						font-size: 10px;
						color: #ccc;
						font-weight: 600;
					}
				}
			}


			&.chat-msg-mine {
				text-align: right;
				padding-left: 0;
				padding-right: 110rpx;

				.avatar {
					left: auto;
					right: 0;
				}

				.chat-msg-content {
					text-align: right;

					.chat-msg-bottom {
						padding-left: 80rpx;
						padding-right: 0;

						.chat-msg-text {
							margin-left: 10px;
							background-color: #5e8fea;
							color: #fff;
							border-radius:20rpx 0 20rpx 20rpx;
						}

						.chat-msg-image {
							flex-direction: row-reverse;
						}

						.chat-msg-file {
							flex-direction: row-reverse;
						}
					}
				}
			}

		}
	}
</style>