<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">
					<!-- #ifdef MP-WEIXIN -->
					<button class="atatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
					</button>
					<!-- <view class="name">{{ userInfo.nickName }}</view> -->
					<input type="nickname" class="name" v-model="userInfo.nickName" placeholder="输入昵称" @blur="onNicknameInput" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
					<view class="name">{{ userInfo.nickName }}</view>
					<!-- #endif -->
				</view>
				<view class="right-icons">
					<!-- <image class="my_info_right_qr" src="/static/icon/code.png" mode="aspectFill"></image> -->
					<view class="msg-view" @click="viewUserMsgList">
						<view class="msg-icon-wrapper">
							<image v-if="unreadMsgCount > 0" class="my-msg-icon" src="/static/mine/msg_select.png" mode="aspectFill"></image>
							<image v-else class="my-msg-icon" src="/static/mine/msg.png" mode="aspectFill"></image>

							<!-- 角标 -->
							<view v-if="unreadMsgCount > 0" class="badge">
								<text class="badge-text">{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 		<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">{{ rechargeTotal }}家店</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 || '0.00' }}</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">{{ memberTotal }}家店</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 class="amount">
					<view class="u-flex u-flex-between u-m-t-20">
						<view class="u-flex">
							<image style="width: 50rpx; height: 44rpx" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png" mode="aspectFill"></image>
							<text class="color-333 font-14 u-m-l-20">积分</text>
						</view>
						<view class="u-flex color-666" @click="toCoin()">
							<text class="font-12 u-m-r-4">{{ coinTotal }}家店</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 coinList" :key="index" @click="toCoin(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-16 font-700">{{ item.pointBalance || '0' }}</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="coinList.length" @click="toCoin()">
							<view class="text-center color-333 font-12">查看全部</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.pointBalance || 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>

			<!-- <l-qrcode  :value="wechatAcQrcode"  @complete="e=>qrcodeResult(e)"/> -->
			<view class="qrcode u-flex u-col-center justify-between" v-if="showQrcode">
				<view>
					<view class="color-000 font-14 font-bold">扫码关注公众号</view>
					<view class="u-m-t-16 color-999 font-12">长按识别关注，更多优惠不能错过</view>
				</view>
				<up-image width="178rpx" height="178rpx" :show-menu-by-longpress="true" :src="qrcode"></up-image>
			</view>
		</view>

		<!-- 生成公众号二维码 -->
		<we-qrcode @generate="(e) => qrcodeResult(e)"></we-qrcode>

		<devetools></devetools>
	</view>
</template>

<script setup>
import weQrcode from '@/components/wechat-ac-qrcode.vue';
import devetools from '@/components/devetools.vue';

import { ref, computed, onMounted, reactive, watch } from 'vue';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import { productStore, Storelogin } from '@/stores/user.js';
import * as vipApi from '@/common/api/account/vip.js';
import * as rechargeApi from '@/common/api/market/recharge.js';
import { pointsShopList } from '@/common/api/market/points.js';
import { getUnReadCountReq } from '../../common/api/account/message';
import { updateUserInfoReq } from '../../common/api/api';
import { uploadFile } from '@/common/api/upload.js';

// 打开企业微信客服
const userStore = Storelogin();
function openContact() {
	const shopInfo = uni.cache.get('ordershopUserInfo');
	if (shopInfo.weworkId && shopInfo.weworkUrl) {
		wx.openCustomerServiceChat({
			// corpId: 'wwc76ab19fa6df267f',
			corpId: shopInfo.weworkId,
			extInfo: {
				// url: 'https://work.weixin.qq.com/kfid/kfc40ac2dc5e20c2e8e'
				url: shopInfo.weworkUrl
			},
			// 成功回调
			success: (res) => {
				console.log('跳转企业微信客服成功', res);
			},
			// 失败回调
			fail: (err) => {
				console.error('跳转企业微信客服失败', err);
				uni.showToast({
					title: '跳转客服失败，请稍后重试',
					icon: 'none'
				});
			}
		});
	} else {
		uni.showToast({
			title: '未开放',
			icon: 'none'
		});
	}
}

function qrcodeResult(res) {
	qrcode.value = res;
}

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: 'fenxiao',
		icon: '/static/icon/fenxiao.svg'
	},
	// {
	//   name: "商家推送",
	//   type: "msg",
	//   icon: "/static/icon/msg.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"},
	// { name: '联系商家', type: 'contact', icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/2b0480c32c1844dbae2c09f6a729c6e8.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 'msg':
			uni.navigateTo({
				url: '/pageChat/index'
			});
			break;
		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 'fenxiao': //优惠券
			uni.navigateTo({
				url: '/distribution/index'
			});
			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;
		case 'contact': // 联系商家
			openContact();
			break;
	}
};

