<template>
	<view>
		<up-navbar title="我的" :autoBack="true" bgColor="transparent" :fixed="true">
		</up-navbar>
		<view class="user-info">
			<image class="bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp"
				mode="widthFix"></image>
			<view class="u-card">
				<view style="display: flex;margin-bottom: 44rpx;">
					<up-avatar :src="userInfo.avatar" size="56"></up-avatar>
					<view class="content">
						<view class="u-phone">{{userInfo.nickname}}</view>
						<view class="u-id">ID: {{userInfo.id}}</view>
					</view>
				</view>

				<view class="u-card-level">
					<view class="u-level-item">
						<view class="u-level-item-num">{{userInfo.vip_name}}</view>
						<view class="u-level-item-txt">会员等级</view>
					</view>
					<view class="u-level-item">
						<view class="u-level-item-num">{{userInfo.discount}}</view>
						<view class="u-level-item-txt">可享折扣</view>
					</view>
					<view class="u-level-item">
						<view class="u-level-item-num">{{userInfo.now_money}}</view>
						<view class="u-level-item-txt">可用余额</view>
					</view>
				</view>
			</view>
		</view>

		<view class="member">
			<view class="member-wrap">
				<view class="member-left">
					<up-image width="36rpx" height="36rpx" src="/static/icon/silver.webp"></up-image>
					<text>初级会员</text>
					<up-line direction="col" color="#707070" margin="0 10rpx" length="12"></up-line>
					<view :style="{'font-weight':userInfo.user_ship>0?'bold':'normal'}">
						{{userInfo.user_ship>0?'享折扣权益':'活动期间下单即享初级会员'}}
					</view>
				</view>
				<view class="member-right" @click="handleBack(userInfo.user_ship)">
					{{userInfo.user_ship>0?'立即升级':'立即下单'}}
				</view>
			</view>

			<view class="member-progress">
				<view>
					<text>当前已充值{{userInfo.total_recharge_amount}}，升级还需{{userInfo.next_limit}}</text>
					<text>{{userInfo.next_level}}</text>
				</view>
				<up-line-progress :percentage="(userInfo.total_recharge_amount/userInfo.next_limit).toFixed(2)"
					activeColor="#A26341" inactiveColor="#fff" height="8rpx"></up-line-progress>
			</view>
		</view>

		<view class="order-info-box">
			<view class="order-info">
				<view class="info-head">我的订单</view>
				<view class="info-list">
					<view class="list-item" @click="navTo(1)">
						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png">
						</image>
						<view class="">待付款</view>
						<view class="badge" v-if="orderCount.no_pay">{{orderCount.no_pay}}</view>
					</view>

					<view class="list-item" @click="navTo(2)">
						<image src="/static/icon/wait.webp">
						</image>
						<view class="">待核销</view>
						<view class="badge" v-if="orderCount.waiting">{{orderCount.waiting}}</view>
					</view>

					<view class="list-item" @click="navTo(2)">
						<image src="/static/icon/done.webp">
						</image>
						<view class="">已核销</view>
						<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
					</view>

					<view class="list-item" @click="navTo()">
						<image src="/static/icon/back.webp">
						</image>
						<view class="">售后/退款</view>
						<view class="badge" v-if="orderCount.applyRefund">{{orderCount.applyRefund}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<up-cell-group>
				<up-cell title="我的余额" :isLink="true" url="/pageQuota/Balance/index"></up-cell>
				<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
			</up-cell-group>
		</view>

		<view class="card">
			<up-cell-group>
				<up-cell title="意见反馈" :isLink="true" url="/pageQuota/feedBack/index"></up-cell>
				<up-cell title="关于我们" :isLink="true" url="/pageQuota/aboutUs/index"></up-cell>
				<up-cell title="退出登录" :isLink="true" @click="logout"></up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import useUserStore from "@/store/user";
	import {
		orderCountApi
	} from "@/api/order.js";
	import {
		onShow
	} from "@dcloudio/uni-app"

	const userStore = useUserStore();

	const userInfo = ref({});

	const orderCount = ref({
		no_pay: 0,
		receiving: 0,
		waiting: 0,
		applyRefund: 0
	})
	const getOrderCount = () => {
		orderCountApi().then(res => {
			orderCount.value = res.data;
		})
	}

	// 返回下单 或者充值
	const handleBack = (e) => {
		if (e > 0) {
			uni.navigateTo({
				url: "/pages/charge/charge"
			})
		} else {
			uni.navigateBack()
		}
	}

	const navTo = (type = 0) => {
		uni.navigateTo({
			url: `/pagesOrder/order/order?type=${type}`
		})
	}

	const logout = () => {
		userStore.setToken('');
		userStore.setUserInfo({});
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}

	onShow(() => {
		userInfo.value = userStore.userInfo;
		getOrderCount();
	})
</script>

<style lang="scss">
	.user-info {
		overflow: hidden;
		position: relative;
		width: 750rpx;
		height: 436rpx;
		/* #ifdef H5 */
		height: 350rpx;
		/* #endif */

		.bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.u-card {
			box-sizing: border-box;
			padding: 50rpx 0 50rpx 50rpx;
			position: absolute;
			top: 100rpx;
			left: 0;
			z-index: 2;

			.content {
				width: 500rpx;
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.u-phone {
					font-size: 32rpx;
					margin-bottom: 16rpx;
				}

				.u-id {
					font-size: 24rpx;
				}
			}

			.u-card-level {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;

				.u-level-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					&:not(:nth-last-child(1)) {
						margin-right: 100rpx;
					}

					.u-level-item-num {
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.u-level-item-txt {
						font-size: 26rpx;
						color: #444444;
					}
				}
			}
		}
	}

	.member {
		width: 710rpx;
		margin: 0 auto;
		background: linear-gradient(135deg, #FFF9E8 0%, #F3E7C0 100%);
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(113, 113, 113, 0.11);
		border-radius: 12rpx;
		padding: 0 18rpx 22rpx 22rpx;
		box-sizing: border-box;

		.member-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 78rpx;
			margin-bottom: 20rpx;

			.member-left {
				display: flex;
				align-items: center;

				text {
					font-weight: bold;
					font-size: 26rpx;
					color: #060606;
				}

				view {
					font-size: 24rpx;
					color: #060606;
				}
			}

			.member-right {
				width: 136rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #7D661E;
				text-align: center;
			}
		}

		.member-progress {
			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				text {
					font-size: 22rpx;
					color: #A26341;
				}
			}
		}
	}

	.order-info-box {
		.order-info {
			width: 710rpx;
			background-color: #fff;
			border-radius: 14rpx;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
			background-size: 28% 100%;
			background-position: right;
			background-repeat: no-repeat;
			margin: 0 auto;
			padding: 28rpx 0 40rpx 0;

			.info-head {
				font-size: 32rpx;
				font-weight: bold;
				margin: 0 0 30rpx 30rpx;
			}

			.info-list {
				height: 110rpx;
				display: flex;
				font-size: 26rpx;

				.list-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					.badge {
						position: absolute;
						top: 0;
						right: 20%;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 30rpx;
						font-size: 22rpx;
						color: #fff;
						background-color: #F55726;
					}
				}
			}
		}
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}
</style>