<template>
	<div class="page_container">
		<NavBar :title="title" />
		<div class="mx-6 mt-24 flex flex-col items-center rounded-md bg-white px-9 pt-9 pb-4" v-if="!props.isGroup">
			<div class="flex w-full items-center">
				<Avatar :src="faceURL" :desc="showName" :is-group="isGroup" :size="68" />
				<div class="info ml-4">
					<div class=" max-w-[200px] truncate text-[#333]">{{ showName }}</div>
					<text class="mt-1 color text-sm">ID：{{ userStore.storeSelfInfo.userID }}</text>
				</div>
			</div>
			<div
				class="mt-10 flex h-[240px] w-[240px] items-center justify-center border-4 border-solid border-[#E8EAEF]">
				<canvas ref="canvas" width="200" height="200"></canvas>
			</div>
			<div class="mt-6 text-sm text-[#999]">{{ tip }}</div>
		</div>
		<div class="groupqr" v-if="props.isGroup">
			<Avatar :src="faceURL" :desc="showName" :is-group="isGroup" :size="60" />
			<div class="name">群聊:{{ showName }}</div>
			<canvas ref="canvas" width="200" height="200"></canvas>
			<div class="tip">{{ tip }}</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	// @ts-ignore
	import UQRCode from 'uqrcodejs'
	import Avatar from '@/components/Avatar/index.vue'
	import { AddFriendQrCodePrefix, AddGroupQrCodePrefix } from '@/utils/imCommon'
	import useUserStore from '@/store/modules/user'
	import useConversationStore from '@/store/modules/conversation'

	const emit = defineEmits([])
	const props = defineProps<{ isGroup ?: boolean }>()

	const { t } = useI18n()
	const userStore = useUserStore()
	const conversationStore = useConversationStore()

	const canvas = ref()
	const showName = computed(() =>
		props.isGroup
			? conversationStore.storeCurrentGroupInfo.groupName
			: userStore.storeSelfInfo.nickname,
	)
	const faceURL = computed(() =>
		props.isGroup
			? conversationStore.storeCurrentGroupInfo.faceURL
			: userStore.storeSelfInfo.faceURL,
	)

	const title = props.isGroup ? t('groupQrCode') : t('qrCode')
	const tip = props.isGroup
		? t('messageTip.scanGroupQrCodeTip')
		: t('messageTip.scanQrCodeTip')

	onMounted(() => {
		let qrData = AddFriendQrCodePrefix + userStore.storeSelfInfo.userID
		if (props.isGroup) {
			qrData = AddGroupQrCodePrefix + conversationStore.storeCurrentGroupInfo.groupID
		}
		const qr = new UQRCode()
		qr.data = qrData
		qr.size = 200
		qr.make()
		const canvasContext = canvas.value.getContext('2d')
		qr.canvasContext = canvasContext
		qr.drawCanvas()
	})
</script>

<style lang="scss" scoped>
	::v-deep .van-nav-bar {
		background: none;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.color {
		color: #B2B2B2;
	}

	.groupqr {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 5.39rem;

		.name {
			font-weight: bold;
			font-size: 1.17rem;
			color: #191919;
			margin-top: 1.04rem;
		}

		canvas {
			margin-top: 1.69rem;
		}

		.tip {
			font-size: 0.84rem;
			color: #B2B2B2;
			width: 15.4rem;
			text-align: center;
			margin-top: 2.34rem;
		}
	}
</style>