<template>
	<view class="my-container">
		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-if="user!=null">
				<view class="header">
					<view class="header-user">
						<view class="header-avatar">
							<u-avatar :src="getImageUrl(user.avatar)"></u-avatar>
						</view>
						<view class="header-username u-m-l-20">
							{{user.real_name}}
							<view>
								<u-tag class="u-m-r-20 u-m-t-10" :text="Math.abs(user.balance)" type="warning"></u-tag>
								<u-tag :text="user.points"></u-tag>
							</view>
						</view>
					</view>
					<view class="header-setting">
						<image src="/static/icon/Settings.png" style="width: 100%;height: 100%;" mode=""></image>
					</view>
				</view>

				<view class="statistics">
					<view class="item">
						<view class="count">
							111
						</view>
						<view class="title">
							积分
						</view>
					</view>
					<view class="item">
						<view class="count">
							5
						</view>
						<view class="title">
							优惠券
						</view>
					</view>
					<view class="item">
						<view class="count">
							10
						</view>
						<view class="title">
							我的兑换
						</view>
					</view>
					<view class="item" @click="shop_car">
						<view class="count">
							283
						</view>
						<view class="title">
							购物车
						</view>
					</view>
				</view>

				<view class="open-vip">
					<view class="text-vip">
						<view class="title">
							vip专享
						</view>
						<view class="sub-title">
							立享价值1000元权益
						</view>
					</view>
					<u-button class="btn-vip" hover-class="none" :hair-line="false">298元开通</u-button>
				</view>

				<view class="white-block">
					<view class="item">
						<view class="title">
							会员权益
						</view>
						<view class="sub-title">
							领取升级福利
						</view>
					</view>
					<view class="item">
						<view class="title">
							积分商城
						</view>
						<view class="sub-title">
							赚积分享福利
						</view>
					</view>
				</view>

				<view class="menu-list">
					<view class="menu-item" @click="navigatorSrc">
						<u-image src="/static/my/01.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							领券中心
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/02.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							积分兑换
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/03.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							我的客户
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/04.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							常见问题
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/05.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							充值中心
						</view>
					</view>
					<view class="menu-item" @click="handleShippingAddress">
						<u-image src="/static/my/06.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							收货地址
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/07.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							我的订单
						</view>
					</view>
					<view class="menu-item">
						<u-image src="/static/my/08.png" width="40%" mode="widthFix"></u-image>
						<view class="menu-text">
							成为代理
						</view>
					</view>
				</view>

				<u-button class="u-m-t-20" @click="loginOut">退出登录</u-button>
			</view>
		</scroll-view>
	</view>
	<Tabbar></Tabbar>
</template>


<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getImageUrl } from '../../util/common';
	import {
		authAPI
	} from '../../api/auth.js';
	import {
		onShow
	} from '@dcloudio/uni-app'

	const user = ref()

	const handleShippingAddress = () => {
		uni.navigateTo({
			url: '/pages/my/shippingAddress'
		})
	}

	const loadData = () => {
		authAPI.me().then(res => {
			user.value = res.user
		})
	}

	onShow(() => {
		loadData()
	})

	onMounted(() => {
	})

	const loginOut = () => {
		uni.removeStorageSync("token")
		uni.redirectTo({
			url: '/pages/login/login'
		})
	}
  const navigatorSrc = ()=>{
    uni.navigateTo({
      url:'/pages/my/getCoupons'
    })
  }
  //购物车跳转
  const shop_car = ()=>{
	  uni.navigateTo({
	  	url:'/pages/my/car'
	  })
  }
</script>

<style scoped lang="scss">
	.my-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #E3E8FF 0%, #E8EAF4 100%);
		background-blend-mode: lighten;
		padding: 60rpx 20rpx;

		.header {
			display: flex;
			width: 100%;
			justify-content: flex-end;

			.header-user {
				flex: 1;
				display: flex;
				align-items: center;
				height: 170rpx;
				padding-left: 60rpx;
			}

			.header-setting {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.statistics {
			display: flex;

			font-family: SF Pro;
			font-weight: 510;
			font-style: Medium;
			font-size: 32rpx;
			leading-trim: NONE;
			line-height: 48rpx;
			letter-spacing: 0%;

			margin: 40rpx 0 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;

			}
		}

		.open-vip {
			display: flex;
			justify-content: space-between;
			background: #2B2B2B;
			align-items: center;
			padding: 24rpx 0;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;

			.text-vip {
				margin-left: 32rpx;
				display: flex;
				flex-direction: column;
				color: #FFDD9E;
				justify-content: flex-start;

				.title {
					font-family: SF Pro;
					font-weight: 700;
					font-style: Bold;
					font-size: 32rpx;
					leading-trim: NONE;
					line-height: 48rpx;
					letter-spacing: 0%;
				}

				.sub-title {
					font-family: SF Pro;
					font-weight: 274;
					font-style: Light;
					font-size: 32rpx;
					leading-trim: NONE;
					line-height: 48rpx;
					letter-spacing: 0%;

				}
			}

			.btn-vip {
				margin-right: 42rpx;
				width: 180rpx;
				height: 56rpx;
				border: none;
				border-radius: 198rpx;
				background: linear-gradient(90deg, #FFCC5E 0%, #FFE9BA 47.27%, #FFCC5E 100%);
			}
		}

		.white-block {
			margin-top: 44rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 48%;
				background: #F5F8FF;
				display: flex;
				flex-direction: column;
				padding: 30rpx 32rpx;
				border-radius: 24rpx;

				.title {
					font-family: SF Pro;
					font-weight: 700;
					font-style: Bold;
					font-size: 32rpx;
					leading-trim: NONE;
					line-height: 48rpx;
					letter-spacing: 0%;
				}

				.sub-title {
					margin-top: 14rpx;
					font-family: Work Sans;
					font-weight: 400;
					font-size: 26rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					color: #8C8C8C;
				}
			}

		}

		.menu-list {
			background: #F5F8FF;
			margin-top: 20rpx;
			padding: 20rpx 0 0 0;
			border-radius: 24rpx;
			display: flex;
			flex-wrap: wrap;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				margin-bottom: 20rpx;

				.menu-text {
					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 20rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
				}
			}
		}
	}
</style>