<template>
	<view class="recharge-page">
		<nav-bar :title="$t('user.iHufen')"></nav-bar>
		<view class="menu-section" v-if="hufenList.list?.length > 0">
			<wd-cell-group border class="menu-list">
				<wd-cell v-for="item in hufenList.list" :key="item.type" :title="item.dict_value" is-link
					@click="handleMenuClick(item)">
					<text class="menu-list-hufen">{{item.score}}</text><text class="menu-list-hufen-text">{{$t('user.hufen')}}</text>
				</wd-cell>
			</wd-cell-group>
		</view>
		<view v-else><wd-divider>您还未获得湖分</wd-divider></view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { getUserContributionData } from '@/api/modules/user'

	const { t } = useI18n()
	const hufenList = ref([])

	/**
		 * 获取用户湖分
		 */
	const getHufen = async () => {
		hufenList.value = await getUserContributionData()
		console.log(hufenList.value.list)
	}

	const handleMenuClick = (item) => {
		uni.navigateTo({
			url: `/pages/user/hufen/forDetails?type=${item.type}&nameValue=${item.dict_value}`
		})
	}
	
	onMounted(() => {
		getHufen()
	})
</script>

<style lang="scss" scoped>
	.recharge-page {
		min-height: 100vh;
		background-color: #f7faf9;
	}

	.menu-section {
		padding: 20rpx 20rpx;
	}

	.menu-list {
		background: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.menu-list-hufen {
			font-size: 36rpx;
			color: #007bff;
			margin-right: 6rpx;
		}

		.menu-list-hufen-text {
			color: #007bff;
		}
	}
</style>