<template>
	<view class="container">
		<image src="/static/mineBanner.png" style="width: 750rpx; height: 762rpx; position: fixed; top: 0; left: 0; z-index: -1"></image>

		<wd-navbar :bordered="false" custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

		<view class="p30">
			<!-- 用户信息头部 -->
			<view class="user-header">
				<image class="avatar" :src="userInfo.avatar"></image>
				<view class="user-info">
					<view class="username">{{ userInfo.nickname || '微信用户' }}</view>
					<view class="phone">{{ userInfo.mobile }}</view>
				</view>
				<view class="invite-code" v-if="userInfo.inviteCodeImg" @click="$refs.popup.open()">
					<image style="width: 38rpx; height: 38rpx" src="/static/icons/code.png"></image>
					<text>邀请码</text>
				</view>
			</view>

			<!-- 优惠提示栏 -->
			<view class="promo-bar">
				<text>购买权益包至高享2.5折优惠</text>
				<view class="go-shop" @click="navTo('/pages/equity/equity', true)">
					<text>去下单</text>
					<image src="/static/icons/youh.png" style="width: 26rpx; height: 26rpx"></image>
				</view>
			</view>

			<!-- 我的钱包 -->
			<view class="wallet-section" @click="navTo('/pages/wallet/wallet', true)">
				<view class="section-title">
					<text>我的钱包</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>

				<view class="wallet-cards">
					<view class="wallet-item">
						<text class="amount red">{{ userInfo.money || 0 }}</text>
						<text class="label">余额</text>
						<text class="desc">包含奖励</text>
					</view>
					<view class="wallet-item">
						<text class="amount">{{ userInfo.performanceReward || 0 }}</text>
						<text class="label">业绩奖励</text>
						<text class="desc">售出分成</text>
					</view>
					<view class="wallet-item">
						<text class="amount">{{ userInfo.directReferralReward || 0 }}</text>
						<text class="label">直推奖励</text>
					</view>
					<view class="wallet-item">
						<text class="amount">{{ userInfo.indirectReferralReward || 0 }}</text>
						<text class="label">间推奖励</text>
					</view>
				</view>
			</view>

			<!-- 我的订单 -->
			<!-- 			<view class="order-section">
				<view class="section-title">
					<text>我的订单</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>

				<view class="order-types">
					<view class="order-type">
						<image src="/static/icons/wait-pay.png"></image>
						<text>待付款</text>
					</view>
					<view class="order-type">
						<image src="/static/icons/pre-order.png"></image>
						<text>已预定</text>
					</view>
					<view class="order-type">
						<image src="/static/icons/finished.png"></image>
						<text>已完成</text>
					</view>
					<view class="order-type">
						<image src="/static/icons/cancelled.png"></image>
						<text>已取消</text>
					</view>
				</view>
			</view> -->

			<!-- 功能列表 -->
			<view class="function-list">
				<view class="function-item" @click="navTo('/pages/mine/sett', true)">
					<image src="/static/icons/info.png"></image>
					<text>个人信息</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>
				<view class="function-item" @click="navTo('/pages/wallet/list', true)">
					<image src="/static/icons/money.png"></image>
					<text>我的账单</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>

				<view class="function-item" @click="navTo('/pages/team/team', true)">
					<image src="/static/icons/tj.png"></image>
					<text>我的团队</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>
				<view class="function-item" @click="navTo('/pages/address/list', true)">
					<image src="/static/icons/address.png"></image>
					<text>地址管理</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</view>
				<!-- 				<view class="function-item">
					<image src="/static/icons/tjr.png"></image>
					<text>推荐人</text>
					<text class="info">{{ userInfo.puser ? `${userInfo.puser.nickname} ${userInfo.puser.mobile}` : '无' }}</text>
				</view> -->
				<button class="function-item" open-type="contact">
					<image src="/static/icons/kf.png"></image>
					<text>联系客服</text>
					<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
				</button>
			</view>
		</view>

		<uni-popup ref="popup" type="center" border-radius="16rpx">
			<view class="shareBlock">
				<view style="width: 100%; text-align: right"><image @click="$refs.popup.close()" src="/static/icons/cha.png" class="shareBlock_close"></image></view>
				<image class="shareBlock_code" :src="userInfo.inviteCodeImg"></image>
				<view class="shareBlock_info">打开微信扫描二维码，注册时输入邀请码</view>
				<view class="shareBlock_codeInfo">
					<view class="shareBlock_codeInfo_left">
						邀请码：
						<text style="text-decoration: underline">{{ userInfo.inviteCode }}</text>
					</view>
					<view class="shareBlock_codeInfo_right" @click="copy(userInfo.inviteCode)">点击复制</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { lookImg,copy } from '@/utils/fun.js';

import { Store } from '@/store';

import { useNav } from '@/hooks/useNav';
const { navTo } = useNav();
const store = Store();

const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

