<template>
	<div v-if="props.msg.sendingState == V2NIMConst.V2NIMMessageSendingState.V2NIM_MESSAGE_SENDING_STATE_SUCCEEDED" class="msg-read-wrapper">
		<div class="g_mr_5 g_mb_5">
			<div v-if="p2pMsgRotateDeg == 360" class="icon-read-wrapper" :style="{ bottom: isIOS ? '-6px' : '0px' }">
				<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/yidu_ccc.svg" style="width: 16px; height: 16px; display: block"></image>
			</div>
			<div v-else class="icon-read-wrapper" :style="{ bottom: isIOS ? '-6px' : '0px' }">
				<image src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/weidu_blue.svg" style="width: 16px; height: 16px; display: block"></image>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, defineProps, withDefaults, ref, onMounted, onUnmounted } from "vue";
import { V2NIMMessageForUI } from "@xkit-yx/im-store-v2/dist/types/types";
import { V2NIMConst } from "nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK";
import { autorun } from "mobx";
import { customNavigateTo } from "../../../utils/customNavigate";
import { t } from "../../../utils/i18n";
const props = withDefaults(
	defineProps<{
		msg: V2NIMMessageForUI;
	}>(),
	{}
);

const conversationType = uni.$UIKitNIM.V2NIMConversationIdUtil.parseConversationType(props.msg.conversationId);
const p2pMsgRotateDeg = ref(0);

const setP2pMsgRotateDeg = () => {
	// 如果是单聊
	if (conversationType === V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_P2P) {
		const conversation = uni.$UIKitStore.conversationStore.conversations.get(props.msg.conversationId);

		p2pMsgRotateDeg.value = props?.msg?.createTime <= (conversation?.msgReceiptTime || 0) ? 360 : 0;
	}
};

const p2pMsgReadWatch = autorun(() => {
	setP2pMsgRotateDeg();
});

onMounted(() => {
	setP2pMsgRotateDeg();
});

onUnmounted(() => {
	p2pMsgReadWatch();
});

const systemInfo = uni.getSystemInfoSync();
const isIOS = ref(systemInfo.platform === "ios");
</script>

<style scoped lang="scss">
@import "../../../base.scss";
.msg-read-wrapper {
	// align-self: flex-end;
}
.icon-read-wrapper {
	width: 16px;
	height: 16px;
	position: relative;
	// bottom: 0px;
}
</style>
