<template>
	<view class="">
		<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
			<view class="flex justify-between items-center w-full">
				<view class="flex justify-start items-center">
					<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
						<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
					</view>
					<view class="">
						{{t('team.title')}}
					</view>
				</view>
				<view class="flex justify-end pr-[30rpx] ">
					<navigator hover-class="none" url="/pages/news_detail/detail?id=3">
						<u-icon size="42" name="question-circle"></u-icon>
					</navigator>
				</view>
			</view>
		</u-navbar>
		<view class="mx-[30rpx]">
			<view class="user-top px-[30rpx] pt-[50rpx] pb-[80rpx] rounded-lg mt-[30rpx]">
				<view class="text-center mb-[30rpx]">
					<u-avatar :src="state.user.avatar" :size="160"></u-avatar>
				</view>
				<view class="flex justify-around">
					<view class="text-center w-1/3">
						<view class="font-bold mb-[10rpx] text-2xl">
							{{state.user.teamNum}}
						</view>
						<view class="">
							{{t('team.teamNum')}}
						</view>
					</view>
					<view class="text-center w-1/3">
						<view class="font-bold mb-[10rpx] text-2xl">
							{{state.user.teamNewNum}}
						</view>
						<view class="">
							{{t('team.newUser')}}
						</view>
					</view>
					<view class="text-center w-1/3">
						<view class="font-bold mb-[10rpx] text-2xl ">
							{{formatMoney(state.user.total_income)}}
						</view>
						<view class="">
							{{t('team.totalCom')}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-center mb-[50rpx] mt-[-40rpx]">
				<view class=" w-1/2">
					<u-button hover-class="none"
						:custom-style="{'background-color':'#4E55AF','color':'#A1DBF5','border':'unset'}"
						:hair-line="false" @click="jumpTo('/pages/share/index')">{{t('team.inviteBtn')}}</u-button>
				</view>
			</view>
			<view class="mb-[60rpx] font-bold">
				<view class="flex justify-between items-center">
					<view class="">
						{{t('team.teamList')}}
					</view>
					<navigator hover-class="none" url="/pages/team/record?">
						<view class="text-[#03C5D4] font-bold">
							{{t('team.viewAll')}}
						</view>
					</navigator>
				</view>
			</view>
			<view class="bg-[#2C326B] rounded-lg mb-[60rpx] p-[30rpx]" v-for="item in state.dis_list" :key="item.id">
				<view class="mt-[-40rpx] mb-[30rpx]">
					<text
						class="bg-[#222B45] py-[12rpx] px-[40rpx] rounded-lg">{{replaceStr(t('team.level'), '{level}', item.level)}}</text>
				</view>
				<view class="flex justify-around">
					<view class="text-center w-1/2">
						<view class="font-bold mb-[10rpx]">
							{{item.num}}
						</view>
						<view class="">
							{{t('team.userNum')}}
						</view>
					</view>
					<view class="text-center w-1/2">
						<view class="font-bold mb-[10rpx]">
							{{item.item_rate}}%
						</view>
						<view class="">
							{{t('team.comRate')}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<tabbar />
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { getTeamIndex } from '@/api/team'
	import { formatMoney, replaceStr } from '@/utils/util'
	import { t, jumpTo } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('team.title') })
	const appStore = useAppStore()

	const state = reactive<{
		user : any
		dis_list : any
	}>({
		user: [],
		dis_list: [],
	})

	const getData = async () => {
		const res = await getTeamIndex()
		state.user = res.user
		state.dis_list = res.dis_list
	}
	onShow(() => {
		getData()
	})
</script>

<style lang="scss">
	.user-top {
		background-image: url('/static/images/user/team_bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
	}
</style>