<template>
	<view class="page">
		<u-navbar title="个人中心" :is-back='false' :border-bottom="false" :background="bgc" title-color='#fff'
			title-size='36' height='45'></u-navbar>
        <view class="info">
        	<view class="lt">
        		<view class="pic">
        			<image :src="appimg.mineDefaultAvatar" mode="aspectFill" style="border-radius: 50%;width:112rpx;height: 112rpx;"></image>
        		</view>
        		<view class="cen">
        			<view class="name">
        				{{user.nickName == null ? '--' : maskName(user.nickName)}}
        			</view>
        			<view class="tel">
        				{{user.userName == null ? '--' : maskPhone(user.userName)}}
        			</view>
        		</view>
        	</view>
			<!-- <u-icon name="arrow-right" color="#D8D8D8" size="28"></u-icon> -->
			<view class=""></view>
        </view>
		<view class="zijin" @click="btntx">
			<view class="top">
				<view class="lt">
					<view class="zh">
						账户余额（元）
					</view>
					<view class="price">
					   ￥{{user.balance == null ? '0.00' : (Number(user.balance) + Number(waitDivideAmount)).toFixed(2)}}
					</view>
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uWybWHvfNvmi7X0hp93I" mode=""></image>
				</view>
			</view>
			<view class="bot">
				<view class="botlt">
					可提现 ￥{{user.balance == null ? '0.00' : user.balance.toFixed(2)}}
				</view>
				<view class="botrt">
					累计提现 ￥{{successAmount == null ? '0.00' : Number(successAmount).toFixed(2)}}
				</view>
			</view>
		</view>
		
		<view class="caozuolist">
			<view class="itemcaozuo" @click="btnskzh">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ubmOhv58UFoPpg8fyTf5" mode=""></image> 收款账户
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
			<view class="itemcaozuo" @click="btnbangzhu">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uHbCdZb2Z034155WseVr" mode=""></image> 使用帮助
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
			<view class="itemcaozuo" @click="btnfuwuewm">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uKy9LoyuuVQAdeL8pvm7" mode=""></image> 消息通知
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
			<view class="itemcaozuo" @click="btnLicense">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uiYvlUjghsWmJXbVnHdc" mode=""></image> 企业认证
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
			<!-- <view class="itemcaozuo" @click="btnLicense">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ueOFWLPU7WhWW7AYgxh7" mode=""></image> 营业执照
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view> -->
		</view>
		<view class="caozuolist" style="height: 130rpx;padding-top: 40rpx;" @click="btnyh">
			<view class="itemcaozuo" style="margin-top: 0;">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ubmOhv58UFoPpg8fyTf5" mode=""></image> 进入用户端
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
		</view>
		<view class="caozuolist" style="height: 130rpx;padding-top: 40rpx;" @click="btnlogo">
			<view class="itemcaozuo" style="margin-top: 0;">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uId3DZ3vnrSHUfbsv2FF" mode=""></image> 退出登录
				</view>
				<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
			</view>
		</view>
        <view class="fuwuewm" v-if="fuwuewm">
        	<image src="https://api.ccttiot.com/qrcode_for_gh_25c71c637dbc_344%20(2)-1753329225290.jpg" show-menu-by-longpress @longpress="handleLongPress" mode=""></image>
        	<text class="" style="width: 100%;text-align: center;margin-top: 20rpx;display: block;color: #fff;">
        		长按关注公众号，租车信息不错过！
        	</text>
        	<view class="" @click="fuwuewm = false">
        		关闭
        	</view>
        </view>
        <view class="mask" style="background-color: rgba(0, 0, 0, 0.7);" v-if="fuwuewm"></view>
        <TabBar :indexs='4' style=""></TabBar> 
	</view>
