<route lang="jsonc" type="page">
	{
		"layout": "tabbar",
		"style": {
			"navigationStyle": "custom"
		}
	}
</route>

<template>
	<view>
		<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
				<template #right>
					<view class="mr-16rpx flex items-center right-slot">
						<a :href="'tel:' + userInfo.mobile">
							<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
						</a>
					</view>
				</template>
			</wd-navbar>
		</view>

		<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
			<!-- 账号昵称显示 -->
			<view class="ml-60rpx flex items-center">
				<view>
					<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
				</view>
				<!-- <view class="flex-1 ml-22rpx flex justify-between items-center" @click="My.handleToProfile"> -->
				<view class="flex-1 ml-22rpx flex justify-between items-center">
					<view>
						<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? userInfo.nickname : '立即登录' }}</view>
						<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx"  >
							<!-- 会员显示图标 -->
							<view v-if="isVip" class="flex items-center mr-12rpx">
								<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="userInfo.avatar" round></wd-img>
							</view>
							<!-- 这里要根据用户身份显示不同的文字 -->
							<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址会员</view>
						</view>
					</view>
					<view class="w-178rpx h-80rpx relative">
						<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}images/my/my_image2.png`"></wd-img>
						<view class="absolute left-36rpx top-28rpx flex items-center" @click.stop="My.handleShowPromoCode">
							<view class="flex items-center mr-8rpx">
								<wd-img width="32rpx" height="32rpx" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
							</view>
							<view class="font-bold text-[#fff] text-24rpx leading-34rpx mt--6rpx">推广码</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 余额显示 -->
			<view class="mt-16rpx mx-30rpx flex justify-between">
				<view class="flex items-center">
					<view class="w-160rpx text-[#303133] text-center" @click="My.handleToCoupon">
						<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.coupon_count : '- -' }}</view>
						<view class="text-24rpx leading-34rpx">优惠券</view>
					</view>
					<view class="w-160rpx text-[#303133] text-center" @click="My.handleToCollect">
						<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.collect_count : '- -' }}</view>
						<view class="text-24rpx leading-34rpx">收藏</view>
					</view>
				</view>
				<view class="relative" @click="My.handleToWallet">
					<view class="w-300rpx h-148rpx">
						<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
					</view>
					<view class="text-[#303133] absolute bottom-12rpx left-24rpx text-center">
						<view class="text-30rpx leading-36rpx fon-bold">{{ isLogin ? user?.user_money : '- -' }}</view>
						<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
					</view>
				</view>
			</view>

			<!-- 消费金额显示 -->
			<view class="mx-30rpx">
				<!-- 会员下的状态 -->
				<view v-if="isVip" class="vip-level mt-32rpx pb-28rpx">
					<view class="pt-32rpx mx-40rpx">
						<view class="flex items-center justify-between">
							<view class="flex items-center">
								<view class="w-40rpx h-36rpx flex items-center">
									<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
								</view>
								<view class="flex items-center leading-34rpx" @click="My.handleToVipBenefits">
									<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">2026.03.06到期</view>
									<view class="flex items-center mt-4rpx">
										<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
									</view>
								</view>
							</view>
							<view class="font-400 text-24rpx text-[#EECC99] leading-34rpx">会员预定茶室享受8折</view>
						</view>
					</view>
					<view class="mx-40rpx">
						<wd-progress :percentage="60" hide-text color="#EECC99" custom-class="!my-10rpx"></wd-progress>
					</view>
					<view class="flex items-center justify-between mx-40rpx">
						<view class="flex item-center leading-34rpx text-[#EECC99]">
							<view class="font-400 text-24rpx mr-18rpx">上月消费</view>
							<view class="font-400 text-28rpx mr-18rpx">￥23014.02</view>
						</view>
						<view class="font-400 text-24rpx text-[#D2D0D0] leading-34rpx">请尽快领取会员权益</view>
					</view>
					<view class="mt-50rpx ml-24rpx">
						<scroll-view class="w-[100%] whitespace-nowrap" :scroll-x="true" scroll-left="120">
							<view class="scroll-item mr-20rpx" v-for="(item, index) in couponList" :key="index">
								<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">{{ item.title }}</view>
								<view class="font-bold text-[#1C1C1D] leading-34rpx mt-8rpx">
									<text class="text-24rpx">￥</text>
									<text class="text-30rpx">{{ item.coupon_price }}</text>
								</view>
								<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">{{ item.name }}</view>
								<view class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto" 
									:class="item.use == 1 ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="My.handleClaimCoupon(item.id)">
										{{ item.use == 1 ? '已领取' : '立即领取' }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 非会员下的状态 -->
				<view v-if="!isVip" class="mt-16rpx flex justify-center">
					<view class="w-690rpx h-228rpx relative">
						<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image4.png`" mode="aspectFill"></wd-img>
						<view class="absolute top-76rpx left-30rpx text-30rpx leading-42rpx">
							<view class="text-[#EDCE91]">会员可以享受预定折扣</view>
							<view class="vip-btn text-[#251C1C] font-bold text-center mt-20rpx">立即成为会员</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 茶艺师订单 -->
			<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
				<view class="px-30rpx pt-30rpx py-24rpx">茶艺师订单</view>
				<view class="flex relative px-30rpx">
					<view v-for="(item, index) in teaReserveMenuList" :key="index">
						<navigator :url="`/bundle/order/tea-specialist/order-list?orderStatus=${item.status}`" hover-class="none">
							<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
								<view class="w-36rpx h-36rpx flex items-center justify-center">
									<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
								</view>
								<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>

			<!-- 我的地址 -->
			<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx px-30rpx py-28rpx">
				<view class="flex items-center justify-between" @click="router.navigateTo('/pages/address/list')">
					<view class="flex items-center">
						<view class="flex items-center mr-28rpx">
							<wd-img :src="`${OSS}icon/icon_location.png`" width="44rpx" height="44rpx"></wd-img>
						</view>
						<view class="font-400 text-28rpx leading-40rpx text-[#313131]">我的地址</view>
					</view>
					<view>
						<wd-icon name="chevron-right" size="22px"></wd-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 推广码 -->
		<wd-overlay :show="showPompoCodePopup" @click="showPompoCodePopup = false">
			<view class="h-full relative">
				<view class="absolute-center h-926rpx">
					<wd-img width="600rpx" height="800rpx" :src="`${OSS}images/my/my_image7.png`"></wd-img>
					<view class="absolute bottom-158rpx flex items-center w-full ml-110rpx">
						<view class="mr-70rpx w-160rpx h-160rpx">
							<wd-img width="160rpx" height="160rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`" mode="scaleToFill"></wd-img>
						</view>
						<view class="">
							<view class="font-bold text-30rpx leading-42rpx text-[#303133]">我的推广码</view>
							<view class="text-40rpx leading-56rpx text-[#4C9F44] mt-20rpx">3486</view>
						</view>
					</view>

					<view class="absolute bottom-0 left-1/2 -translate-x-1/2" @click="showPompoCodePopup = false">
						<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_close2.png`"></wd-img>
					</view>
				</view>
			</view>
		</wd-overlay>

		<!-- 客服电话 -->
		<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu"  cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
	</view>
</template>

<script lang="ts" setup>
	import { OrderStatus } from '@/utils/order'
	import { toast } from '@/utils/toast'
	import { useUserStore } from '@/store'
	import { getUrlCode, snsapiBaseAuthorize } from '@/hooks/useWeiXin'
	import { getUserInfo, getMyCoupon, claimMyCoupon } from '@/api/user'
	import { router } from '@/utils/tools'

	const OSS = inject('OSS')
	const navbarHeight = inject('navbarHeight')
    const rightPadding = inject('capsuleOffset')

	// 登录信息相关
	const userInfo = ref<any>(null)
	const user = ref<any>(null)
	const isLogin = ref<boolean>(false)
	const isVip = ref<boolean>(true)

	// 茶艺师订单
	const teaReserveMenuList = reactive([
		{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', status: 'all' },
		{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
		{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
		{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', status: OrderStatus.Confirm },
		{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', status: OrderStatus.Finished },
	])

	// 推广码弹窗
	const showPompoCodePopup = ref<boolean>(false)

	// 客服电话
	const showServiceMobile = ref<boolean>(false)
	const sheetMenu = ref<{ name: string}[]>([])

	// 领取优惠券
	const couponList = ref<any[]>([])
	const isClaimCoupon = ref<boolean>(false)

	onShow(() => {
		const code = getUrlCode().code // 截取code
		const userStore = useUserStore()
		console.log("🚀 ~ userStore:", userStore.userInfo)
		if (userStore.userInfo.mobile) {
			userInfo.value = userStore.userInfo
			isLogin.value = true

			// 获取用户详情信息接口
			getUserInfo().then(res => {
				user.value = res
			})
			
		} else if (code && !userStore.userInfo.token) {
			// 这里是微信授权之后跳转回到本页面获取到code但是没有登录状态的话需要进行登录操作
			snsapiBaseAuthorize()
		}
	})

	onLoad(() => {
		uni.$on('loginSuccess', () => {
			// 刷新用户信息
			console.log("🚀 ~ 刷新用户信息:")
			const userStore = useUserStore()
			if (userStore.userInfo.mobile) {
				userInfo.value = userStore.userInfo
				isLogin.value = true
			}
			// 你可以在这里做跳转或弹窗提示
		})

		My.handleInit()
	})

	onUnload(() => {
		uni.$off('loginSuccess')
	})

	const My = {
		handleInit: () => {
			getMyCoupon().then(res => {
				couponList.value = Array.isArray(res) ? res : []
			})
		},

		// 领取优惠券
		handleClaimCoupon: async (id: number) => {
			const res = await claimMyCoupon({id})
			toast.info('领取成功')
			My.handleInit()
		},

		// 点击显示客服电话
		handleShowService: () => {
			showServiceMobile.value = true
			sheetMenu.value = [
				{ name: '400-800-8888' },
			]
		},

		// 选择菜单-拨打客服电话
		handleSelectMenu: (item: any) => {
			// window.location.href = 'tel: ' + item.item.name
			// console.log("🚀 ~ item.item.name:", item.item.name)
		},

		// 显示推广码
		handleShowPromoCode: () => {
			if (isLogin.value) {
				showPompoCodePopup.value = true
			} else {
				toast.info('请先登录')
				setTimeout(() => {
					router.navigateTo('/pages/login/login')
				}, 800)
			}
		},

		// 跳转到个人信息
		handleToProfile: async () => {
			if (isLogin.value) {
				router.navigateTo('/bundle/profile/profile')
			} else {
				await snsapiBaseAuthorize()
			}
		},

		// 跳转到会员权益
		handleToVipBenefits: () => {
			router.navigateTo('/bundle/vip/benefits')
		},

		// 跳转到优惠券
		handleToCoupon: () => {
			router.navigateTo('/bundle/coupon/my-coupon')
		},

		// 跳转到收藏
		handleToCollect: () => {
			router.navigateTo('/bundle/collect/collect')
		},

		// 跳转到我的钱包
		handleToWallet: () => {
			router.navigateTo('/bundle/wallet/wallet')
		}
	}
</script>

<style lang="scss" scoped>
	page, home-bg {
		background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.right-slot {
		padding-right: v-bind(rightPadding);
	}

	.vip-bg {
		width: 170rpx;
		height: 46rpx;
		background: linear-gradient( 315deg, #F2E6BC 0%, #FFF8E2 100%);
		box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.04);
		border-radius: 8rpx;
	}

	.vip-level {
		background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.scroll-item {
		display: inline-block;
		width: 180rpx;
		height: 180rpx;
		text-align: center;
		background: url(#{$OSS}images/my/my_image6.png) 0 0 no-repeat;
		background-size: 180rpx;
	}

	.service-badge {
		background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
	}
</style>
