<template>
	<view>
		<u-navbar title="我的" bgColor="transparent"></u-navbar>
		<view class="topBgBox">
			<view class="name flexA">
				<!-- <image src="../../static/logo.png" mode=""></image>
				<text>阅读</text> -->
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
					</view>
				<view class="nicName">
				  <open-data type="userNickName"></open-data>
				</view>
			</view>
			<view class="vipBox">
				<image class="blackBg" src="/static/mineIc/blackBg.png" mode=""></image>
				<view class="vip flexJ">
					<view>
						<view class="title flexA">
							<image src="/static/mineIc/Vector.png" mode=""></image>
							会员中心
						</view>
						<view class="tip">充值会员享更多权益</view>
					</view>
					<view class="btn flexC" @click="toRecharg">立即充值</view>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="orderClass">
				<view class="classTitle flexJ"  @click="orderStatus(5)">
					<view class="my">我的订单</view>
					<view class="all flexA">
						全部
						<image src="/static/mineIc/gayRight.png" mode=""></image>
					</view>
				</view>
				<view class="classBox flexJ">
					<view class="items flexV" v-for="(item,index) in classList" :key="item.id" @click="orderStatus(index)">
						<view class="badge">
							<u-badge absolute :offset="[-4,-10]" color="#FFFFFF" bgColor="#F74637" max="99"
								:value="item.num"></u-badge>
							<image :src="item.ic" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="functionBox">
				<view class="item flexJ" v-for="(item,index) in functionList" :key="item.id" @click="functionC(index)">
					<view class="itemIc flexA">
						<image :src="item.ic" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<image src="/static/mineIc/gayRight.png" mode=""></image>
				</view>
				<view class="myService flexJ">
					<view class="service flexA">
						<image src="/static/indexIc/service.png" mode=""></image>
						<text>我的客服</text>
					</view>
					<image src="/static/mineIc/gayRight.png" mode=""></image>
					<button open-type="contact"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import  { ref,reactive} from 'vue'
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import { getMine } from '@/api/'
	onShow(()=>{
		getMines()
	})
	let classList = reactive([{id:1,name:'待付款',num:0,ic:'/static/mineIc/obligation.png'},
		{id:2,name:'待发货',num:0,ic:'/static/mineIc/shipped.png'},
	{id:3,name:'待收货',num:0,ic:'/static/mineIc/received.png'},
	{id:4,name:'待评价',num:0,ic:'/static/mineIc/evaluated.png'},
	{id:5,name:'售后',num:0,ic:'/static/mineIc/afterSales.png'}])
	let functionList = reactive([{id:1,name:'我的余额',ic:'/static/mineIc/balance.png'},
		{id:2,name:'我的积分',ic:'/static/mineIc/collect.png'},
	{id:3,name:'我的地址',ic:'/static/mineIc/addressBlack.png'}])
	let info = ref({})
	// 订单跳转
	const orderStatus = (index)=> {
		uni.navigateTo({
			url:`/pages/mine/myOrder?status=${index==5 ? 0 : Number(index) + 1}`
		})
	}
	// 功能跳转
	const functionC = (index)=> {
		// uni.navigateTo({
		// 	url:'/pages/mine/' + ( index < 2 ? 'myPoints' : index==1 ? 'myCollection' :'myAddress' )
		// })
		if(index < 2) {
			uni.navigateTo({
				url:`/pages/mine/myPoints?type=${index}`
			})
		} else {
			uni.navigateTo({
				url:'/pages/mine/myAddress'
			})
		}
	}
	// 跳转充值中心
	const toRecharg = ()=> {
		uni.navigateTo({
			url:'/pages/mine/recharge'
		})
	}
	// 个人信息
	const getMines = async ()=>{
	  try {
	    const res = await getMine()
		classList[0].num = res.dfk
		classList[1].num = res.dfh
		classList[2].num = res.dsh
		classList[3].num = res.ywc
		classList[4].num = res.yth
		info.value = res.userInfo
	    console.log('getMine', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getMine', err)
	  }
	}
</script>

<style lang="scss">
	.u-icon__icon {
		display: none !important;
	}

	page {
		background-color: #F6F8FA;
	}

	.topBgBox {
		width: 100%;
		height: 520rpx;
		padding: 202rpx 24rpx 26rpx;
		box-sizing: border-box;
		opacity: 1;
		background: linear-gradient(180deg, #ffece3ff 0%, #f7f8faff 100%);

		.name {
			margin-bottom: 32rpx;
			
			.avatar {
				overflow: hidden;
				margin-right: 40rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50% !important;
			}
			.nicName {
				color: #000000e6;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.vipBox {
			position: relative;
			width: 702rpx;
			height: 140rpx;

			.blackBg {
				width: 100%;
				height: 100%;
			}

			.vip {
				width: 642rpx;
				position: absolute;
				top: 28rpx;
				left: 28rpx;

				.title {
					color: #ffdcb5ff;
					font-size: 30rpx;
					font-weight: 700;

					image {
						margin-right: 8rpx;
						width: 58rpx;
						height: 26rpx;
					}
				}

				.btn {
					width: 136rpx;
					height: 56rpx;
					border-radius: 34rpx;
					color: #361e0dff;
					font-size: 26rpx;
					font-weight: 700;
					background: linear-gradient(142.6deg, #fbcd9bff 0%, #ebc295ff 100%);
					box-shadow: inset 0 -6rpx 8rpx 0 #9760217d;
				}

				.tip {
					color: #ffffffb3;
					font-size: 22rpx;
					margin-top: 16rpx;
				}
			}
		}
	}

	.mainBox {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;

		.orderClass {
			width: 100%;
			padding: 28rpx 24rpx;
			box-sizing: border-box;
			background: #fff;

			.classTitle {
				margin-bottom: 28rpx;

				.my {
					color: #323233ff;
					font-size: 30rpx;
					font-weight: 700;
				}

				.all {
					color: #969799ff;
					font-size: 26rpx;

					image {
						margin: 4rpx 0 0 12rpx;
						width: 16rpx;
						height: 32rpx;
					}
				}
			}

			.classBox {

				.items {
					.badge {
						position: relative;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-bottom: 16rpx;
						}
					}

					text {
						color: #646566ff;
						font-size: 24rpx;
					}
				}
			}
		}

		.functionBox {
			width: 100%;
			padding: 0 32rpx 0 24rpx;
			box-sizing: border-box;
			border-radius: 34rpx;
			margin-top: 24rpx;
			background-color: #fff;

			.item {
				width: 100%;
				height: 104rpx;

				.itemIc {
					text {
						color: #000000e6;
						font-size: 28rpx;
					}

					image {
						margin-right: 24rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}

			.myService {
				position: relative;
				width: 100%;
				height: 104rpx;
				
				.service {
					
					image {
						margin-right: 24rpx;
						width: 36rpx;
						height: 36rpx;
					}
					
					text {
						color: #000000e6;
						 font-size: 28rpx;
					}
				}

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: transparent;
					&::after {
						border: none;
					}
				}

				image {
					width: 16rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>