<template>
	<view class="message-search-item" @click="handleClick">
		<view class="message-content">
			<view class="message-meta">
				<text class="sender-name" v-if="!isSelf && !isGroup">{{ message.senderNickname }}</text>
				<text class="message-time">{{ formattedTime }}</text>
			</view>
			<view class="message-preview">
				<text class="message-text">{{ messagePreview }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import {MessageType, SessionType} from "openim-uniapp-polyfill";
	import {formatMessageTime, parseMessageByType} from "@/util/imCommon";
	
	export default {
		name: "MessageSearchItem",
		components: {
			MyAvatar
		},
		props: {
			message: {
				type: Object,
				required: true
			},
			conversation: {
				type: Object,
				default: null
			}
		},
		computed: {
			...mapGetters([
				"storeSelfInfo"
			]),
			isGroup() {
				if(this.conversation){
					return this.conversation.conversationType === SessionType.WorkingGroup || this.conversation.conversationType === 2;
				}
				return this.message.sessionType === SessionType.WorkingGroup || this.message.sessionType === 2;
			},
			isSelf() {
				return this.message.sendID === this.storeSelfInfo?.userID;
			},
			formattedTime() {
				return formatMessageTime(this.message.sendTime);
			},
			messagePreview() {
				// 根据消息类型显示预览
				switch(this.message.contentType) {
					case MessageType.TextMessage:
						return this.message.textElem?.content || '[文本消息]';
					case MessageType.FileMessage:
						return `[文件] ${this.message.fileElem?.fileName || '未知文件'}`;
					case MessageType.LocationMessage:
						return `[位置] ${this.message.locationElem?.description || '位置信息'}`;
					case MessageType.PictureMessage:
						return '[图片]';
					case MessageType.VideoMessage:
						return '[视频]';
					case MessageType.SoundMessage:
						return '[语音]';
					default:
						return parseMessageByType(this.message) || '[消息]';
				}
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					message: this.message,
					conversation: this.conversation
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-search-item {
		background-color: #fff;
		padding: 20rpx 44rpx;
		border-bottom: 1px solid #f0f0f0;
		
		&:active {
			background-color: #f5f5f5;
		}
		
		.message-content {
			.message-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				.sender-name {
					font-size: 26rpx;
					color: #1d6bed;
					font-weight: 500;
				}
				
				.message-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.message-preview {
				.message-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					@include ellipsisWithLine(2);
				}
			}
		}
	}
</style>

