<template>
	<view class="container">
		<image class="topBack"
			:src="userInfo.shopExtendList?(userInfo.shopExtendList[1].value?userInfo.shopExtendList[1].value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'):'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
			mode="aspectFill"></image>
		<view class="myContent">
			<view class="my_info flex-between">
				<view class="my_info_left">
					<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
					<view class="name">{{userInfo.nickName}}</view>
				</view>
				<image class="my_info_right_qr" src="/static/icon/code.png" mode="aspectFill">
				</image>
				
				
				<!-- 		<image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
					:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
				</image>
				<view class="my_info_right" @click="clickEvent" v-if="userInfo.isVip == 0 && ShopId">
					<text>免费入会</text>
				</view> -->

			</view>

			<up-gap height="26rpx" bg-color="#F9F9F9"></up-gap>
			<!-- <view class="my_item my_assets" @click="Myassets"> -->
			<view class="my_item my_assets">
				<view class="my_item_title u-m-t-12">我的资产</view>
				<view class="amount">
					<view class="u-flex u-flex-between u-m-t-20">
						<view class="u-flex">
							<image style="width: 50rpx;height: 37rpx;"
								src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
								mode="aspectFill">
							</image>
							<text class="color-333 font-14 u-m-l-20">储值</text>
						</view>
						<view class="u-flex color-666" @click="toChargeList">
							<text class="font-12 u-m-r-4">{{rechargeList.length}}家店</text>
							<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
						</view>
					</view>

					<view class="card-list">
						<view class="card-list-item" v-for="(item,index) in rechargeList" :key="index"
							@click="toCharge(item)">
							<up-image radius="20rpx" width="182rpx" height="182rpx" :src="item.logo"> </up-image>
							<view class="info text-center">
								<view class="color-333 u-m-t-14 ">
									<text class="font-10">¥</text>
									<text class="font-16 font-700 ">{{item.amount}}</text>
								</view>
								<view class="font-12 color-666 u-line-1">{{item.shopName}}</view>
							</view>

						</view>
						<view class="u-flex u-flex-column u-flex-center" style="width: 12px;" v-if="rechargeList.length"
							@click="toChargeList">
							<view class="text-center color-333 font-12">查看全部</view>
						</view>
					</view>
				</view>
				<view class="vip u-m-t-40">
					<view class="u-flex u-flex-between u-m-t-20">
						<view class="u-flex">
							<image style="width: 50rpx;height: 40rpx;" src="/static/icon/vip.png" mode="aspectFill">
							</image>
							<text class="color-333 font-14 u-m-l-20">会员</text>
						</view>
						<view class="u-flex color-666" @click="tomemberList">
							<text class="font-12 u-m-r-4">{{memberList.length}}家店</text>
							<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
						</view>
					</view>

					<view class="card-list">
						<view class="card-list-item" v-for="(item,index) in memberList" :key="index"
							@click="tomember(item)">
							<up-image radius="20rpx" width="182rpx" height="182rpx" :src="item.logo"></up-image>
							<view class="info text-center">
								<view class="font-12 color-666 u-m-t-14 u-line-1">{{item.shopName}}</view>
							</view>

						</view>
						<view class="u-flex u-flex-column u-flex-center" style="width: 12px;" v-if="memberList.length">
							<view class="text-center color-333 font-12" @click="tomemberList">查看全部</view>
						</view>
					</view>

				</view>


			</view>
			<view class="my_item my_fun u-m-t-30">
				<view class="my_fun_list">
					<view class="my_list_item" v-for="(item,index) in myFunList" :key="index"
						@click="clickTo(item,index)">
						<view class="my_list_item_left">
							<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
							<view class="my_list_item_name">{{item.name}}</view>
						</view>
						<view class="my_list_item_right u-flex ">
							<text v-if="item.type=='score'" class="font-12 ">{{userInfo.accountPoints || 0}}</text>
							<!-- <text v-else-if="item.type=='my_coupon'" class="font-12 ">{{userInfo.couponNum || 0}}</text> -->
							<text class="font-12 color-999" v-else>查看</text>
							<u-icon class="u-m-t-2" name="arrow-right" color="#999999" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		reactive
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	import {
		productStore
	} from '@/stores/user.js';
	import * as vipApi from '@/common/api/market/vip.js'
	import * as rechargeApi from '@/common/api/market/recharge.js'


	const store = productStore();
	const myFunList = ref([{
			name: "积分",
			type: "score",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png",
			url: '/user/score/list'
		},
		{
			name: "优惠券",
			type: "my_coupon",
			icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"
		},
		// {
		// 	name: "我的订单",
		// 	type: "my_order",
		// 	icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
		// },
		// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
		// {
		// 	name: "个人资料",
		// 	type: "myself",
		// 	icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
		// },
		// {
		// 	name: "我的会员卡",
		// 	type: "my_member",
		// 	icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"
		// },
		// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
	])

	const userInfo = reactive({})

	const ShopId = ref(uni.cache.get('shopId'))
	console.log('ShopId', uni.cache.get('shopId'))

	function tomemberList() {
		uni.navigateTo({
			url: '/pages/user/member/list'
		})
	}

	function tomember(item) {
		uni.navigateTo({
			url: '/user/vip/vip?shopId=' + item.shopId
		})
	}

	const clickEvent = () => {
		if (ShopId.value) {
			if (!userInfo.isVip) {
				uni.navigateTo({
					url: '/user/vip/buy-vip?shopId=' + ShopId.value
				})
			} else {
				uni.navigateTo({
					url: '/user/vip/vip?shopId=' + ShopId.value
				})
			}

			// if (userInfo.isVip == 0) {


			// 	uni.pro.navigateTo('user/member/memberdetails', {
			// 		shopId: uni.cache.get('shopId')
			// 	})
			// } else {
			// 	uni.pro.navigateTo('user/member/paycode', {
			// 		shopId: uni.cache.get('shopId'),
			// 		shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
			// 	})
			// }
		} else {
			uni.pro.navigateTo('member/list', {
				type: 'user_payCode'
			})
		}
	}

	// 我的资产
	const Myassets = () => {
		if (uni.cache.get('shopId')) {
			uni.pro.navigateTo('user/member/memberdetails', {
				shopId: uni.cache.get('shopId'),
				type: 'index'
			})
		} else {
			uni.pro.navigateTo('user/member/list', {
				shopId: uni.cache.get('shopId'),
				type: 'index'
			})
		}
	}

	function toCharge(item) {
		uni.navigateTo({
			url: '/pages/user/member/czzx?shopId=' + item.shopId
		})
	}

	function toChargeList() {
		uni.navigateTo({
			url: '/pages/user/member/amount-list'
		})
	}


	const clickTo = (item, index) => {
		if (item.url) {
			uni.navigateTo({
				url:item.url
			})
			return
		}
		let shopId = null;
		switch (item.type) {
			case 'my_order':
				uni.pro.switchTab('order/index')
				break
			case 'my_member':
				uni.pro.navigateTo('user/member/list')
				break
			case 'recharge':
				if (uni.cache.get('shopId') && uni.cache.get('token')) {
					uni.pro.navigateTo('member/index', {
						shopId: uni.cache.get('shopId'),
						type: 'index',
					})
				} else {
					uni.pro.navigateTo('member/list', {
						type: 'user_recharge'
					})
				}
				break
			case 'points': //积分
				if (uni.cache.get('shopId') && uni.cache.get('token')) {
					uni.pro.navigateTo('/pagesPoints/index/index', {
						shopId: uni.cache.get('shopId'),
						type: 'user',
					})
				} else {
					uni.pro.navigateTo('member/list', {
						type: 'user_points'
					})
				}
				break;
			case 'my_coupon': //优惠券
				uni.pro.navigateTo('user/coupon', {
					shopId: uni.cache.get('shopId') || ''
				})
				break;
			case 'myself': //内部页面
				uni.pro.navigateTo('user/myself')
				break;
			case 'scan_applet':
				uni.navigateToMiniProgram(JSON.parse(item.value))
				break
			case 'absolute': //外链url
				uni.navigateTo({
					url: `/pages/webview/webview?url=${item.menuUrl}`
				});
				break;
		}
	}

	const memberList = ref([])
	const rechargeList = ref([])
	async function getData() {
		const res = await vipApi.list()
		memberList.value = res.slice(0, 3);
		const res1 = await rechargeApi.list()
		rechargeList.value = res1.slice(0, 3);
	}
	onShow(() => {
		store.actionsAPIuser()
		if (uni.cache.get('shopId')) {
			Object.assign(userInfo, uni.cache.get('orderVIP'))
		} else {
			Object.assign(userInfo, {
				...uni.cache.get('userInfo'),
				...uni.cache.get('userInfo').assetsSummary
			})
		}
		getData()
	})
