<template>
	<view class="mine-container">
		<view class="mineGroundImgView">
			<image :src="`${imgPrefix}mine-ground.png`" mode="aspectFill" class="groundImg"></image>
			<view class="userInfoView">
				<view class="userLeft"
					@click="userInfo.userID ? jumpTo('/pages/client/mine/userInfo') : jumpTo('/pages/client/auth/index')">
					<image
						:src="userInfo.userID && userInfo.avatar ? userInfo.avatar : `${imgPrefix}home-head.png`"
						class="userAvatar" mode="aspectFill" />
					<view style="margin-left: 16rpx;">
						<view>
							<view class="userName">
								{{ userInfo.userID && userInfo.username ? userInfo.username : '嗨，你好呀' }}
							</view>
						</view>
						<!-- <view class="vipWrapper">
							<image class="lableImg" :src="`${imgPrefix}home-vipLabel.png`" mode=""></image>
							v{{ userInfo.vipLevel || 1 }}会员
						</view> -->
					</view>
				</view>
				<!-- <view class="userRight">
					<view class="userRgihtItemView" @click="jumpTo('/pages/client/recharge/index?tab=points')">
						<view class="num">
							{{ displayTotalPoints }}
						</view>
						<view class="text">
							积分
						</view>
					</view>
					<view class="userRgihtItemView"  @click="jumpTo(`/pages/client/recharge/my-card?user_id=${userInfo.id}`) ">
						<view class="num">
							{{ displayMembershipCount }}
						</view>
						<view class="text">
							卡包
						</view>
					</view>
					<view class="userRgihtItemView"  @click="jumpTo(`/pages/client/coupon/list`)">
						<view class="num">
							{{ displayCouponCount }}
						</view>
						<view class="text">
							券包
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<!-- <view class="myPriceView">
			<view style="display: flex;align-items: center;">
				<image :src="`${imgPrefix}accountPrice.png`" class="priceImg"></image>
				<text class="fs-24">我的余额：{{ displayWalletBalance !== '' ? displayWalletBalance : 0 }}元</text>
			</view>
			<view
				@click="jumpTo(`/pages/client/recharge/index?user_id=${userInfo.userID}`)"
				class="fs-24">
				去充值
				<image :src="`${imgPrefix}right-arrow.png`" class="arrowImg"></image>
			</view>
		</view> -->

		<!-- <view class="menuView">
			<view class="menuItem" @click="jumpTo('/pages/client/petOrder/index')">
				<image class="menuImg" :src="`${imgPrefix}mine-resaOrder.png`"></image>
				<view class="menuTitle">
					服务订单
				</view>
			</view>
			<view class="menuItem" @click="jumpTo('/pages/client/order/list')">
				<image class="menuImg" :src="`${imgPrefix}mine-shopOrder.png`"></image>
				<view class="menuTitle">
					商城订单
				</view>
			</view>
			<view class="menuItem"
				@click="jumpTo(`/pages/client/recharge/membership-code?yaoqing_code=${userInfo.yaoqing_code}&member_id=${userInfo.id}`)">
				<image class="menuImg" :src="`${imgPrefix}home-invite .png`"></image>
				<view class="menuTitle">
					邀请有礼
				</view>
			</view>
		</view> -->
		<!-- <view class="mine-slide">
        <view class="recharge-slide">
          <view class="scroll">
            <view class="card-roll">
              <image
                class="file-pet"
                :src="`${imgPrefix}myRecharge.png`"
                mode="widthFix"
              />
              <view
                class="recharge"
                @click="
                  jumpTo(
                    `/pages/client/recharge/index?wallet_id=${walletList.wallet_id}&user_id=${walletList.user_id}&balance=${walletList.balance}`
                  )
                "
              >
              
              </view>
              <view
                class="use-record"
                @click="
                  jumpTo(
                    `/pages/client/recharge/use-list?wallet_id=${walletList.wallet_id}&user_id=${walletList.user_id}`
                  )
                "
              >
              
              </view>
             
            </view>
          </view>
        </view>
      </view> -->


		<!-- <view class="meber-m" @click="jumpTo(`/pages/richText/member-interests?userId=${userInfo.id}&nick_name=${userInfo.nick_name}`)">
          <image class="meb-im" :src="`${imgPrefix}member-vip.png`" />
      </view> -->
	  

		<view class="navView">
			<view class="navItem" @click="jumpTo('/pages/client/order/list')">
				<view class="navTitle">
					商城订单
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
			<!-- <view class="navItem" @click="jumpTo('/pageHome/selectPet/index')">
				<view class="navTitle">
					我的宠物
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view> -->
			<view class="navItem" @click="jumpTo('/pageHome/selectAddress/index')">
				<view class="navTitle">
					收货地址
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
		
			
			
			<view class="navItem" @click="showContact">
				<view class="navTitle">
					反馈建议
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
		
			<view class="navItem" @click="jumpTo('/pages/client/news/index')">
				<view class="navTitle">
					系统消息
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
			<view class="navItem" @click="jumpTo('/pages/client/mine/qualification')">
				<view class="navTitle">
					服务资质
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
			<!-- <view class="navItem" @click="jumpTo(`/pages/client/mine/aboutus`)">
				<view class="navTitle">
					关于平台
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view> -->
			<view class="navItem" style="border: none;" v-if="userInfo.phone" @click="showLogoutModal = true">
				<view class="navTitle">
					退出登录
				</view>
				<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
			</view>
		</view>

