<template>
	<view class="home-user-info flex-sbetween flex-acenter">
		<view v-if="userStore.isLogin" class="flex-acenter">
			<view class="relative" @click.stop="handleEditProfile">
				<theme-image class="user-avatar" src="@/static/icon-avatar.png" mode="aspectFit" />
				<view class="vip-wrap pos-absolute">
					<!-- <vip-sign /> -->
					<theme-image :src="`@/static/vip_level/jb_vip${userStore.vipInfo.currentVipConfig.level}.png`" class="icon-vip-level"></theme-image>
				</view>
			</view>
			<view class="ml24">
				<view class="flex-acenter">
					<view class="user-name" :style="{ 'color': themeStore.theme.text.normal }">
						ID: {{ userStore.userInfo.id || '' }}
					</view>
					<!-- <view class="user-vip-tag flex-acenter flex-scenter" @click.stop="handleVipClick">
						<view>{{ userStore.vipInfo.vipLevel || '' }}</view>
					</view> -->
				</view>
				<view class="mt8" style="display: inline-block;">
					<view class="user-money flex-acenter row-center" :style="{ 'color': themeStore.theme.text.theme }">
						<view class="user-money-icon flex-acenter flex-scenter">
							<view class="money-txt">{{ appStore.currencySign }} </view>
						</view>
						<view class="mr16 money-txt">
							{{ formatFloat(userStore.userInfo.totalAssets, 2) }}
						</view>
						<theme-image class="user-money-refresh-icon" src="@/static/arrow-rt.png" mode="aspectFit" />
					</view>
				</view>
			</view>
		</view>
		<view v-else class="flex-acenter">
			<view class="login-btn flex-acenter flex-scenter"
				:style="{ color: themeStore.theme.button.textNormal, background: themeStore.theme.button.cancel }"
				@click.stop="handleLoginClick()">
				<view>{{ $t('home.login') }}</view>
			</view>
			<view class="login-btn flex-acenter flex-scenter ml16"
				:style="{ color: themeStore.theme.button.textNormal, background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
				@click.stop="handleRegisterClick()">
				<view>{{ $t('home.register') }}</view>
			</view>
		</view>
		<view class="flex-acenter">
			<view class="flex-column flex-acenter" @click.stop="handleDepositClick">
				<theme-image class="user-right-icon" src="@/static/icon-deposit.png" mode="aspectFit" />
				<view class="user-right-text" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('home.deposit') }}
				</view>
			</view>
			<view class="flex-column flex-acenter ml-1_5" @click.stop="handleWithdrawClick">
				<theme-image class="user-right-icon" src="@/static/icon-withdraw.png" mode="aspectFit" />
				<view class="user-right-text" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('home.withdraw') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useUserStore } from '@/store/useUserStore'
import { useThemeStore } from '@/store/useThemeStore'
import { useDepositStore } from '@/store/useDepositStore'
import { useAppStore } from '@/store/useAppStore'
import { onMounted, ref } from 'vue'
import { formatFloat } from '@/module/formatter/data-formatter.js'
import Toast from '@/module/toast/toast.js'
import VipSign from '@/components/vipSign/VipSign.vue'

const themeStore = useThemeStore()
const userStore = useUserStore()
const appStore = useAppStore()
const depositStore = useDepositStore()

const emit = defineEmits(['showBindPhone'])
const handleEditProfile = () => {
	uni.navigateTo({
		url: '/pages/account/Profile/Profile'
	})
}
const handleDepositClick = () => {
	uni.navigateTo({
		url: '/pages/wallet/Deposit'
	})
}

const handleWithdrawClick = () => {
	if(!userStore.userInfo?.mobile){
		emit('showBindPhone')
		return
	}
	uni.navigateTo({
		url: '/pages/wallet/Withdraw'
	})
}

const handleVipClick = () => {
	uni.navigateTo({
		url: '/pages/vip/Vip'
	})
}

const handleLoginClick = () => {
	uni.navigateTo({
		url: '/pages/Login/LoginV2'
	})
}

const handleRegisterClick = () => {
	uni.navigateTo({
		url: '/pages/Login/Register'
	})
}

const handleRefreshClick = async () => {
	Toast.showLoading('Loading')
	await userStore.getUserTotalInfo()
	Toast.hideLoading()
}
</script>

<style lang="scss" scoped>
.home-user-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid #FEBF05;
	}
	.vip-wrap{
		left: 50%;
		bottom: -6rpx;
		transform: translateX(-52%);

		.icon-vip-level{
			width: 95rpx;
			height: 28rpx;
		}
	}

	.user-name {
		font-size: 30rpx;
		// font-weight: bold;
		color: #ffffff;
	}

	.user-vip-tag {
		height: 32rpx;
		min-width: 80rpx;
		padding: 2rpx 16rpx;
		font-size: 24rpx;
		border-radius: 16rpx;
		background-color: #E79928;
		color: #ffffff;
		text-align: center;
		margin-left: 20rpx;
	}

	.user-money {
		height: 46rpx;
		
		border-radius: 23rpx;
		padding: 2rpx 8rpx;
		color: #FEBF05;
		font-size: 32rpx;
		font-weight: bold;

		.money-txt{
			line-height: 30rpx;
			font-size: 27rpx;
		}

		// .user-money-icon {
		// 	width: 36rpx;
		// 	height: 36rpx;
		// 	background-size: 100% 100%;
		// 	background-repeat: no-repeat;
		// 	font-size: 20rpx;
		// }

		.user-money-refresh-icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 4rpx;
		}
	}

	.user-right-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.user-right-text {
		font-size: 20rpx;
		margin-top: 5rpx;
		color: #ffffff;
	}

	.login-btn {
		width: 170rpx;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
	}
}
</style>