</template>
<script>
	import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
	export default {
		components: { TabBar },
		data() {
			return {
                bgc: {
                	backgroundColor: " ",
                },
				fuwuewm:false,
				appimg: this.$store.state.app.imgConfig,
				user:{},
				waitDivideAmount:'',
				successAmount:'',
				licenseInfo: null, // 营业执照信息
				authTypes: [] // 认证类型数组
			}
		},
		onLoad() {

		},
		onShow() {
			this.$store.dispatch('jiance');
			this.getinfo()
		},
		methods: {
			// 点击企业认证
			btnLicense(){
				let url = '/page_shanghu/upload_license';
				if(this.user.userId){
					url += '?userId=' + this.user.userId;
				}
				uni.navigateTo({
					url: url,
					success: (res) => {
						console.log('跳转成功:', res);
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败，请稍后重试',
							icon: 'none'
						})
					}
				})
			},
			// 点击跳转收款账户
			btnskzh(){
				if(this.user.isReal == true){
					uni.navigateTo({
						url:'/page_user/shoukuan/index'
					})
				}else{
					uni.showModal({
						title: '提示',
						content: '您还未通过实名认证，是否前往？',
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/page_user/shiming'
								})
							} else if (res.cancel) {
							    console.log('取消') // 用户点击取消
							}
						}
					})
				}
			},
			// 点击进行跳转点击去提现
			btntx(){
				uni.navigateTo({
					url:'/page_shanghu/gongzuotai/AccountDetails'
				})
			},
			// 点击跳转到商户使用帮助
			btnbangzhu(){
				uni.navigateTo({
					url:'/page_fenbao/bangzhu/index'
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get("/getInfo").then((res) => {
					if(res.code == 200){
						this.user = res.user
						this.authTypes = res.user.authTypes || []
						this.waitDivideAmount = res.stat.bonus.waitDivideAmount == null ? 0 : res.stat.bonus.waitDivideAmount
						this.successAmount = res.stat.withdraw.successAmount == null ? 0 : Number(res.stat.withdraw.successAmount)
					}
				})
			},
			// 名称：将名称的第二位替换为 * 展示
			maskName(name) {
				if (!name || typeof name !== 'string') return name
				const chars = Array.from(name)
				if (chars.length < 2) return name
				chars[1] = '*'
				return chars.join('')
			},
			// 手机号：将手机号的中间四位替换为 * 展示
			maskPhone(phone) {
				if (!phone) return phone
				const str = String(phone)
				if (str.length < 7) return str
				return str.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			},
			// 点击回到用户页
			btnyh(){
				uni.reLaunch({
					url:'/pages/nearbystores/index'
				})
			},
			// 点击绑定服务号
			btnfuwuewm(){
				let that = this
				wx.login({
					success(res) {
						if (res.code) {
							that.$u.put(`/app/user/bindUnionId?jsCode=${res.code}`).then((res) => {
								if (res.code == 200) {
								    that.fuwuewm = true
								}else{
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel:false,
									})
								}
							})
						}
					},
				})
			},
			// 点击退出登录
			btnlogo(){
				uni.showModal({
					title: '提示',
					content: '您确定要退出登录吗？',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							try {
								uni.clearStorageSync() // 同步清除
								console.log('所有缓存已清除')
								uni.showToast({
									title: '缓存已清除',
									icon: 'success',
									duration: 3000
								})
								uni.reLaunch({
									url: '/pages/login/login'
								})
							} catch (e) {
								console.error('清除失败:', e)
								uni.showToast({
									title: '清除失败',
									icon: 'none',
									duration: 3000
								})
							}
						} else if (res.cancel) {
							console.log('取消'); // 用户点击取消
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient( 180deg, #4886F1 0%, rgba(66,151,243,0) 100%);
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.fuwuewm{
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		image{
			width: 600rpx;
			height: 600rpx;
		}
		view{
			width: 200rpx;
			height: 70rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 70rpx;
			margin: auto;
			margin-top: 50rpx;
			border-radius: 10rpx;
		}
	}
	.caozuolist{
		width: 718rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding-top: 2rpx;
		margin: auto;
		margin-top: 24rpx;
		.itemcaozuo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 48rpx;
			margin-top: 52rpx;
			.lt{
				display: flex;
				align-items: center;
				image{
					width: 54rpx;
					height: 54rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
	.zijin{
		width: 718rpx;
		height: 278rpx;
		background: linear-gradient( 90deg,#2C8AF0 0%, #B6D9FF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 24rpx;
		position: relative;
		overflow: hidden;
		.bot{
			width: 718rpx;
			height: 70rpx;
			background: linear-gradient( 90deg, rgba(205,224,255,0) 0%, #ACCBFF 34%, #CDE0FF 100%);
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			bottom: 0;
			.botlt{
				font-size: 28rpx;
				color: #FFFFFF;
				width: 50%;
				height: 50rpx;
				line-height: 50rpx;
				border-right: 1px solid #fff;
				padding-left: 36rpx;
			}
			.botrt{
				font-size: 28rpx;
				color: #FFFFFF;
				width: 50%;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 26rpx;
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.lt{
				margin-top: 26rpx;
				padding-left: 34rpx;
				.zh{
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.price{
					margin-top: 30rpx;
					font-size: 60rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
			}
			.rt{
				image{
					width: 196rpx;
					height: 52rpx;
				}
			}
		}
	}
    .info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 20rpx;
		padding: 0 30rpx;
		.lt{
			display: flex;
			align-items: center;
			.pic{
				width: 112rpx;
				height: 112rpx;
				// background: #D8D8D8;
				margin-right: 36rpx;
				border-radius: 50%;
			}
			.cen{
				.name{
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
				}
				.tel{
					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>