<template>		
	<view class="user-page" :style="{ paddingTop: getNotchHeight() + 30 + 'px' }" v-if="tokenState">
		<!-- 设置图标 -->
		<view class="settings-icon" :style="{ top: getNotchHeight() + 30 + 'px' }" @click="goSettings">
			<wd-icon name="setting1" size="24px" color="#666" />
			<text>{{ $t('user.settings') }}</text>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-info">
				<image :src="userInfo.avatar || defaultAvatar" class="avatar" @click="goProfile" />
				<view class="user-details">
					<text class="nickname">{{ userInfo.nickname || $t('user.notSet') }}</text>
					<text v-if="userInfo.email" class="email">{{ userInfo.email }}</text>
				</view>
			</view>
		</view>

		<!-- VIP订阅卡片 -->
		<view class="vip-card-section">
			<view class="vip-card">
				<view class="vip-card-title">{{ $t('user.vip') }}</view>
				<view class="vip-card-content">
					<view class="vip-item-list">
						<view v-if="vipInfo?.length > 0" v-for="vip in vipInfo">
							{{ vipTypeDict[vip.type] }}（{{ parseTime(vip.endTime, '{y}-{m}-{d}') }} 截止）</view>
						<view v-else>办理课程VIP，畅享更多权益</view>
					</view>
					<wd-button v-if="vipInfo?.length > 0" plain type="primary" size="small"
						@click="goCourseVipSub">{{ $t('vip.renewal') }}</wd-button>
					<wd-button v-else plain type="primary" size="small"
						@click="goCourseVipSub">{{ $t('vip.openVip') }}</wd-button>
				</view>
				<view class="vip-card-content">
					<view class="vip-item-list">
						<view v-if="vipInfoEbook?.length > 0" v-for="vip in vipInfoEbook">
							电子书VIP{{ vipTypeDict[vip.type] }}（{{ parseTime(vip.endTime, '{y}-{m}-{d}') }} 截止）</view>
						<view v-else>办理电子书VIP，畅享更多权益</view>
					</view>
					<wd-button v-if="!vipInfoEbook?.length" plain type="primary" size="small"
						@click="goSubscribe">{{ $t('vip.openVip') }}</wd-button>
				</view>
			</view>
		</view>

		<!-- 我的资产 -->
		<view class="assets-card-section wallet-section">
			<view class="assets-card wallet_l">
				<view class="assets">
					<view @click="goVirtualList">
						<view class="assets_row">{{ t('global.coin') }}</view>
						<view>{{userInfo.peanutCoin ?? 1}}</view>
					</view>
					<view @click="goPointsList">
						<view class="assets_row">积分</view>
						<view>{{userInfo.jf ?? 1}}</view>
					</view>
					<!-- <view>
						<view class="assets_row">优惠卷</view>
						<view>0</view>
					</view> -->
				</view>
				<view class="chong_btn" @click="goRecharge">充 值</view>
				<!-- <text class="wallet_title">{{$t('my.coin')}}<uni-icons type="help" size="19" color="#666"></uni-icons></text>
				<text class="wallet_count">{{userMes.peanutCoin}}</text> -->
			</view>
		</view>

		<!-- 功能菜单列表 -->
		<view class="menu-section">
			<wd-cell-group border class="menu-list">
				<wd-cell v-for="item in menuItems" :key="item.id" :title="item.name" :label="item.desc" is-link
					@click="handleMenuClick(item)">
					<text v-if="item.hufenState" class="menu-list-hufen">{{hufenData?.total ?? 0}}<text
							style="margin-left: 6rpx;">湖分</text></text>
				</wd-cell>
				<wd-cell is-link @click="uni.navigateTo({url: '/pages/index'})">测试页</wd-cell>
			</wd-cell-group>
		</view>
	</view>
	<visitor v-else></visitor>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { useSysStore } from '@/stores/sys'
	import { getUserInfo, getUserContributionData } from '@/api/modules/user'
	import { getNotchHeight } from '@/utils/system'
	import { parseTime } from '@/utils/index'
	import { t } from '@/utils/i18n'
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
	import visitor from '@/pages/visitor/index.vue';

	const userStore = useUserStore()
	const sysStore = useSysStore()

	// 默认头像
	const defaultAvatar = '/static/logo.png'
	// 用户信息
	const userInfo = computed(() => userStore.userInfo)

	// VIP信息
	const vipInfo = computed(() => userStore.userVips)
	const vipInfoEbook = computed(() => userStore.userEbookVip)

	// VIP类型字典
	const vipTypeDict = sysStore.vipTypeDict

	// 平台信息
	const platform = ref('')

	// 菜单项
	const menuItems = computed(() => [
		{
			id: 1,
			name: t('user.myOrders'),
			url: '/pages/user/order/index',
			type: 'pageJump'
		},
		{
			id: 2,
			name: t('user.myBooklist'),
			url: '/pages/user/myBook/index',
			type: 'pageJump'
		},
		{
			id: 9,
			name: t('user.myCourses'),
			url: '/pages/user/myCourses/index',
			type: 'pageJump'
		},
		{
			id: 8,
			name: t('user.iHufen'),
			url: '/pages/user/hufen/index',
			type: 'pageJump',
			hufenState: true
		},
		{
			id: 3,
			name: t('user.profile'),
			url: '/pages/user/profile/index',
			type: 'pageJump'
		},
		{
			id: 4,
			name: t('user.about'),
			url: '/pages/user/about/index',
			type: 'pageJump'
		},
		{
			id: 5,
			name: t('user.feedback'),
			url: '/pages/user/feedback/index',
			type: 'pageJump'
		},
		{
			id: 6,
			name: t('user.dataMigrate'),
			url: '/pages/user/migrate/index',
			desc: t('user.migrateSubtitle'),
			type: 'pageJump'
		},
		// {
		// 	id: 7,
		// 	name: t('user.certificate'),
		// 	url: '/pages/user/certificate/index',
		// 	type: 'pageJump'
		// },
	])
	// 湖分
	const hufenData = ref()
	const tokenState = ref(false)

	/**
	 * 获取平台信息
	 */
	const getPlatform = () => {
		const systemInfo = uni.getSystemInfoSync()
		platform.value = systemInfo.platform === 'android' ? 'android' : 'ios'
	}

	/**
	 * 获取数据
	 */
	const getData = async () => {
		// 获取用户信息
		const userInfoRes = await getUserInfo()
		if (userInfoRes.result) {
			userStore.setUserInfo(userInfoRes.result)
		}
	}

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

	/**
	 * 跳转到设置页面
	 */
	const goSettings = () => {
		uni.navigateTo({
			url: '/pages/user/settings/index'
		})
	}

	/**
	 * 跳转到个人资料页面
	 */
	const goProfile = () => {
		uni.navigateTo({
			url: '/pages/user/profile/index'
		})
	}

	/**
	 * 跳转到电子书vip订阅页面
	 */
	const goSubscribe = () => {
		uni.navigateTo({
			url: '/pages/vip/book'
		})
	}

	/**
	 * 跳转到课程vip订阅页面
	 */
	const goCourseVipSub = () => {
		uni.navigateTo({
			url: '/pages/vip/course'
		})
	}

	/**
	 * 处理菜单点击
	 */
	const handleMenuClick = (item : any) => {
		switch (item.type) {
			case 'pageJump':
				uni.navigateTo({
					url: item.url
				})
				break
			case 'switchTab':
				uni.switchTab({
					url: item.url
				})
				break
		}
	}

	/**
	 * 跳转充值页面
	 */
	const goRecharge = () => {
		uni.navigateTo({
			url: '/pages/user/recharge/index'
		})
	}

	/**
	 * 跳转虚拟币页面
	 */
	const goVirtualList = () => {
		uni.navigateTo({
			url: '/pages/user/virtual/index'
		})
	}

	/**
		* 跳转积分列表
		*/
	const goPointsList = () => {
		uni.navigateTo({
			url: '/pages/user/points/index'
		})
	}

	/**
	 * 刷新数据
	 */
	const handleRefresh = async () => {
		if (uni.getStorageSync('token')) {
			tokenState.value = true
			await Promise.all([
				getPlatform(),
				getData(),
				getHufen()
			])
		}
	}
 
	onShow(() => {
		handleRefresh()
	})

	onMounted(() => {
		handleRefresh()
	})

	onPullDownRefresh(async () => {
		handleRefresh().then(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		})
	})
