<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.quan_yi_level.level }}</text>
				<view class="lv-box-ouqi column">
					<text>
						<template v-if="userinfo.quan_yi_level.cha > 0">还差{{ userinfo.quan_yi_level.cha
						}}欧气值升级</template>
						<template v-if="userinfo.quan_yi_level.cha == -1">已满级</template>
					</text>
					<view class="mt10 relative">
						<!-- <text class="lv-box-num">{{userinfo.quan_yi_level.jindu+'%'}}</text> -->
						<cmd-progress :percent="userinfo.quan_yi_level.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 v-if="zuanshi" class="other-item" @click="$c.to({ url: '/pages/user/yetx' })">
					<view class="title">{{ $config.getAppSetting('balance_name') }}</view>
					<view class="flex row">
						<view class="num" style="">{{ formatNumber(userinfo.money) }}</view>
						<image @click.stop="$c.to({ url: '/pages/user/recharge-page' })"
							:src="$img1('my/ic_recharge.png')" style="width: 83rpx; height: 48rpx; margin-left: 10rpx;"
							mode=""></image>
					</view>
				</view>
				<view class="other-item" @click="$c.to({ url: '/pages/user/bi_jl' })">
					<view class="title">{{ $config.getAppSetting('currency1_name') }}</view>
					<view class="num" style="color: #333333;">{{ formatNumber(userinfo.integral) }}
					</view>
				</view>

				<view class="other-item" @click="$c.to({ url: '/pages/user/jf_jl' })">
					<view class="title">{{ $config.getAppSetting('currency2_name') }}</view>
					<view class="num" style="color: #333333;">{{ formatNumber(userinfo.money2) }}
					</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" :key="i"
						@click="handleMenuClick(item)">
						<view class="icon">
							<image :src="$img1(item.icon)" mode=""></image>
						</view>
						<view class="title">
							{{ item.title }}
						</view>
					</view>

					<!-- 微信小程序客服菜单项 -->
					<view v-if="item.show && item.isCustomService" class="menu-item relative" :key="`service-${i}`">
						<view class="icon">
							<image :src="$img1(item.icon)" mode=""></image>
						</view>
						<view class="title">
							{{ item.title }}
						</view>
						<button class="hide" open-type="contact"></button>
					</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="https://image.zfunbox.cn/topic/20250418/0b40de65d2fc4801517569193bfd4cac.png" 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>
export default {
	components: {},
	data() {
		return {
			z_imgPath: this.$z_img2,
			userinfo: '',
			menuList: [],
			zuanshi: false,
			show: 1,
			taskList: []
		}
	},
	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();
		return {
			imageUrl: imageUrl,
			title: "友达赏，正版潮玩手办一番赏",
			path: '/pages/user/index?pid=' + uni.getStorageSync('userinfo').ID
		}
	},
	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);
		},
		receiveCoupon() {
			const coupon_id = uni.getStorageSync('_ou_coupon_id')

			this.req({
				url: 'coupon_ling',
				data: {
					coupon_id
				},
				success: res => {
					uni.removeStorageSync('_ou_coupon_id')

					if (res.status == 1) {
						this.$c.toast({
							title: res.msg,
							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
							}
						})
					}
				}
			})
		},

		completeTask(item) {
			this.req({
				url: 'ling_task',
				data: {
					task_list_id: item.id
				},
				success: res => {
					if (res.status == 1) {
						this.$c.toast({
							title: res.msg,
							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 => { }
			})
		},

		tokefu() {
			// #ifdef  MP
			wx.openCustomerServiceChat({
				extInfo: {
					url: uni.getStorageSync('wx_link') //客服地址链接
				},
				corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
				success(res) {
					console.log(res, 1)
				},
				fail(res) {
					console.log(res, 2)
				}
			})
			// #endif
		},

		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 this.$request.post('user');
			console.log("resresresres", res);
			if (res.status == 1) {
				this.userinfo = res.data.userinfo
				this.taskList = res.data.task_list
				uni.setStorageSync('userinfo', this.userinfo)
				uni.setStorageSync('jump_appid', res.data.other.jump_appid)
				uni.setStorageSync('wx_link', res.data.other.wx_link)
				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'
				})
			}
		},
		/**
		 * 格式化数字，如果小数部分是.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;
	background-color: #F7F7F7;

	.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: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}

				.user-day {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #8A8A8A;
				}
			}
		}

		.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: 500;
				font-size: 48rpx;
				color: #333333;
				width: 100rpx;
			}

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

				>text {
					font-weight: 400;
					font-size: 16rpx;
					color: #4C4C4C;
				}

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

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

			&-detail {
				width: 96rpx;
				height: 36rpx;
				position: absolute;
				left: 34rpx;
				top: 86rpx;
				font-weight: 400;
				font-size: 16rpx;
				color: #4C4C4C;
				border-radius: 6rpx;
				background-color: #E6F791;
			}
		}
	}

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

		.other-num {
			display: flex;
			padding: 0 36rpx;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.other-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 110rpx;

				.title {
					font-size: 28rpx;
					font-weight: 540;
					color: #333333;
				}

				.num {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}

	.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: #E6F791;

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

					&.act {
						background: #333333;

						text {
							font-weight: 400;
							font-size: 24rpx;
							color: #D8FD24;
						}
					}

					&.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: 500;
			font-size: 28rpx;
			color: #333333;
			padding-top: 36rpx;
			padding-left: 32rpx;
		}

		.menu-card {
			margin: 30rpx auto 0;
			width: 690rpx;
			padding: 1rpx 0 40rpx;
			display: flex;
			flex-flow: row wrap;

			.menu-item {
				margin-top: 40rpx;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
				width: 25%;

				.icon {
					width: 60rpx;
					height: 60rpx;
				}

				.title {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #4C4C4C;
				}
			}
		}
	}
}

.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>