<template>
	<view class="my-box">
		<!-- 顶部用户信息区域 -->
		<view class="user-info">
			<view class="avatar-box">
				<u-image v-if="userInfo.avatar" width="122rpx" height="122rpx" :src="userInfo.avatar" shape="circle"></u-image>
				<u-image v-else width="122rpx" height="122rpx" src="http://static.drgyen.com/app/hc-app-power/images/my/avatar.png" shape="circle"></u-image>
			</view>
			<view class="info-content">
				<view class="nickname">{{ userInfo.nickName }}</view>
				<view class="user-id">手机号：{{ userInfo.phonenumber }}</view>
				<view class="user-open-id">{{ openId }} <text class="iconfont icon-clipboard" @click="copyOpenID"></text> </view>
			</view>
		</view>
		
		<!-- 功能列表区域 -->
		<view class="function-list">
			<view class="list-item" @click="goRouterFn('/pages/my/passwordModify')">
				<view class="item-left">
					<u-icon name="lock" color="#666666" size="32"></u-icon>
					<text class="item-title">修改密码</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
				</view>
			</view>
			<!-- <view class="list-item" @click="goRouterFn('/pages/test/payTest')">
				<view class="item-left">
					<u-icon name="rmb-circle" color="#666666" size="32"></u-icon>
					<text class="item-title">支付测试</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
				</view>
			</view> -->
			<view class="list-item">
				<view class="item-left">
					<u-icon name="integral" color="#666666" size="32"></u-icon>
					<text class="item-title">版本号</text>
				</view>
				<view class="item-right">
					<text class="item-value">v1.0.0</text>
				</view>
			</view>
		</view>
		
		
		<!-- 退出 -->
		<view class="btn-box">
			<u-button shape="circle"  @click="outLoginFn" type="primary" >退出登录</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				userInfo: {
					avatar:""
				},
				tenantInfo: null,
				version:'1.0.0',
				menuList:[
					{
						name:'新报警提醒',
						remark:'掌握动态',
						icon:"dicon-icon_gaojingjilu",
						url:"./my/newAlarmRemind",
						background:"linear-gradient(0deg, #D94353, #FF887C);",
						twoColor: "rgba(255,79,98,0.1);"
					},
					{
							name: "维保记录",
							remark: "数智化管理",
							icon: "dicon-icon_weibao",
							url: "./my/maintenanceRecord",
							background: "linear-gradient(0deg, #005CAE, #008CFB);",
							twoColor: "rgba(0,108,204,0.1);"
					},
					{
							name: "工程服务",
							remark: "一站式对接服务",
							icon: "dicon-icon_gongcheng",
							url: "./my/projectServe",
							background: "linear-gradient(0deg, #008C18, #00C853);",
							twoColor: "rgba(0,172,36,0.1);"
					},
					{
							name: "联系我们",
							remark: "战略合作",
							icon: "dicon-xiaoxi",
							url: "./my/onlineServe",
							background: "linear-gradient(0deg, #4E00A1, #8A00E2);",
							twoColor: "rgba(99,0,211,0.1);"
					},
					{
							name: "密码修改",
							remark: "安全保护",
							icon: "dicon-mima1",
							url: "./my/passwordModify",
							background: "linear-gradient(0deg, #03648F, #04A4E6);",
							twoColor: "rgba(4,123,179,0.1);"
					},
					{
							name: "帮助中心",
							remark: "快速找到解决方案",
							icon: "dicon-bangzhu",
							url: "./my/help",
							// url: "/pages/my/helpCenter",
							background: "linear-gradient(0deg, #D38A00, #FFB700);",
							twoColor: "rgba(248,163,0,0.1);"
					},
					{
							name: "关于平台",
							remark: "一目了然",
							icon: "dicon-icon_guanyu",
							url: "./my/about",
							background: "linear-gradient(0deg, #B22C9D, #FF6EC7);",
							twoColor: "rgba(213,54,189,0.1);"
					}
				],
				officialAccount: {
					appid: '',
					appsecret: '',
				},
				openId:''
			}
		},
		onLoad() {
			let appIdPublic = uni.getStorageSync('appIdPublic');
			console.log("this.$store.state.app.appConfig.appIdPublic",this.$store.state.app.appConfig.appIdPublic)
			this.officialAccount.appid = appIdPublic || '';
			// #ifdef MP-WEIXIN
			const accountInfo = wx.getAccountInfoSync();
			if(accountInfo.miniProgram.envVersion=='release'){
				this.version = accountInfo.miniProgram.version;
			}
			// #endif
			this.getUserInfoFn();
			
			
		},
		onShow() {
			// opneID获取
			let res = uni.getStorageSync('openId');
			if (res) {
				this.openId = res;
			} else {
				// #ifdef H5
				let code = this.getUrlCode('code')
				if (code || this.code) {
					this.code = code;
					this.getOpenidAndUserinfo(code)
					// // 清除URL中的code参数
					// const url = window.location.href;
					// const newUrl = url.split('?')[0]; // 去掉参数部分
					// history.replaceState({}, '', newUrl+'');
				} else {
					this.getH5Code()
				}
				// #endif
			}
		},
		methods: {
			copyOpenID(){
				uni.setClipboardData({
					data: this.openId,
					success: function () {
						console.log('success');
					}
				});
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getH5Code() {
				if (this.isWechat()) {
					// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.officialAccount
						.appid + '&redirect_uri=' + encodeURIComponent(window.location.href) +
						'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
					console.log("跳转授权页面",'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.officialAccount
						.appid + '&redirect_uri=' + encodeURIComponent(window.location.href) +
						'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect')
				}
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [,
					''])[1].replace(/\+/g, '%20')) || null
			},
			getOpenidAndUserinfo(code) {
				console.log("code换openid")
				this.$api.orderApi.getWxOpenid({
					code: code
				}).then((res) => {
					console.log("获取openid", res)
					if (res.code == 200) {
						if(res.data.openid){
							this.openId = res.data.openid;
							uni.setStorageSync('openId', res.data.openid)
							this.clearUrlCode();
						}else{
							this.clearUrlCode();
							this.getUrlCode();
						}
						// 1、调用后端获取支付参数
						// 2、调起支付
					}else{
						
					}
				}).catch(() => {
			
				})
			},
			clearUrlCode(){
				// 清除URL中的code参数
				const url = window.location.href;
				const newUrl = url.split('?')[0]; // 去掉参数部分
				history.replaceState({}, '', newUrl+'/pages/order/detail?id='+this.orderId);
			},
			getUserInfoFn() {
				// let userToken = uni.getStorageSync("userToken");
				let userType = uni.getStorageSync("userType");
				// let getUserInfoUrl = userType === "企业用户"?"/system/personal/profile":"/system/user/profile";
				let getUserInfoUrl = "/system/user/getInfo";

				this.$get(getUserInfoUrl).then((res) => {
					console.log(res, "res");
					if (!res.data) return;
					this.userInfo = res.data.user;
					this.tenantInfo = res.data.tenant;
					uni.setStorageSync("tenantInfo", res.data.tenant)
					uni.setStorageSync("userInfo", this.userInfo)
				})
			},
			goRouterFn(url) {
				console.log(url, "url");
				uni.navigateTo({
					url: url
				})
			},
			getUrl(url) {
				if (url && url.indexOf('http') > 0) {
					return url;
				} else {
					return this.$config.baseUrl + url;
				}
			},
			// 退出登录
			outLoginFn(){
				// uni.clearStorageSync();
				uni.removeStorageSync('userToken');
				uni.reLaunch({
					url:"../auth/passwordLogin"
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}
	.my-box {
		width: 100%;
		// padding: 10rpx 45rpx 0;
		font-family: Source Han Sans CN;
		:not(not) {
			box-sizing: border-box;
		}
		
		.user-info {
			padding: 40rpx 32rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
		}
	
		.avatar-box {
			margin-right: 24rpx;
		}
	
		.info-content {
			flex: 1;
		}
	
		.nickname {
			font-size: 16px;
			color: #333333;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
	
		.user-id {
			font-size: 14px;
			color: #999999;
		}
		.user-open-id{
			font-size: 20rpx;
			color: #999999;
			display: flex;
			align-items: center;
			.iconfont{
				padding: 10rpx;
				font-size: 28rpx;
			}
		}
		
		.function-list {
			margin-top: 20rpx;
			background-color: #FFFFFF;
		}
	
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #EEEEEE;
		}
	
		.list-item:last-child {
			border-bottom: none;
		}
	
		.item-left {
			display: flex;
			align-items: center;
		}
	
		.item-title {
			font-size: 14px;
			color: #333333;
			margin-left: 16rpx;
		}
	
		.item-right {
			display: flex;
			align-items: center;
		}
	
		.item-value {
			font-size: 14px;
			color: #999999;
			margin-right: 8rpx;
		}
	

		.header-box {
			width: 660rpx;
			height: 292rpx;
			border-radius: 20px;
			background: url("http://static.drgyen.com/app/hc-app-power/images/my/header-bg.jpg") no-repeat;
			background-size: 100% 100%;
			position: relative;
			display: flex;
			align-items: center;
			padding-left: 27rpx;
			padding-top: 20rpx;
			.avatar-box {
				margin-right: 26rpx;
			}
			.userinfo-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-weight: 500;
				color: #fff;
				.header-userinfo-name {
					font-size: 28rpx;
				}
				.header-userinfo-company {
					font-size: 24rpx;
					padding-top: 10rpx;
				}
			}
		}
		// 菜单
		.menu-box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.menu-item{
				width: 320rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx 20rpx 15rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;
				
				&:nth-child(2n-1) {
					margin-right: 20rpx;
				}
				.home-menu-item-header {
					display: flex;
					// align-items: center;
					justify-content: space-between;
				
					.home-menu-item-name {
						font-weight: 550;
						font-size: 28rpx;
					}
					.home-menu-item-remark {
						font-size: 20rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				
					.home-menu-item-right {
						width: 38rpx;
						height: 38rpx;
						background: #EFEFEF;
						border-radius: 50%;
						padding-left: 2rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.home-menu-item-value{
					position: absolute;
					left: 30rpx;
					bottom: 26rpx;
					font-size: 24rpx;
					font-weight: 550;
				}
				.home-menu-item-bg {
					position: absolute;
					right: 37rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 99;
					color: transparent;
					display: inline-block;
					-webkit-background-clip: text;
				}
				.home-menu-item-bg-two{
					position: absolute;
					right: 44rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 98;
				}
			}
			.border-box{
				height:1px;
				background: #E0E3E5;
			}
		}
		
		.btn-box{
			margin-top: 100rpx;
			padding: 0 20rpx;
		}

	}
</style>