<template>
	<view @tap.prevent="clickConversationItem" :class="['conversation_item',source.isPinned?'pinned' : '']">
		<view class="left_info">
			<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName"
				size="46" />
			<view class="details">
				<view class="title">
					<text class="conversation_name">
						{{ source.showName }}
					</text>
					<view class="right_desc">
						<text class="send_time">{{ latestMessageTime }}</text>
						<u-badge max="99" :value="source.unreadCount"></u-badge>
					</view>
				</view>
				<view class="lastest_msg_wrap">
					<text class="lastest_msg_content">{{ latestMessage }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {SessionType,} from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import UParse from "@/components/gaoyia-parse/parse.vue";
	import {getConversationContent,formatConversionTime,prepareConversationState,} from "@/util/imCommon";

	export default {
		components: {
			MyAvatar,
			UParse,
		},
		props: {
			source: {
				type: Object,
				default: () => {},
			},
		},
		computed: {
			latestMessage() {
				if (this.source.latestMsg === "") return "";
				let parsedMessage;
				try {
					parsedMessage = JSON.parse(this.source.latestMsg);
				} catch (e) {}
				if (!parsedMessage) return "";
				return getConversationContent(parsedMessage);
			},
			latestMessageTime() {
				return this.source.latestMsgSendTime ?
					formatConversionTime(this.source.latestMsgSendTime) :
					"";
			},
			isGroup() {
				return this.source.conversationType === SessionType.WorkingGroup;
			},
			isNotify() {
				return this.source.conversationType === SessionType.Notification;
			},
		},
		data() {
			return {};
		},
		methods: {
			clickConversationItem() {
				console.log(this.source);
				prepareConversationState(this.source);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.conversation_item {
		@include btwBox();
		flex-direction: row;
		padding: 12rpx 44rpx 20rpx;
		position: relative;
		&.pinned{
			background-color: #ededed;
		}

		&_active {
			background-color: #f3f3f3;
		}

		.left_info {
			@include btwBox();
			flex:1;

			.details {
				@include colBox(true);
				flex:1;
				margin-left: 24rpx;
				height: 46px;
				color: $uni-text-color;
				border-bottom: 1px solid #eee;
				padding-bottom:20rpx;
				.title{
					@include btwBox();
					.conversation_name {
						@include nomalEllipsis();
						max-width: 40vw;
						font-size: 32rpx;
						font-weight: 500;
					}

					.right_desc {
						@include colBox(true);
						align-items: flex-end;
						width: max-content;
						justify-content: space-between;

						.send_time {
							width: max-content;
							font-size: 24rpx;
							color: #999;
						}

						.u-badge {
							width: fit-content;
						}
					}
				}

				.lastest_msg_wrap {
					display: flex;
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #666;

					.lastest_msg_prefix {
						margin-right: 6rpx;

						&_active {
							color: $u-primary;
						}
					}

					.lastest_msg_content {
						flex: 1;
						margin-right: 160rpx;
						// ::v-deepuni-view {
						@include ellipsisWithLine(1);
						// }
					}
				}
			}
		}
	}
</style>