<pop-up-modal v-if="showLogoutModal" content="确定要退出登录吗？" @cancel="showLogoutModal = false" @confirm="logout" />

		<contact-modal v-if="showContactModal" :data="configInfo" @close="showContactModal = false" />
		
		<!-- 可拖动联系客服组件 -->
		<DraggableContact ref="draggableContact" :onClick="handleContactClick" />
		
		<WeChatCopyModal ref="wechatCopyModal" />
	</view>
</template>

<script>
import CommonCell from "@/components/CommonCell.vue";
import PopUpModal from "../../../components/PopUpModal.vue";
import ContactModal from "@/components/ContactModal.vue";
import WeChatCopyModal from "@/components/WeChatCopyModal.vue";
import DraggableContact from "@/components/DraggableContact.vue";
	import {
		loginOut,
		getUserInfo,
	} from "../../../api/user";
	import appConfig from "@/constants/app.config";
	import {
		jumpToWeChat,
		imgPrefix
	} from "@/utils/common";

	export default {
components: {
			CommonCell,
			PopUpModal,
			ContactModal,
			WeChatCopyModal,
			DraggableContact,
		},
		data() {
			return {
				imageList: [{
						id: "1",
						image: `${imgPrefix}member-vip.png`,
					},
					{
						id: "2",
						image: `${imgPrefix}invite-friend.png`,
					},
					{
						id: "3",
						image: `${imgPrefix}Carousel.png`,
					},
				],
				progress: 8000,
				isLogin: true,
				showLogoutModal: false,
				showContactModal: false,
				couponList: '',
				configInfo: {
					kefu_pic: "",
					kefu_time: "",
				},
				appConfig,
				imgPrefix,
			};
		},
	computed: {
		userInfo() {
			return this.$store.state?.user?.userInfo || {};
		},
		// 显示积分，未登录或401时展示0
		displayTotalPoints() {
			const userInfo = this.$store.state?.user?.userInfo;
			if (!userInfo) return 0;
			const points = userInfo.totalPoints;
			return points !== undefined && points !== null ? points : 0;
		},
		// 显示卡包数量，未登录或401时展示0
		displayMembershipCount() {
			const userInfo = this.$store.state?.user?.userInfo;
			if (!userInfo) return 0;
			const count = userInfo.membershipInstanceCount;
			return count !== undefined && count !== null ? count : 0;
		},
		// 显示券包数量，未登录或401时展示0
		displayCouponCount() {
			const userInfo = this.$store.state?.user?.userInfo;
			if (!userInfo) return 0;
			const count = userInfo.couponCount;
			return count !== undefined && count !== null ? count : 0;
		},
		// 显示余额
		displayWalletBalance() {
			const userInfo = this.$store.state?.user?.userInfo;
			if (!userInfo) return '';
			const balance = userInfo.walletBalance;
			return balance !== undefined && balance !== null ? balance : '';
		},
	},
		options: {
			styleIsolation: "shared",
		},
		methods: {
			// 切换tab时刷新数据（不需要调用 getUserInfo，因为 index/index.vue 的 onShow 已经统一调用了）
			onShowFun() {
				// getUserInfo 接口已在 index/index.vue 的 onShow 中统一调用，这里不需要重复调用
				// 如果需要从其他页面返回时获取最新数据，可以在 index/index.vue 的 onShow 中调用
			},
			
			jumpTo(url) {
				uni.navigateTo({
					url,
				});
			},

			shoppingMall() {
				//  this.$emit("changeTab", [pageId]);
				uni.reLaunch({
					url: "/pages/client/index/index?activePageId=shopPage",
				});
			},
			logout() {
				loginOut();
				this.showLogoutModal = false;
				uni.clearStorageSync();
				uni.reLaunch({
					url: "/pages/client/auth/index",
				});
			},
showContact() {
				jumpToWeChat();
				// this.getConfig();
				// this.showContactModal = true;
			},
			// 跳转微信客服 - 使用自定义弹窗（与商城页面一致）
			handleContactClick() {
				if (this.$refs.wechatCopyModal) {
					this.$refs.wechatCopyModal.show({
title: '请添加客服号',
						weChatCode: 'Wagoo2025'
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mine-container {
		background-color: #ffecf3;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		height: calc(100vh - #{$app_tabbar_height + 26});
		padding-top: 0;

		.mineGroundImgView {
			position: relative;
			margin-top: -88rpx;

			.groundImg {
				width: 100%;
				height: 552rpx;
				padding-top: 88rpx;
				box-sizing: content-box;
			}
		}

		.userInfoView {
			border-radius: 16rpx;
			width: calc(100vw - 40rpx);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 32rpx;
			background-color: #fff;
			margin: auto;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -30rpx;

			.userLeft {
				display: flex;
				flex: 1;
				align-items: center;

				.userAvatar {
					width: 92rpx;
					height: 92rpx;
					border-radius: 50%;
				}

				.vipWrapper {
					background-color: #FF19A0;
					padding: 4rpx 8rpx;
					border-radius: 50px;
					font-size: 20rpx;
					color: #fff;
					margin-top: 16rpx;
					display: inline-block;

					.lableImg {
						width: 24rpx;
						height: 20rpx;
						margin-right: 4rpx;
					}
				}

				.userName {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.userRight {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				text-align: center;
				gap: 60rpx;

				.userRgihtItemView {

					.num {
						font-size: 28rpx;
					}

					.text {
						font-size: 20rpx;
						margin-top: 16rpx;
					}
				}
			}
		}

		.myPriceView {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			width: calc(100vw - 40rpx);
			margin: auto;
			margin-top: 48rpx;
			font-size: 24rpx;
			box-sizing: border-box;

			.priceImg {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.menuView {
			width: calc(100vw - 40rpx);
			background-color: #fff;
			margin: auto;
			margin-top: 20rpx;
			display: flex;
			border-radius: 16rpx;

			.menuItem {
				flex: 1;
				text-align: center;
				padding: 32rpx 0rpx;
				border-radius: 16rpx;

				.menuImg {
					width: 96rpx;
					height: 96rpx;
				}

				.menuTitle {
					margin-top: 14rpx;
					font-size: 24rpx;
				}
			}
		}

		.navView {
			width: calc(100vw - 40rpx);
			background-color: #fff;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 16rpx;
			margin-bottom: 26rpx;

.navItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 36rpx 0rpx;
				border-bottom: 0.001px solid rgb(173 173 173 / 10%);
				width: calc(100% - 40rpx);
				margin: auto;

				.navTitle {
					font-size: 24rpx;
				}

				.navArrow {
					width: 11rpx;
					height: 18rpx;
				}
			}
		}

/* 可拖动联系客服组件无需额外样式 */

		.arrowImg {
			width: 11rpx;
			height: 18rpx;
			margin-left: 8rpx;
		}

		.place-view {
			height: 200rpx;
		}

		.mine-info {
			padding: 32rpx 40rpx;
			box-sizing: border-box;
			background: #ffecf3;
			display: flex;
			position: relative;

			.mine-avator {
				width: 92rpx;
				height: 92rpx;
				border-radius: 140rpx;
				background: rgba(0, 0, 0, 0.2);
			}

			.mine-name {
				color: #272427;
				flex: 1;
				margin: 0 24rpx;

				.name-editor {
					display: flex;
					align-items: center;

					.name {
						font-family: PingFangSC;
						font-size: 36rpx;
						font-weight: 500;
						line-height: 36rpx;
						letter-spacing: normal;
						color: #272427;
					}

					.mine-edit {
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}

				.mine-phone {
					margin-top: 16rpx;
					// width: 110rpx;
					// height: 32rpx;
					/* 自动布局 */
					display: flex;

					align-items: center;
					padding: 4rpx 8rpx;

					.diamond {
						width: 120rpx;
						height: 32rpx;

					}

					//   gap: 4rpx;
					//   z-index: 1;
					//   border-radius: 100rpx 100rpx 100rpx 0;
					// background: #4A4A4A;
					// .diamond {
					//   width: 24rpx;
					//   height: 24rpx;
					// }
					// .member {
					//   font-family: PingFang SC;
					//   font-size: 22rpx;
					//   color: #f7e8ca;
					// }
				}

				.points {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.growth {
						font-family: PingFangSC;
						font-size: 20rpx;
						color: #3d3d3d;
					}

					.growthval {
						font-family: PingFangSC;
						font-size: 20rpx;
						color: #3d3d3d;
						margin-left: 4rpx;
					}

					.progress-bar {
						margin-left: 4rpx;
						width: 210rpx;
						height: 12rpx;
						background: #fff;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.progress {
						height: 100%;
						background: #FF19A0;
						/* 进度条的颜色 */
						transition: width 0.5s ease;
						/* 平滑过渡效果 */
					}
				}
			}

			.qrcode {
				position: absolute;
				right: 30rpx;
				top: 55rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.card-holder {
			display: flex;
			justify-content: space-around;
			gap: 70rpx;
			padding: 20rpx 30rpx;
			// padding: 10rpx 0 30rpx 0;
			background: #ffecf3;

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

				.recharge1 {
					display: flex;
					align-items: center;

					.k {
						font-family: PingFangSC;
						font-size: 28rpx;
						color: #6c6c6c;
						margin-top: 10rpx;
					}

					.balance {
						margin-top: 10rpx;
						border: 1px solid #FF19A0;
						width: 24px;
						height: 11px;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;

						.k {
							font-family: PingFangSC;
							font-size: 9px;
							color: #FF19A0;
							margin-bottom: 10rpx;
						}
					}
				}

				.n {
					font-family: PingFang SC;
					font-size: 36rpx;
					color: #272427;
				}

				.k {
					font-family: PingFangSC;
					font-size: 28rpx;
					color: #6c6c6c;
					margin-top: 10rpx;
				}
			}
		}

		.mine-slide {
			flex: 1;
			//  
			box-sizing: border-box;
			background: #ffecf3;

			.recharge-slide {

				// display: flex;
				// overflow-x: auto;
				//  white-space: nowrap;
				.scroll {
					display: flex;

					.card-roll {
						position: relative;
						margin-bottom: -10rpx;

						.file-pet {
							width: 750rpx;
							height: 192rpx;
						}

						.card {
							font-family: PingFangSC;
							font-size: 40rpx;
							color: #ffffff;
						}

						.amount {
							position: absolute;
							left: 56rpx;
							top: 78rpx;

							.surplus {
								font-family: PingFangSC;
								font-size: 60rpx;
								font-weight: 500;
								line-height: 64rpx;
								letter-spacing: normal;
								color: #ffffff;
							}
						}

						.effectiveTime {
							display: flex;
							margin-top: 16rpx;

							.surplus {
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 24rpx;
								letter-spacing: normal;
								color: #ffffff;
							}

							.first {
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 24rpx;
								letter-spacing: normal;
								color: #ffffff;
							}
						}

						.recharge {
							position: absolute;
							right: 52rpx;
							top: 64rpx;
							width: 90rpx;
							// border: 1px solid #000;
							height: 41rpx;
							display: flex;
							flex-direction: column;
							padding: 16rpx 24rpx;
							gap: 20rpx;
							border-radius: 179px;

							.immediately {
								font-family: PingFangSC;
								font-size: 28rpx;
								font-weight: normal;
								line-height: 24rpx;
								letter-spacing: normal;
								color: #3a3d55;
							}
						}

						.discount {
							position: absolute;
							right: 0;
							top: 0;
							width: 50rpx;
							height: 20rpx;
							/* 自动布局 */
							display: flex;
							align-items: center;
							padding: 8rpx 24rpx;
							gap: 4rpx;
							border-radius: 0 24rpx 0 24rpx;
							background: linear-gradient(270deg, #ff3c4a 0%, #f4c24e 107%);

							.break {
								font-family: PingFangSC;
								font-size: 20rpx;
								font-weight: 500;
								letter-spacing: normal;
								color: #ffffff;
							}
						}

						.use-record {
							position: absolute;
							right: 51rpx;
							top: 19rpx;
							display: flex;
							align-items: center;
							// border: 1px solid #000;
							width: 142rpx;
							height: 46rpx;

							.record {
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 24rpx;
								display: flex;
								align-items: center;
								letter-spacing: normal;
								color: #ffffff;
								margin-right: 10rpx;
							}

							.s {
								width: 11rpx;
								height: 18rpx;
							}
						}
					}
				}
			}
		}

		.membership {
			width: 94%;
			margin: 0 auto;

			// background: #000;
			.swiper {
				height: 159rpx;
			}

			image {
				width: 100%;
				// height: 219rpx;
			}
		}

		.meber-m {
			width: 94%;
			margin: 0 auto;

			.meb-im {
				width: 100%;
				height: 200rpx;
				border-radius: 15rpx;
			}
		}

		.mine-content {
			flex: 1;
			padding: 0 24rpx 24rpx;
			box-sizing: border-box;

			.mine-coupon {
				background: #fff;
				border-radius: 30rpx;
				padding: 26rpx;
				margin-top: 32rpx;
				flex: 1;

				&.service-coupon {
					margin-right: 22rpx;
				}

				.coupon-icon {
					width: calc(345 / 339 * 88rpx);
					height: 88rpx;
					margin-right: 20rpx;
				}
			}

			.mine-file {
				background: $app_color_main;
				border-radius: 30rpx;
				padding: 38rpx 40rpx 34rpx 40rpx;
				margin: 0 0 48rpx;

				.file-pet {
					height: 124rpx;
					margin-right: 20rpx;
				}

				.file-add {
					width: 120rpx;
					height: 120rpx;
				}

				.pet-add-info {
					flex: 1;

					.pet-add-tip {
						margin-bottom: 16rpx;
					}
				}
			}

			.mine-order {
				background: #fff;
				border-radius: 0 0 30rpx 30rpx;
				padding: 40rpx 27rpx;
				margin: 0 0 32rpx 0;
				display: flex;
				justify-content: space-between;

				// padding-right: 10rpx;
				// gap: 20rpx;
				.flex-center2 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 100rpx;
				}

				.flex-center3 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 90rpx;
				}

				.flex-center4 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 106rpx;
				}


				.order-icon {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 16rpx;
				}
			}

			.mine-order2 {
				background: #fff;
				// border-radius: 30rpx;
				padding: 40rpx 32rpx;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;

				// margin: 0 0 32rpx 0;
				.flex-center1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-left: 10rpx;
				}

				.order-icon {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 16rpx;
				}
			}

			.mine-order3 {
				background: #fff;
				// border-radius: 30rpx;
				padding: 40rpx 28rpx;

				// border-bottom-left-radius: 20px;
				// border-bottom-right-radius: 20px;
				.flex-center1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
				}

				.flex-center2 {
					//  margin-right: -3rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				// .flex-center3{
				// //  margin-right: 18rpx;
				//      display: flex;
				//   flex-direction: column;
				//   justify-content: center;
				//   align-items: center;
				// }
				// margin: 0 0 32rpx 0;
				.order-icon {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 16rpx;
				}
			}
		}

		.place-view {
			height: 200rpx;
		}

		.mine-cell-wrapper {
			border-radius: 30rpx;
			overflow: hidden;
			width: 690rpx;
			// padding: 40rpx 44rpx;
			// margin: 20rpx 0 32rpx 0;
			height: 312rpx;
			background: #fff;
			border-radius: 24rpx;

			// &.logout {
			//   margin-top: 40rpx;
			// }
		}

		::v-deep {
			.cell-content {
				color: #272427;
				// font-weight: bold;
				font-family: ali-puhui-bold, "Arial", sans-serif;
				font-size: 30rpx !important;
			}
		}
	}
</style>