<template>
	<view class="user-page" :style="{ paddingTop: getNotchHeight() + 30 + 'px' }">
		<!-- 设置图标 -->
		<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>
					<text v-if="vipInfo.endTime && platform === 'ios'" class="vip-time">
						VIP {{ vipInfo.endTime.split(' ')[0] }} {{ $t('user.vipExpireTime') }}
					</text>
				</view>
			</view>
		</view>

		<!-- VIP订阅卡片 -->
		<view class="vip-card-section">
			<view class="vip-card">
				用户VIP功能重写中。。。
				<!-- <view v-if="vipInfo.id" class="vip-info">
          <text class="label">{{ $t('user.vip') }}</text>
          <text class="value">{{ vipInfo.endTime ? vipInfo.endTime.split(' ')[0] : '' }}</text>
        </view>
        <wd-button 
          v-else 
          type="success"
          size="small"
          @click="goSubscribe"
        >
          {{ $t('user.subscribe') }}
        </wd-button> -->
			</view>
		</view>

		<!-- 我的资产 -->
		<view class="vip-card-section wallet-section">
			<view class="vip-card wallet_l">
				<view class="assets">
					<view @click="goVirtualList">
						<view class="assets_row">{{ t('global.coin') }}</view>
						<view>{{userInfo.peanutCoin ?? 1}}</view>
					</view>
					<view>
						<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">
			<view class="menu-list">
				<view v-for="item in menuItems" :key="item.id" class="menu-item" @click="handleMenuClick(item)">
					<text class="menu-text">{{ item.name }}</text>
					<wd-icon name="arrow-right" size="16px" color="#aaa" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	import { useUserStore } from '@/stores/user'
	import { getUserInfo, getVipInfo } from '@/api/modules/user'
	import type { IVipInfo } from '@/types/user'
	import { useI18n } from 'vue-i18n'
	import { getNotchHeight } from '@/utils/system'

	const { t } = useI18n()
	const userStore = useUserStore()

	// 默认头像
	const defaultAvatar = '/static/home_icon.png'

	// 用户信息
	const userInfo = computed(() => userStore.userInfo)

	// VIP信息
	const vipInfo = ref<IVipInfo>({
		id: 0,
		endTime: '',
		vipType: 0
	})

	// 平台信息
	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: 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'
		}
	])

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

	/**
	 * 获取数据
	 */
	const getData = async () => {
		// 获取用户信息
		const userRes = await getUserInfo()
		console.log(userRes);
		if (userRes.user) {
			userStore.setUserInfo(userRes.user)
		}

		// 获取VIP信息
		const vipRes = await getVipInfo()
		if (vipRes.vipInfo) {
			vipInfo.value = vipRes.vipInfo
		}
	}

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

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

	/**
	 * 跳转到订阅页面
	 */
	const goSubscribe = () => {
		uni.navigateTo({
			url: '/pages/user/wallet/index'
		})
	}

	/**
	 * 处理菜单点击
	 */
	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'
		})
	}
	
	
	
	onMounted(() => {
		getPlatform()
		getData()
	})
</script>

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

	.user-page {
		min-height: 100vh;
		background-color: #f7faf9;
	}

	.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-card-section {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

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

		.vip-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 0;
	}

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

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #e0e0e0;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background-color: #f5f5f5;
		}

		.menu-text {
			font-size: 30rpx;
			color: #333;
			line-height: 40rpx;
		}
	}



	.chong_btn {
		font-size: 26rpx;
		display: block;
		border-radius: 50rpx;
		color: #fffbf6;
		padding: 10rpx 32rpx;
		background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
	}

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

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