const memberList = ref([]);
const rechargeList = ref([]);
const memberTotal = ref(0);
const rechargeTotal = ref(0);

const coinTotal = ref(0);
const coinList = ref([]);
async function getData() {
	const res = await vipApi.list();
	memberTotal.value = res.length;
	memberList.value = res.slice(0, 3);
	const res1 = await rechargeApi.list();
	rechargeTotal.value = res1.length;
	rechargeList.value = res1.slice(0, 3);

	const res3 = await pointsShopList();
	coinTotal.value = res3.length;
	coinList.value = res3.slice(0, 3);
}

function toCoin(item) {
	if (item) {
		uni.navigateTo({
			url: '/pages/user/member/billDetails?type=2&shopId=' + item.shopId + '&id=' + (item.id || '')
		});
		return;
	}
	uni.navigateTo({
		url: '/user/score/list'
	});
}

const unreadMsgCount = ref(0);

const getUnReadMsgCount = async () => {
	let res = await getUnReadCountReq();

	let badge = Number(res);
	if (badge > 0) {
		uni.setTabBarBadge({
			index: 2,
			text: badge.toString()
		});
	} else {
		uni.removeTabBarBadge({
			index: 2
		});
	}

	unreadMsgCount.value = badge;
};

const viewUserMsgList = () => {
	uni.navigateTo({
		url: '/pages/user/message/index'
	});
};

onShow(() => {
	loadUserInfo();
	console.log('userInfo', userInfo);
	getData();

	getUnReadMsgCount();
});

const loadUserInfo = async () => {
	await 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
		});
	}
};

const qrcode = ref('');
const showQrcode = computed(() => {
	const followIndex = uni.cache.get('followIndex');
	if (followIndex == 'mine' && qrcode.value) {
		return true;
	}
});

const onChooseAvatar = async (e) => {
	const fileRes = await uploadFile(e.detail.avatarUrl);
	updateUserInfo({
		headImg: fileRes
	});
};

const onNicknameInput = (e) => {
	updateUserInfo({
		nickName: e.detail.value
	});
};

const updateUserInfo = async (param) => {
	await updateUserInfoReq(param);

	loadUserInfo();
};
</script>

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

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

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

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

			.atatar-btn {
				padding: 0;
				background: transparent;
				border: none;
				border-radius: 50%;
			}

			.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_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;
		}
	}
}

.qrcode {
	padding: 24rpx;
	margin: 60rpx 32rpx 60rpx 32rpx;
	border-radius: 18rpx;
	border: 2rpx solid #d9d9d9;
}

.qrcode-box {
	position: fixed;
	transform: translateX(200vw, 200vh);
}

.right-icons {
	display: flex;

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

	.msg-icon-wrapper {
		position: relative;
		margin-left: 30rpx;
	}

	.my-msg-icon {
		width: 50rpx;
		height: 50rpx;
	}

	// 角标样式
	.badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		min-width: 32rpx;
		height: 32rpx;
		background-color: #ff3b30;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		z-index: 10;

		.badge-text {
			color: white;
			font-size: 20rpx;
			font-weight: bold;
			line-height: 1;
			text-align: center;
		}
	}
}
</style>
