<template>
	<view class="">
		<h-dark :title="t('share.title')"></h-dark>
		<view class="bg-[#4E55AF]">
			<view class="mb-[20rpx] pt-[30rpx]">
				<view class="px-[30rpx] mb-[40rpx]">
					<view class="flex">
						<u-avatar :src="state.user.avatar" :size="120"></u-avatar>
						<view class="ml-[20rpx]">
							<view class="text-2xl font-bold mb-[20rpx]">{{ state.user.mobile }}</view>
							<view class="text-[#00D2E0] flex items-center">
								<u-icon class="mr-[10rpx]" size="42" :name="state.member.logo"></u-icon>
								<text class="">{{ state.member.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="mb-[50rpx]">
		<view class="relative w-full">
			<view class="w-full px-[24rpx] flex justify-between items-center">
				<view class="">
					<u-image width="80rpx" src="/static/images/share/shareleft.png" mode="widthFix"></u-image>
				</view>
				<view class="rounded-lg overflow-hidden bg-[#2C326B] p-[30rpx]">
					<view class="rounded-lg overflow-hidden bg-white p-[10rpx]">
						<u-image width="330rpx" height="330rpx" :src="state.user.qrcode"></u-image>
					</view>
				</view>
				<view class="">
					<u-image width="80rpx" src="/static/images/share/shareright.png" mode="widthFix"></u-image>
				</view>
			</view>
		</view>
	</view>
	<view class="mt-[20rpx]">
		<view class="bg-[#2C326B] rounded-lg px-[30rpx] py-[30rpx] mx-[24rpx] mb-[30rpx]">
			<view class="">
				<view class="text-[#00E368] font-bold mb-[10rpx]">
					{{t('share.inviteLink')}}
				</view>
				<view class=" flex justify-between items-center" @click.stop="copyText(state.user.link)">
					<view class="w-[90%] break-words">
						{{state.user.link}}
					</view>
					<view class="ml-[10rpx] w-[10%] text-right">
						<u-icon size="30" name="/static/images/common/copy.png"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-[#2C326B] rounded-lg px-[30rpx] py-[30rpx] mx-[24rpx]">
			<view class="">
				<view class="text-[#00E368] font-bold mb-[10rpx]">
					{{t('share.inviteCode')}}
				</view>
				<view class=" flex justify-between items-center" @click.stop="copyText(state.user.sn)">
					<view class="">
						{{state.user.sn}}
					</view>
					<view class="ml-[10rpx]">
						<u-icon size="30" name="/static/images/common/copy.png"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { getShareIndex } from '@/api/user'
	import { useCopy } from '@/hooks/useCopy'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('share.title') })
	const { copy } = useCopy()
	const state = reactive<{
		user : any[]
		member : any[]
	}>({
		user: [],
		member: [],
	})

	// 获取用户信息
	const getData = async () : Promise<void> => {
		const res_data = await getShareIndex()
		state.user = res_data.user
		state.member = res_data.member
	}

	const copyText = async (text : string) => {
		copy(text);
		uni.$u.toast(t('common.copySuccess'))
	}

	getData()
</script>

<style lang="scss">
	page {
		background-color: #4E55AF;
		height: 100%;
	}
</style>