<template>
	<view class="user-page">
		<!-- 用户信息卡片 -->
		<view class="user-info-card">
			<view class="user-header">
				<view class="user-info">
					<view class="avatar-wrapper">
						<image :src="Service.GetMateUrlByImg(info.avatar) "
							class="avatar"></image>
					</view>
					<view class="user-details">
						<text class="username">{{ info.nick || '用户昵称' }}</text>
						<text class="member-rights">{{ phone(info.phone) || '138****8888' }}</text>
					</view>
					<view @click="Service.GoPage('/pages/userFunc/setuserData')" class="edit-profile">
						<text>编辑</text>
						<up-icon name="arrow-right" color="#fff" size="10"></up-icon>
					</view>
				</view>
			</view>
		</view>

		

		<!-- 我的订单 -->
		<view class="section-card" style="margin-top: 24rpx;">
			<view class="section-header">
				<view class="section-title-wrap">
					<text class="section-title">我的订单</text>
				</view>
				<view @click="Service.GoPage('/pages/webView/orderList?type=0')" class="view-all">
					<text>全部订单</text>
					<view class="view-all-arrow">
						<up-icon name="arrow-right" color="#fff" size="10"></up-icon>
					</view>
				</view>
			</view>
			<view class="order-types">
				<view @click="Service.GoPage('/pages/webView/orderList?type=' + (index + 1))"
					v-for="(item, index) in orderList" :key="index" class="order-type" hover-class="order-type-active">
					<view class="order-icon-wrapper">
						<view class="order-icon-bg" :class="'order-icon-bg--' + index">
							<image :src="Service.GetpayImg(item.img)" class="order-icon"></image>
						</view>
						<view v-if="item.count > 0" class="order-badge">{{ item.count > 99 ? '99+' : item.count }}
						</view>
					</view>
					<text class="order-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 功能网格 -->
		<view class="section-card">
			<view class="section-header">
				<view class="section-title-wrap">
					<text class="section-title">我的功能</text>
				</view>
			</view>
			<view class="service-list">
				<view @click="goPage(item.path)" class="service-list-item" v-for="(item, index) in myService"
					:key="index" hover-class="service-item-active">
					<view class="service-list-left">
						<view class="service-list-icon-wrap" :class="'service-list-icon-wrap--' + index">
							<image :src="Service.GetpayImg(item.img)" class="order-icon"></image>
						</view>
						<text class="service-list-text">{{ item.name }}</text>
					</view>
					<up-icon name="arrow-right" color="#D1D5DB" size="14"></up-icon>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%; height: 50rpx;" >
			
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { Service } from "@/Service/Service"
	import { UserService } from "@/Service/api/UserService"
	

	let info = ref<any>({})
	let walletAmount = ref<string>('0.00')
	let collectCount = ref<number>(0)
	let promoteCount = ref<number>(0)

	let orderList = ref([
		{
			img: '/static/icon/my/pay.png',
			name: '待付款',
			count: 0
		},
		{
			img: '/static/icon/my/send.png',
			name: '待发货',
			count: 0
		},
		{
			img: '/static/icon/my/get.png',
			name: '待收货',
			count: 0
		},
		{
			img: '/static/icon/my/message.png',
			name: '待评价',
			count: 0
		}
	])

	let myService = ref([
		{
			img: '/static/icon/my/service/card.png',
			name: '钱包',
			path: '/pages/userFunc/wallet'
		},
		{
			img: '/static/icon/my/service/ping.png',
			name: '爆品团',
			path: '/pages/userFunc/Groupsharing'
		},
		{
			img: '/static/icon/my/service/promote.png',
			name: '我的推广',
			path: '/pages/userFunc/promote'
		},
		{
			img: '/static/icon/my/service/select.png',
			name: '收藏夹',
			path: '/pages/userFunc/collect'
		},
		{
			img: '/static/icon/my/service/location.png',
			name: '收货地址',
			path: '/pages/userFunc/addressList',
		},
		{
			img: '/static/icon/my/service/comment.png',
			name: '我的评价',
			path: '/pages/userFunc/comment',
		},
		{
			img: '/static/icon/my/service/set.png',
			name: '设置',
			path: '/pages/userFunc/set',
		}
	])

	onShow(() => {
		getData()
	})

	const getData = () => {


		UserService.GetUserInfo().then(res => {
			if (res.code == 0) {
				info.value = res.data.info
				orderList.value[0].count = res.data.dfk || 0
				orderList.value[1].count = res.data.dfh || 0
				orderList.value[2].count = res.data.dsh || 0
				orderList.value[3].count = res.data.dpj || 0

			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const phone = (data : any) => {
		if (!data) return ''
		return String(data).slice(0, 3) + '****' + String(data).slice(-4)
	}

	const goPage = (path : any) => {
		if (path) {
			Service.GoPage(path)
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F8F9FA;
		overflow: hidden;
	}
	
	
	
	/* ===== 用户信息模块 ===== */
	.user-info-card {
		position: relative;
		z-index: 1;
		margin: 60rpx 30rpx 0;
		padding: 30rpx;
		background: var(--nav-vice);
		backdrop-filter: blur(12rpx);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.12);
	}

	.user-header {
		position: relative;
	}

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

	.avatar-wrapper {
		flex-shrink: 0;
		padding: 4rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.35);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: block;
		background-color: #f5f5f5;
		border: 3rpx solid rgba(255, 255, 255, 0.6);
	}

	.user-details {
		margin-left: 24rpx;
		flex: 1;
		min-width: 0;
	}

	.username {
		font-size: 40rpx;
		font-weight: 700;
		color: #fff;
		letter-spacing: 1rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		display: block;
	}

	.member-rights {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-top: 10rpx;
		display: block;
		font-weight: 400;
	}

	.edit-profile {
		font-size: 22rpx;
		color: #fff;
		display: flex;
		align-items: center;
		gap: 6rpx;
		flex-shrink: 0;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(8rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
	}

	.edit-profile:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.95);
	}

	/* ===== 数据概览 ===== */
	.stats-bar {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 24rpx 30rpx 0;
		padding: 30rpx 0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(12rpx);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.12);
	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		flex: 1;
		transition: transform 0.15s;
	}

	.stats-item:active {
		transform: scale(0.92);
	}

	.stats-num {
		font-size: 36rpx;
		font-weight: 700;
		color: #1F2937;
		letter-spacing: 0.5rpx;
	}

	.stats-label {
		font-size: 24rpx;
		color: #9CA3AF;
		font-weight: 500;
	}

	.stats-divider {
		width: 1rpx;
		height: 60rpx;
		background: linear-gradient(180deg, transparent, #E5E7EB, transparent);
	}

	/* ===== 卡片区域 ===== */
	.section-card {
		background-color: #fff;
		margin: 24rpx 30rpx 0;
		border-radius: 28rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 28rpx 20rpx;
	}

	.section-title-wrap {
		display: flex;
		align-items: center;
		gap: 14rpx;
	}

	.section-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.order-section-icon {
		background: linear-gradient(135deg, #F97316, #FB923C);
	}

	.service-section-icon {
		background: linear-gradient(135deg, #3B82F6, #60A5FA);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #1F2937;
	}

	.view-all {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		gap: 6rpx;
		padding: 8rpx 18rpx;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.2);
	}

	.view-all:active {
		transform: scale(0.95);
		opacity: 0.9;
	}

	.view-all-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ===== 订单区域 ===== */
	.order-types {
		display: flex;
		padding: 10rpx 0 ;
	}

	.order-type {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 0;
		transition: transform 0.15s;
	}

	.order-type-active {
		transform: scale(0.92);
	}

	.order-icon-wrapper {
		position: relative;
		display: inline-block;
	}

	.order-icon-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
		transition: transform 0.2s;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.order-icon-bg--0 {
		background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
	}

	.order-icon-bg--1 {
		background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
	}

	.order-icon-bg--2 {
		background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
	}

	.order-icon-bg--3 {
		background: linear-gradient(135deg, #FDF2F8, #FCE7F3);
	}

	.order-icon {
		width: 44rpx;
		height: 44rpx;
		display: block;
	}

	.order-badge {
		position: absolute;
		top: -4rpx;
		right: -8rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
		background: linear-gradient(135deg, #FF6A00, #FF4500);
		color: #fff;
		font-size: 20rpx;
		font-weight: 600;
		line-height: 32rpx;
		text-align: center;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 106, 0, 0.4);
		border: 2rpx solid #fff;
	}

	.order-text {
		font-size: 24rpx;
		color: #4B5563;
		margin-top: 14rpx;
		font-weight: 500;
	}

	/* ===== 服务列表 ===== */
	.service-list {
		padding: 0 20rpx 20rpx;
	}

	.service-list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 16rpx;
		transition: all 0.2s;
		border-bottom: 1rpx solid #F3F4F6;
	}

	.service-list-item:last-child {
		border-bottom: none;
	}

	.service-list-item:active {
		background: #F9FAFB;
		border-radius: 16rpx;
		transform: scale(0.98);
	}

	.service-list-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.service-list-icon-wrap {
		width: 72rpx;
		height: 72rpx;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.service-list-icon-wrap--0 {
		background: linear-gradient(135deg, #FFF1F2, #FFE4E6);
	}

	.service-list-icon-wrap--1 {
		background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
	}

	.service-list-icon-wrap--2 {
		background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
	}

	.service-list-icon-wrap--3 {
		background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
	}

	.service-list-icon-wrap--4 {
		background: linear-gradient(135deg, #FFFBEB, #FDE68A);
	}

	.service-list-icon-wrap--5 {
		background: linear-gradient(135deg, #ECFEFF, #CFFAFE);
	}

	.service-list-text {
		font-size: 26rpx;
		color: #1F2937;
		font-weight: 500;
	}

	.service-item-active {
		opacity: 0.8;
	}
</style>