</script>

<style lang="scss" scoped>
	$theme-color: #54a966;

	.user-page {
		min-height: calc(100vh - 50px);
		background-color: #f7faf9;
		position: relative;
	}

	.settings-icon {
		position: absolute;
		right: 20px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.2;

		text {
			display: block;
			font-size: 28rpx;
			color: #333;
		}
	}

	.user-info-section {
		padding: 0 30rpx;
		margin-bottom: 50rpx;
	}

	.user-info {
		display: flex;
		align-items: center;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin-right: 30rpx;
		}

		.user-details {
			flex: 1;

			.nickname {
				display: block;
				font-size: 38rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.email {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.vip-time {
				display: block;
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	// vip 卡片
	.vip-card-section {
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.vip-card {
			background: linear-gradient(135deg, #3E7EF5 0%, #9134EA 100%);
			border-radius: 15rpx;
			padding: 26rpx 30rpx 10rpx;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

			.vip-card-title {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.vip-card-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				padding: 30rpx;
				margin-bottom: 20rpx;
			}

			.vip-item-list {
				font-size: 28rpx;
				color: #fff;
				font-weight: bold;
			}
		}
	}

	.assets-card-section {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.assets-card {
		background: #fff;
		border-radius: 15rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.assets-info {
			text-align: center;

			.label {
				display: block;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.value {
				display: block;
				font-size: 30rpx;
				color: $theme-color;
			}
		}
	}

	.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;

			text {
				font-size: 26rpx;
			}
		}

	}

	.chong_btn {
		font-size: 26rpx;
		display: block;
		border-radius: 50rpx;
		color: #fffbf6;
		padding: 10rpx 32rpx;
		background: #007bff;
	}

	.assets {
		display: flex;
		flex: 1;
		justify-content: space-around;
		text-align: center;
		transform: translateX(-20px);

		.assets_row {
			margin-bottom: 20rpx;
		}
	}
</style>