<template>
	<view class="mine">
		<uni-nav-bar left-text=" " color="#fff" backgroundColor="transparent" :border="false" :statusBar="true"
			:fixed="false"></uni-nav-bar>

		<view class="user-card">
			<view class="user-info" @click="toChange">
				<view class="avatar">
					<image v-if="userinfo.headimg" :src="userinfo.headimg" mode="scaleToFill" />
				</view>

				<view class="info">
					<view v-if="userinfo.nickname" class="nick hang1">
						{{ userinfo.nickname }}
					</view>

					<view v-else class="nick">未登录</view>

					<view v-if="userinfo" class="user-day">
						已经陪你走过了{{ userinfo.day }}天
					</view>
				</view>
			</view>

			<view v-if="userinfo && getIsCheck()" class="lv-box align-center justify-between"
				@click="$c.to({ url: '/package/mine/equity' })">
				<text class="lv-box-dengji">LV.{{ userinfo.quanYiLevel.level }}</text>
				<view class="lv-box-ouqi column">
					<text>
						<template v-if="userinfo.quanYiLevel.cha > 0">还差{{ userinfo.quanYiLevel.cha
						}}欧气值升级</template>
						<template v-if="userinfo.quanYiLevel.cha == -1">已满级</template>
					</text>
					<view class="mt10 relative">
						<!-- <text class="lv-box-num">{{userinfo.quanYiLevel.jindu+'%'}}</text> -->
						<cmd-progress :percent="userinfo.quanYiLevel.jindu" :show-info="false" stroke-color="#FF862D"
							:strokeWidth="3"></cmd-progress>
					</view>
				</view>
				<text class="lv-box-detail center" @click="$c.to({ url: '/package/mine/equity' })">查看详情</text>
				<image style="width: 206rpx; height: 206rpx; position: absolute; top: -40rpx; right: 8rpx;"
					:src="$img1('my/ou.png')">
				</image>
			</view>

			<!-- <view class="rbtn btn1 flex" @click="$c.to({ url: '/package/index/sign' })">
				<image class="img100" :src="$img1('my/sign.png')"></image>
			</view> -->

		</view>

		<view v-if="getIsCheck('user_money')" class="money-card">
			<view class="other-num">
				<view class="other-item" @click="toFinancePage('/pages/user/bi_jl')">
					<view class="item-content">
						<view class="title">{{ $config.getAppSetting('currency1_name') }}</view>
						<view class="num">{{ formatNumber(userinfo.integral) }}</view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="other-item" @click="toFinancePage('/pages/user/jf_jl')">
					<view class="item-content">
						<view class="title">{{ $config.getAppSetting('currency2_name') }}</view>
						<view class="num">{{ formatNumber(userinfo.money2) }}</view>
					</view>
				</view>
				<view v-if="zuanshi" class="divider"></view>
				<view v-if="zuanshi" class="other-item" @click="toFinancePage('/pages/user/yetx')">
					<view class="item-content">
						<view class="title-wrapper">
							<view class="title">{{ $config.getAppSetting('balance_name') }}</view>
							<view class="recharge-tag" @click.stop="toFinancePage('/pages/user/recharge-page')">充值
							</view>
						</view>
						<view class="num">{{ formatNumber(userinfo.money) }}</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="taskList.length > 0 && getIsCheck('user_task')" class="task">
			<view class="task-title">主要任务</view>
			<view
				style="width: 622rpx; height: 2rpx; background-color: #F3F3F3; margin-left: 32rpx; margin-top: 34rpx;">
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(item, i) in taskList" :key="i">
					<view class="task-l">
						<view class="title">{{ item.title }} ({{ item.ywc_count }}/{{ item.number }})</view>

						<view class="num">欧气值+{{ item.z_number }}</view>

					</view>

					<view class="task-r">
						<view v-if="item.is_complete == 0" class="btn" @click="toPage(item.id)">
							<text>去完成</text>

						</view>

						<view v-if="item.is_complete == 1" class="btn act" @click="completeTask(item)">
							<text>待领取</text>
						</view>

						<view v-if="item.is_complete == 2" class="btn dis">
							<text>已领取</text>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="qita mt30">
			<view class="qita-title" v-if="getIsCheck('user_menu_title')">其他服务</view>
			<view class="menu-card">
				<template v-for="(item, i) in menuList">
					<!-- 普通菜单项 -->
					<view v-if="item.show && !item.isCustomService" class="menu-item-wrapper" :key="i">
						<view class="menu-item" @click="handleMenuClick(item)">
							<view class="icon">
								<image :src="$img1(item.icon)" mode=""></image>
							</view>
							<view class="title">
								{{ item.title }}
							</view>
							<view class="arrow">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>
						<view v-if="i < menuList.filter(m => m.show).length - 1" class="divider-line"></view>
					</view>

					<!-- 微信小程序客服菜单项 -->
					<view v-if="item.show && item.isCustomService" class="menu-item-wrapper relative"
						:key="`service-${i}`">
						<view class="menu-item">
							<view class="icon">
								<image :src="$img1(item.icon)" mode=""></image>
							</view>
							<view class="title">
								{{ item.title }}
							</view>
							<view class="arrow">
								<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
							</view>
						</view>
						<button class="hide" open-type="contact"></button>
						<view v-if="i < menuList.filter(m => m.show).length - 1" class="divider-line"></view>
					</view>
				</template>
			</view>
		</view>

		<!-- 群聊弹窗 -->
		<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
			<view class="pop-ball">
				<image show-menu-by-longpress :src="erweimaUrl" mode="aspectFit"
					style="width:80vw;height:468px;position:relative;top:-14%;left:0;">
				</image>
			</view>
			<view class="pop-ball-close flex" @click="$refs.qunliao_show.close()">
				<view style="width: 48rpx;height: 48rpx;border-radius: 50%;opacity: 0.5;">
					<image show-menu-by-longpress :src="$img1('common/close.png')" class="img100" />
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import {
		getUser
	} from '@/common/server/user.js';
	import {
		receiveCoupon
	} from '@/common/server/coupon.js';
	import {
		receiveTaskReward
	} from '@/common/server/welfare.js';

	export default {
		components: {},
		data() {
			return {
				z_imgPath: this.$z_img2,
				userinfo: '',
				menuList: [],
				zuanshi: true,
				show: 1,
				taskList: []
			}
		},
		computed: {
			// 获取显示的菜单列表
			visibleMenuList() {
				return this.menuList.filter(item => item.show);
			},
			// 福利群二维码图片URL
			erweimaUrl() {
				return this.$config.getBaseConfigKey('erweima') ||
					'https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/topic/20250418/0b40de65d2fc4801517569193bfd4cac.png';
			}
		},
		onLoad(e) {
			if (e.ou_coupon_id) {
				uni.setStorageSync('_ou_coupon_id', e.ou_coupon_id)
			}
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
			console.log(this.$platform.code);

		},
		onHide() {
			// uni.setStorageSync('page', this.$mp.page.route)
		},
		onShareAppMessage() {
			let imageUrl = this.$config.getShareImageUrl();
			// 使用小写 id，兼容新版 .NET API
			const userinfo = uni.getStorageSync('userinfo') || {};
			const pid = userinfo.id || userinfo.ID || '';
			return {
				imageUrl: imageUrl,
				title: this.$config.getAppSetting('share_title_detail') || "哈尼盲盒，正版潮玩手办一番赏",
				path: '/pages/user/index?pid=' + pid
			}
		},
		onShow() {
			this.getdata()
			// 获取平台菜单列表
			this.menuList = this.$platform.getUserMenuList();
			// this.zuanshi = this.$platform.code != "MP-WEIXIN";
			const curPages = getCurrentPages()[0]; // 获取当前页面实例
			// #ifdef  MP
			if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 4
				});
			}
			// #endif

		},
		methods: {
			toChange() {
				var user = uni.getStorageSync('userinfo');
				if (user == null || user == "" || this.userinfo == '') {
					uni.setStorageSync('redirect', '/pages/user/index');
					this.$c.nav("/pages/user/login")
					return;
				}

				this.$c.to({
					url: '/pages/user/change'
				})
			},
			getIsCheck(tag) {
				return !this.$platform.getIsCheck(tag);
			},
			async receiveCoupon() {
				const coupon_id = uni.getStorageSync('_ou_coupon_id')

				const res = await receiveCoupon(coupon_id);
				uni.removeStorageSync('_ou_coupon_id')

				if (res.status == 1) {
					this.$c.toast({
						title: '领取成功',
						duration: 500,
						success: () => {
							this.$c.to({
								url: '/package/mine/coupon-detail',
								query: {
									id: coupon_id
								}
							})
						}
					})
				} else if (res.status == 2222) {
					this.$c.to({
						url: '/package/mine/coupon-detail',
						query: {
							id: coupon_id
						}
					})
				}
			},

			async completeTask(item) {
				const res = await receiveTaskReward(item.id);
				if (res.status == 1) {
					this.$c.toast({
						title: '领取成功',
						duration: 500,
						success: () => {
							this.getdata()
						}
					})
				}
			},

			/**
			 * 处理菜单项点击
			 * @param {Object} item 菜单项
			 */
			handleMenuClick(item) {
				if (item.handler) {
					item.handler(item, this);
				}
			},

			copy(e) {
				uni.setClipboardData({
					data: `${e}`,
					success: result => {},
					fail: error => {}
				})
			},

			getlist(index) {
				this.show = index
			},
			todetail(a) {
				if (a.type == 2) {
					this.$customRouter.navigateTo('/pages/shouye/detail_wuxian', {
						goods_id: a.goods_id
					});
				} else {
					this.$customRouter.navigateTo('/pages/shouye/detail', {
						goods_id: a.goods_id,
						goods_num: a.num
					});
				}
			},

			async getdata() {
				if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == "") {
					this.userinfo = '';
					this.taskList = [];
					return;
				}

				const res = await getUser();
				console.log("=== getUser API响应 ===");
				console.log("完整响应:", JSON.stringify(res));
				console.log("res.data:", JSON.stringify(res.data));
				console.log("res.data.userinfo:", JSON.stringify(res.data?.userinfo));
				console.log("money字段:", res.data?.userinfo?.money);
				console.log("money2字段:", res.data?.userinfo?.money2);
				console.log("integral字段:", res.data?.userinfo?.integral);

				if (res.status == 1) {
					this.userinfo = res.data.userinfo
					this.taskList = res.data.taskList || []

					console.log("=== 赋值后 this.userinfo ===");
					console.log("this.userinfo:", JSON.stringify(this.userinfo));
					console.log("this.userinfo.money:", this.userinfo?.money);

					uni.setStorageSync('userinfo', this.userinfo)
					uni.setStorageSync('corpid', res.data.other?.corpid)
				}

			},


			//跳转页面
			toPage(id) {
				if (id == 1) {
					this.$c.to({
						url: '/pages/user/tui-guang'
					})
				} else {
					this.$c.to({
						type: 3,
						url: '/pages/shouye/index'
					})
				}
			},
			/**
			 * 跳转到财务相关页面（需要登录）
			 * @param {String} url - 页面路径
			 */
			toFinancePage(url) {
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.setStorageSync('redirect', '/pages/user/index');
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						this.$c.nav('/pages/user/login');
					}, 100);
					return;
				}
				this.$c.to({
					url
				});
			},
			/**
			 * 格式化数字，如果小数部分是.00则只显示整数部分
			 * @param {Number|String} num - 要格式化的数字
			 * @param {String} defaultVal - 默认值，当num为空时返回
			 * @return {String} - 格式化后的数字字符串
			 */
			formatNumber(num, defaultVal = '0') {
				if (num === undefined || num === null || num === '' || num === 0) {
					return defaultVal;
				}

				const numStr = num.toString();
				if (numStr.endsWith('.00')) {
					return parseFloat(num).toFixed(0);
				}

				return numStr;
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		// width: 750rpx;
		width: 100vw;
		min-height: 100vh;

		&::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			background-image: url('https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/image/Rectangle.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.user-card {
			position: relative;
			padding: 20rpx 30rpx;

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

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					background: #D8D8D8;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					width: calc(100% - 100rpx);
					box-sizing: border-box;
					padding-left: 30rpx;

					.nick {
						max-width: 200rpx;
						font-size: 32rpx;
						font-family: STHupo, Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.user-day {
						margin-top: 10rpx;
						font-size: 22rpx;
						font-family: STHupo, Source Han Sans CN;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.75);
					}
				}
			}

			.lv-box {
				height: 216rpx;
				margin-top: 80rpx;
				box-sizing: border-box;
				position: relative;
				background: url($imgurl+'my/userVip.png') no-repeat 0 0 / 100% 100%;
				padding-left: 136rpx;

				&-dengji {
					position: absolute;
					left: 32rpx;
					top: 16rpx;
					font-weight: 400;
					font-size: 56rpx;
					font-family: STHupo, Source Han Sans CN;
					color: #404040;
					width: 100rpx;
				}

				&-ouqi {
					position: absolute;
					bottom: 24rpx;
					left: 32rpx;

					>text {
						font-weight: 400;
						font-size: 20rpx;
						font-family: STHupo, Source Han Sans CN;
						color: #404040;
					}

					>view {
						width: 618rpx;
						height: 6rpx;
						border-radius: 6rpx;

						::v-deep.cmd-progress-inner {
							background: #CCCCCC;
						}
					}
				}

				&-detail {
					width: 112rpx;
					height: 40rpx;
					position: absolute;
					left: 34rpx;
					top: 86rpx;
					font-weight: 400;
					font-size: 20rpx;
					font-family: STHupo, Source Han Sans CN;
					color: #404040;
					border-radius: 10rpx;
					background-color: #FFED94;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.money-card {
			width: 690rpx;
			margin: 20rpx auto 0;

			.other-num {
				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 0;

				.other-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

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

						.title-wrapper {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 16rpx;
							width: 100%;

							.title {
								font-size: 30rpx;
								font-weight: 400;
								font-family: STHupo, Source Han Sans CN;
								color: rgba(64, 64, 64, 0.85);
								margin: 0;
							}

							.recharge-tag {
								margin-left: 10rpx;
								padding: 2rpx 8rpx;
								background-color: #FFED94;
								border-radius: 78rpx;
								border: 2rpx solid #FFBE14;
								font-size: 20rpx;
								font-weight: 400;
								
								color: #404040;
								flex-shrink: 0;
							}
						}

						.title {
							font-size: 30rpx;
							font-weight: 400;
							font-family: STHupo, Source Han Sans CN;
							color: rgba(64, 64, 64, 0.85);
							margin-bottom: 16rpx;
						}

						.num {
							font-size: 28rpx;
							font-weight: 400;
							font-family: STHupo, Source Han Sans CN;
							color: #333333;
						}

					}
				}

				.divider {
					width: 1rpx;
					height: 60rpx;
					background-color: #F3F3F3;
				}
			}
		}

		.task {
			margin: 30rpx auto 0;
			width: 690rpx;
			box-sizing: border-box;
			padding: 0 0 20rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.task-title {
				position: relative;
				z-index: 1;
				margin-left: 32rpx;
				padding-top: 34rpx;
				margin-bottom: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.task-list {
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.task-item {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.task-l {
					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.num {
						margin: 20rpx 0;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8A8A8A;
					}
				}

				.task-r {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					padding-left: 30rpx;

					.btn {
						width: 142rpx;
						height: 60.35rpx;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFED94;

						text {
							font-weight: 600;
							font-size: 24rpx;
							color: #333333;
						}

						&.act {
							background: #333333;

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

						&.dis {
							background: #F5F5F5;
							border-radius: 16rpx;

							text {
								color: #999999;
							}
						}
					}
				}
			}
		}

		.qita {
			margin: 30rpx auto 0;
			width: 690rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			&-title {
				font-weight: bold;
				font-size: 36rpx;
				color: #404040;
				padding-top: 36rpx;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}

			.menu-card {
				padding: 0 32rpx 20rpx;
				display: flex;
				flex-direction: column;

				.menu-item-wrapper {
					position: relative;

					.menu-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding: 24rpx 0;
						width: 100%;

						.icon {
							width: 48rpx;
							height: 48rpx;
							margin-right: 24rpx;
							flex-shrink: 0;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.title {
							flex: 1;
							font-size: 28rpx;
							font-weight: 400;
							color: #464646;
							margin: 0;
						}

						.arrow {
							flex-shrink: 0;
							margin-left: 20rpx;
						}
					}

					.divider-line {
						height: 1rpx;
						background-color: #E0E0E0;
						margin: 0;
					}
				}
			}
		}
	}

	.pop-ball {
		width: 85vw;
		position: relative;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop-ball-close {
		margin-top: 20rpx;
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>