<template>
	<view class="">
		<view class="w-qrcode">
			<w-qrcode :options="codeOptions" :opacity="0" ref="wQrcode" @generate="(e) => qrcodeResult(e)"></w-qrcode>
		</view>
		<up-popup :duration="0" :show="show" bgColor="transparent" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="true" @close="close" mode="center">
			<view class="box">
				<view class="info">
					<view class="u-flex justify-center">
						<up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
					</view>
					<view class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54">
						<view>{{ shopUserInfo.nickName }}</view>
						<view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
					</view>
					<view class="u-m-t-16 font-14 line-height-54 text-center">
						<text class="color-666">邀请码</text>
						<text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{ inviteCode }}</text>
						<text class="" style="color: #fe6d11" @click="copyCode">复制</text>
					</view>
					<view class="u-flex justify-center" style="margin-top: 90rpx">
						<!-- <w-qrcode
              :options="codeOptions"
              :opacity="1"
              ref="wQrcode"
              @generate="(e) => qrcodeResult(e)"
            ></w-qrcode> -->
						<image :src="code" class="code"></image>
						<!-- <up-image width="322rpx" mode="scaleToFill" height="322rpx" :src="code"></up-image> -->
					</view>
				</view>
				<view class="footer-wrap">
					<view class="confirm line" @click="save">保存图片</view>
					<ymf-share>
						<view class="confirm">微信分享</view>
					</ymf-share>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		shareMixin,
		handleMixinOnLoad,
		returnQuery
	} from '@/utils/share.js';
	import ymfShare from '@/components/ymf-components/ymf-share.vue';
	import wQrcode from '@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue';
	import {
		desensitizePhone
	} from '@/utils/util.js';
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';

	onMounted(async () => {
		setTimeout(async () => {
			await nextTick();
			const query = await returnQuery();
			codeOptions.value.code =
			`https://cashier.sxczgkj.com/invite?${removeQAndAfter(query)}`;
			console.log('codeOptions.value', codeOptions.value);
		}, 500);
	});

	/** 
	 * 截取字符串，移除 &q 及后面的所有内容
	 * @param {string} str - 原始字符串
	 * @returns {string} 处理后的字符串
	 */
	function removeQAndAfter(str) {
		// 检查是否为空字符串
		if (!str || typeof str !== 'string') {
			return str || '';
		}

		// 找到 &q 的起始位置
		const qIndex = str.indexOf('&q');

		// 如果找到 &q，截取前面的部分；否则返回原字符串
		return qIndex !== -1 ? str.slice(0, qIndex) : str;
	}

	const props = defineProps({
		inviteCode: {
			type: String,
			default: ''
		},
		shopUserInfo: {
			type: Object,
			default: () => {}
		}
	});

	const codeOptions = ref({
		padding: 10,
		size: 200,
		code: ''
	});

	function copyCode() {
		uni.setClipboardData({
			data: props.inviteCode,
			success: function() {
				console.log('success');
			}
		});
	}
	const code = ref('');

	function qrcodeResult(e) {
		console.log('qrcodeResult', e);
		code.value = e.img.tempFilePath;
		console.log('code', code.value);
	}

	const show = defineModel({
		type: Boolean,
		default: false
	});
	const emits = defineEmits(['cancel', 'confirm']);

	function close() {
		show.value = false;
		emits('cancel');
	}

	function save() {
		show.value = false;

		// 保存图片到相册
		uni.saveImageToPhotosAlbum({
			filePath: code.value,
			success: function() {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
			},
			fail: function(err) {
				console.log('保存失败原因：', err);
				// 判断是否为授权拒绝（微信小程序授权拒绝的特征）
				if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize fail')) {
					// 弹出提示引导用户去设置页开启授权
					uni.showModal({
						title: '授权提示',
						content: '保存图片需要授权访问相册，请前往设置开启授权',
						showCancel: true,
						cancelText: '取消',
						confirmText: '去设置',
						success: function(res) {
							if (res.confirm) {
								// 跳转到微信小程序的授权设置页
								uni.openSetting({
									success: function(settingRes) {
										// 检查用户是否开启了相册授权
										if (settingRes.authSetting[
												'scope.writePhotosAlbum']) {
											uni.showToast({
												title: '授权成功，可重新保存',
												icon: 'none'
											});
										} else {
											uni.showToast({
												title: '未开启授权，保存失败',
												icon: 'none'
											});
										}
									},
									fail: function() {
										uni.showToast({
											title: '打开设置失败',
											icon: 'none'
										});
									}
								});
							}
						}
					});
				} else {
					// 非授权问题的保存失败（如文件路径错误、系统问题等）
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			}
		});

		emits('confirm', code.value);
	}
</script>

<style lang="scss" scoped>
	:deep(.info .canvas) {
		opacity: 1;
	}

	.border {
		border: 2rpx solid #d9d9d9;
		padding: 18rpx;
		border-radius: 4rpx;
	}

	.box {
		width: 638rpx;
		background-color: #fff;
		border-radius: 16rpx;
		// overflow: hidden;
		position: relative;

		.title {
			color: #000000;
			font-size: 32rpx;
			font-weight: 700;
		}

		.top {
			border-bottom: 2rpx solid #ededed;
		}

		.info {
			padding: 96rpx 40rpx 96rpx 40rpx;
			font-size: 28rpx;
		}

		.small-title {
			min-width: 84rpx;
			text-align: right;
		}

		.footer-wrap {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: -100upx;
			display: flex;
			gap: 28upx;
		}
	}

	.cancel {
		padding: 14rpx 76rpx;
		border-radius: 36rpx;
		border: 2rpx solid #e8ad7b;
		color: #e8ad7b;
		font-size: 32rpx;
		font-weight: 400;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.confirm {
		$color: #e8ad7b;
		flex: 1;
		padding: 14rpx 76rpx;
		border-radius: 16rpx;
		background-color: $color;
		border: 2rpx solid $color;
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;

		&.line {
			background-color: #fff;
			color: $color;
		}
	}

	.line-height-54 {
		line-height: 54rpx;
	}

	.w-qrcode {
		position: fixed;
		left: -9999px;
		top: -9999px;
		z-index: -1;
	}
	.code{
		width: 322rpx;
		height: 322rpx;
	}
</style>