</script>

<style scoped lang="scss">
	.topBack {
		width: 100%;
		height: 400rpx;
		position: absolute;
	}

	.myContent {
		position: relative;
		z-index: 1;
		padding: 298rpx 0 0 0;

		.my_info {
			align-items: center;
			background-color: #fff;
			padding: 32rpx 32rpx;
			border-radius: 18rpx;

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

				.my_info_left_head {
					width: 84rpx;
					height: 84rpx;
					margin-right: 18rpx;
					border-radius: 50%;
				}

				.name {
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
				}
			}

			.my_info_right {
				width: 136rpx;
				height: 48rpx;
				background-color: #E3AD7F;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.my_info_right_qr {
				width: 40rpx;
				height: 40rpx;
			}

		}



		.my_item {
			background-color: #fff;
			padding: 0 32rpx;
			border-radius: 18rpx;

			.my_item_title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}
		}

		.my_assets {
			.my_item_title {
				margin-bottom: 26rpx;
			}

			.my_assets_list {
				display: flex;
				justify-content: space-around;
				padding: 0 38rpx;

				.my_list_item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.my_list_item_icon {
						width: 52rpx;
						height: 44rpx;
					}

					.my_list_item_name {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
					}

					.my_list_item_num {
						font-weight: 400;
						font-size: 20rpx;
						color: #E3AD7F;

					}
				}
			}
		}

		.my_fun {
			.my_item_title {
				margin-bottom: 18rpx;
			}

			.my_fun_list {
				display: flex;
				flex-direction: column;

				.my_list_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0 26rpx 0;
					border-bottom: 1rpx solid #E5E5E5;

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

						.my_list_item_icon {
							width: 44rpx;
							height: 44rpx;
							margin-right: 18rpx;
						}

						.my_list_item_name {
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}

				.my_list_item:last-child {
					border-bottom: none;
				}
			}
		}
	}




	.card-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 40rpx;
		margin-top: 20rpx;

		.card-list-item {
			max-width: 182rpx;
			box-shadow: 8rpx 8rpx 32rpx 0 #0b18390f;
			border-radius: 0 0 20rpx 20rpx;

			.info {
				padding-bottom: 16rpx;
				border-radius: 0 0 20rpx 20rpx;
				overflow: hidden;
			}
		}
	}
</style>