<template>
	<view class="container">

		<view class="top">
			<view class="v-user-info">
				<view style="position: relative;">
					<image class="wh-160 br-80" :src="$config.cdnUrl + userInfo.avatar" mode="widthFix"></image>
					<text class="plr-18 ptb-5 fs-22 br-20"
						style="color: #000;;position: absolute;bottom: 0px;left: 8px;background: #FFFFFF;"
						@click="$wskj.to('/pagesMine/pages/user_grzy')">个人主页</text>
				</view>
				<view class="v-user-name">
					<text class="tv-name">{{userInfo.nickname}}</text>
				</view>
				<view class="v-user-edit-info" @click="$wskj.to('/pagesMine/pages/user_info')">
					<text>编辑资料</text>
				</view>
			</view>
		</view>
		<view class="mlr-24 h-180 br-20" @click="vipShow = true">
			<image style="height: 180rpx;width: 100%;" src="../static/icon_wd_hym_bg.png" mode="scaleToFill">
			</image>
		</view>
		<view class="h-354 mt-30 mr-24" style="position: relative;">
			<image class="full" src="../static/icon_wd_thwj_bg.png" @click="$wskj.to('/pagesMine/pages/user_thwj')">
			</image>
			<view class="flex fs-24 flex-between-center"
				style="position: absolute;top: 0;left: 210rpx;right: 0;color:white;">
				<view v-if="userInfo.leader==1" class="flex-column flex-center-center"
					@click="$wskj.to('/pagesMine/pages/user_wddw')">
					<image class="wh-105 mb-25" src="../static/icon_wd_wddw.png"></image>
					<text>我的队伍</text>
				</view>
				<view class="flex-column flex-center-center" @click="$wskj.to('/pagesMine/pages/user_wdkz')">
					<image class="wh-105 mb-25" src="../static/icon_wd_wdkz.png"></image>
					<text>我的卡座</text>
				</view>
				<view class="flex-column flex-center-center" @click="onMessage">
					<image class="wh-105 mb-25" src="../static/icon_wd_wdxx.png"></image>
					<text>我的消息</text>
				</view>
				<view class="flex-column flex-center-center" @click="$wskj.to('/pagesMine/pages/user_wdzj')">
					<image class="wh-105 mb-25" src="../static/icon_wd_wdzj.png"></image>
					<text>我的足迹</text>
				</view>
			</view>
		</view>

		<view class="flex-column mar-24 fs-24" style="color: #fff; background: #191919;border-radius: 20rpx;">
			<view class="flex-center-center mlr-24 mtb-20" @click="handlePerformance">
				<view class="flex align-center flex-1">
					<image class="wh-64 mr-20" src="../static/img/icon_wd_yJ.png"></image>
					<text>业绩提现</text>
				</view>
				<text class="sum-box">总业绩：￥{{userInfo.accountBalance}}</text>
				<image class="w-18 h-26" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-20" @click="kfShow=true">
				<view class="flex align-center flex-1">
					<image class="wh-64 mr-20" src="../static/icon_wd_kf.png"></image>
					<text>联系客服</text>
				</view>
				<image class="w-18 h-26" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-20" @click="onSm">
				<view class="flex align-center flex-1">
					<image class="wh-64 mr-20" src="../static/icon_wd_smxx.png"></image>
					<text>实名信息</text>
				</view>
				<text v-if="!!userInfo.realname" class="mr-10">已实名</text>
				<image class="w-18 h-26" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-20" @click="$wskj.to('/pagesMine/pages/user_report')">
				<view class="flex align-center flex-1">
					<image class="wh-64 mr-20" src="../static/icon_wd_jb.png"></image>
					<text>举报</text>
				</view>
				<image class="w-18 h-26" src="../static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-20" @click="sharedApp">
				<view class="flex align-center flex-1">
					<image class="wh-64 mr-20" src="../static/icon_wd_fx.png"></image>
					<text>分享</text>
				</view>
				<image class="w-18 h-26" src="../static/icon_wd_right.png"></image>
			</view>
		</view>
		<view class="hym">
			<wskj-model-close :show="vipShow" :showClose="false" @close="vipShow = false">
				<view class="flex-center-center flex-column"
					style="background-color: transparent;border-radius: 20rpx 20rpx 0rpx 0rpx;">
					<view class="flex-center-center h-997" style="position: relative;">
						<image class="w-560 h-997" :src="$config.cdnUrl+hyImg"></image>
						<view class="br-20 pad-20 mar-24"
							style="position: absolute;bottom: 0;right: 0;background-color: white;">
							<l-painter v-if="vipShow">
								<template>
									<l-painter-qrcode :text="userId" css="width: 200rpx; height: 200rpx" />
								</template>
							</l-painter>
						</view>
					</view>
				</view>
			</wskj-model-close>
		</view>
		<view class="lxkf">
			<wskj-model-close :show="kfShow" :showClose="false" @close="kfShow = false">
				<view class="flex-column flex-center-center fs-32 br-20 ptb-60"
					style="color: #999999;background-color: #272727;">
					<view>长按添加客服企业微信</view>
					<image class="wh-490 mt-50" :src="$config.cdnUrl+kfImg" :show-menu-by-longpress="true">
					</image>
				</view>
			</wskj-model-close>
		</view>
		<view class="share">
			<wskj-model-close :show="shareShow" :showClose="false" @close="shareShow = false">
				<view class="flex-center-center flex-column"
					style="background-color: transparent;border-radius: 20rpx 20rpx 0rpx 0rpx;">
					<view class="flex-center-center h-997">
						<image class="w-560 h-997" :src="$config.cdnUrl+shareImg"></image>
					</view>
					<view class="flex">
						<button class="flex-center-center br-48 w-256 h-77 mt-30" style="background-color: #FFFFFF;"
							open-type="share">分享好友</button>
						<view @click="onSave" class="flex-center-center br-48 w-256 h-77 mt-30 ml-20"
							style="background-color: #FE42C2;color: white;">保存本地</view>
					</view>
				</view>
			</wskj-model-close>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				hyImg: '',
				kfImg: '',
				shareImg: '',
				userInfo: {},
				vipShow: false,
				kfShow: false,
				shareShow: false,
				userId: '',
				list: [{
						name: 'photo',
						num: '0',
						title: '我的卡座'
					},
					{
						name: 'photo',
						num: '1',
						title: '我的足迹'
					}

				],
			};
		},
		onLoad() {
			if (!uni.getStorageSync('token')) {
				this.$wskj.to('/pages/login/wechatlogin');
				return
			}
			this.getImg(1)
			this.getImg(2)
			this.getImg(6)
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				return
			}
			this.getUserInfo()
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: '分享图片',
				imageUrl: this.shareImg
			}
		},

		methods: {
			// 业绩提现
			handlePerformance() {
				uni.navigateTo({
					url: `/subPackages/withdrawalCash/withdrawalCash`
				})
			},
			onTab(listIndex) {
				if (listIndex == 0) {
					this.$wskj.to('/pages/yht/user_wdkz')
				} else {
					this.$wskj.to('/pages/yht/user_wdzj')
				}
			},
			getUserInfo() {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					console.log('用户信息', res.data);
					this.userId = res.data.id + ''
					this.userInfo = res.data
				})
			},
			getImg(id) {
				//1 分享 2 客服二维码 3 头号玩家背景 4 定卡邀请函背景 5 拼卡邀请函背景 6 会员背景
				const params = {
					url: '/system/member/gbImg?bgId=' + id,
					data: {}
				}
				this.$request(params).then(res => {
					console.log(res.data.bgImg);
					if (id == 1) {
						this.shareImg = res.data.bgImg
					} else if (id == 2) {
						this.kfImg = res.data.bgImg
					} else if (id == 6) {
						this.hyImg = res.data.bgImg
					}
				})
			},
			sharedApp() {
				//分享小程序等后端生成二维码
				this.shareShow = true
			},
			onMessage() {
				this.$wskj.to('/pagesMine/pages/user_message')
			},
			onSm() {
				if (!!this.userInfo.realname) {
					return
				}
				this.$wskj.to('/pagesMine/pages/user_smxx?userName=' + this.userInfo.realname + '&userNumber=' + this
					.userInfo
					.idNumber)
			},
			onShare() {
				if (!this.shareImg) {
					this.$wskj.toast('未获取到地址，暂时不能分享')
					return
				}
				// 先下载图片
				uni.downloadFile({
					url: this.shareImg,
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							uni.share({
								provider: "weixin",
								type: 0,
								scene: "WXSenceTimeline",
								imageUrl: res.tempFilePath, // 使用下载后的临时文件路径作为分享图片
								success: function(res) {
									console.log("分享成功");
								},
								fail: function(err) {
									console.log("分享失败", err);
								}
							});
						}
					},
					fail: (err) => {
						console.log('下载图片用于分享失败：', err);
					}
				});
			},
			onSave() {
				if (!this.shareImg) {
					this.$wskj.toast('未获取到地址，暂时不能保存')
					return
				}
				const _than = this;
				// 先下载图片
				uni.downloadFile({
					url: this.shareImg,
					success: (res) => {
						if (res.statusCode === 200) {
							// 假设已经成功下载图片，获取到了 tempFilePath
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											_than.$wskj.toast('图片保存成功')
										},
										fail: (err) => {
											_than.$wskj.toast('图片保存成功失败')
										}
									});
								},
								fail() {
									// 用户拒绝授权，可以引导用户去设置中开启权限
									uni.showModal({
										content: '需要从设置中开启保存图片到相册的权限',
										showCancel: false
									});
								}
							});
						}
					},
					fail: (err) => {
						this.$wskj.toast('下载图片失败')
					}
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
	}

	.top {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: linear-gradient(180deg, #1B1511, #221514);
		padding-top: 176rpx;
	}

	.v-user-info {
		display: flex;
		flex-direction: row;
		padding: 30rpx 0;
		padding-left: 24rpx;
		align-items: center;

	}

	.v-user-edit-info {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 186rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx 0rpx 0rpx 32rpx;
	}

	.iv-back {
		width: 16px;
		height: 16px;

	}

	.v-user-name {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		justify-content: space-between;
	}

	.tv-name {
		font-size: 36rpx;
		color: #fff;
	}

	.tv-bq {
		font-size: 28rpx;
		padding: 2rpx 20rpx;
		color: #fff;
		background: #fdb62a;
		border-radius: 4px;
	}

	.radio-label {
		margin-right: 20px;
	}

	.v-vip {
		margin: 0 24rpx;
		height: 180rpx;
		border-radius: 20rpx;
	}


	.imgbox {
		background: linear-gradient(180deg, #FCFFEE 0%, #C2FF5D 100%);
		box-shadow: inset 0rpx 0rpx 16rpx 0rpx #708230;
		border-radius: 10rpx;
	}

	.wh-160 {
		width: 140rpx;
		height: 140rpx !important;
		border-radius: 50%;
	}

	.sum-box {
		font-weight: 400;
		font-size: 28rpx;
		color: #ABABAB;
		margin-right: 10rpx;
	}
</style>