onShow(async () => {
	await store.usersGetInfo();
});
// export default {
// 	data() {
// 		return {
// 			userInfo: {
// 				nickname: '九天应援雷声普化天尊',
// 				phone: '1863****301'
// 			},
// 			wallet: {
// 				balance: '23万',
// 				performanceReward: '98456',
// 				directReward: '68230',
// 				indirectReward: '63314'
// 			},
// 			orderTypes: [
// 				{ type: 'waitPay', name: '待付款' },
// 				{ type: 'preOrder', name: '已预定' },
// 				{ type: 'finished', name: '已完成' },
// 				{ type: 'cancelled', name: '已取消' }
// 			],
// 			functions: [
// 				{ name: '我的账单', icon: 'bill' },
// 				{ name: '我的推荐', icon: 'recommend' },
// 				{ name: '联系客服', icon: 'service' },
// 				{ name: '推荐人', info: '北极**大帝 1863****301', icon: 'referrer' },
// 				{ name: '个人信息', icon: 'profile' }
// 			]
// 		};
// 	},
// 	onLoad() {
// 		// 页面加载时执行的逻辑
// 	},
// 	methods: {
// 		// 点击钱包项目
// 		onWalletItemTap(e) {
// 			const { index } = e.currentTarget.dataset;
// 			const items = ['余额', '业绩奖励', '直推奖励', '间推奖励'];
// 			uni.showToast({
// 				title: `查看${items[index]}详情`,
// 				icon: 'none'
// 			});
// 		},

// 		// 点击订单类型
// 		onOrderTypeTap(e) {
// 			const { index } = e.currentTarget.dataset;
// 			const types = ['待付款', '已预定', '已完成', '已取消'];
// 			uni.showToast({
// 				title: `查看${types[index]}订单`,
// 				icon: 'none'
// 			});
// 		},

// 		// 点击功能项
// 		onFunctionTap(e) {
// 			const { index } = e.currentTarget.dataset;
// 			const names = ['我的账单', '我的推荐', '联系客服', '推荐人', '个人信息'];
// 			uni.showToast({
// 				title: `进入${names[index]}页面`,
// 				icon: 'none'
// 			});
// 		},

// 		// 进入个人中心
// 		goToProfile() {
// 			uni.navigateTo({
// 				url: '/pages/profile/index'
// 			});
// 		},

// 		// 查看邀请码
// 		viewInviteCode() {
// 			uni.showModal({
// 				title: '邀请码',
// 				content: '您的邀请码：123456',
// 				showCancel: false
// 			});
// 		},

// 		// 去下单
// 		goToOrder() {
// 			uni.navigateTo({
// 				url: '/pages/order/index'
// 			});
// 		}
// 	}
// };
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* 用户信息头部 */
.user-header {
	background-size: cover;
	padding: 40rpx 30rpx 60rpx;
	display: flex;
	/* align-items: center; */
	position: relative;
}

.user-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.avatar {
	width: 152rpx;
	height: 152rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	background-color: #eee;
}

.user-info {
	flex: 1;
	z-index: 1;
	height: 152rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.username {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

.phone {
	font-size: 30rpx;
	color: #666;
	margin-top: 24rpx;
}

.invite-code {
	display: flex;
	align-items: center;
	flex-direction: column;
	z-index: 1;
}

.invite-code text {
	font-size: 24rpx;
	color: #232323;
	margin-top: 10rpx;
}

.qrcode-btn {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #666;
}

.arrow {
	margin-left: 6rpx;
	color: #999;
}

/* 优惠提示栏 */
.promo-bar {
	width: 638rpx;
	height: 70rpx;
	background: #799675;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	padding: 0 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	margin: 0 auto;

	font-weight: bold;
	font-size: 24rpx;
	color: #ffff94;
}

.go-shop {
	display: flex;
	align-items: center;
}

/* 钱包区域 */
.wallet-section {
	background-color: white;
	margin: 0rpx 0 20rpx;
	padding: 30rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 0 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	border-bottom: 1px solid #eee;
	margin-bottom: 20rpx;
}

.wallet-cards {
	display: flex;
	justify-content: space-between;
}

.wallet-item {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
}

.label {
	font-size: 28rpx;
	color: #666;
}

.amount {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.red {
	color: #ff4d4f;
}

.desc {
	font-size: 20rpx;
	color: #999;
	margin-top: 6rpx;
}

/* 订单区域 */
.order-section {
	background-color: white;
	margin-bottom: 20rpx;
	padding: 30rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.order-types {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.order-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 22%;
}

.order-type image {
	width: 56rpx;
	height: 56rpx;
	margin-bottom: 10rpx;
}

.order-type text {
	font-size: 26rpx;
	color: #232323;
}

/* 功能列表 */
.function-list {
	background-color: white;
	margin-bottom: 20rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.function-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f7f7f7;
}

.function-item image {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.function-item text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.info {
	color: #232323 !important;
	font-weight: 500 !important;
	text-align: right;
}

button {
	all: unset;
}

button::after {
	all: unset;
}

.shareBlock {
	margin: auto;
	width: 650rpx;
	height: 688rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	&_close {
		width: 68rpx;
		height: 68rpx;
	}
	&_code {
		width: 392rpx;
		height: 392rpx;
	}
	&_info {
		font-size: 24rpx;
		color: #cccccc;
		margin: 24rpx 0;
	}
	&_codeInfo {
		display: flex;
		align-items: center;
		&_left {
			font-weight: bold;
			font-size: 32rpx;
			color: #232323;
		}
		&_right {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
</style>
