<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title="个人中心" :border-bottom="false" :background="background" title-color='#fff' title-size='36' back-icon-color='#fff'
				height='45'></u-navbar>
		</view>

		<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uJVTiExwVDJJzYywmoLc" mode=""></image>
		<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
		<view class="statusBars" :style="{ height:navBarHeight+'px' }"></view>
		<view class="topbg">
			<view class="topbox">
				<view class="info">
					<image v-if="info.avatar!=''" :src='info.avatar' mode=""></image>
					<image v-if="info.avatar==''&&deptId==100"
						src="https://lxnapi.ccttiot.com/bike/img/static/uSRzzLXhnbnWLB8jMKmr" mode=""></image>
					<image v-if="info.avatar==''&&deptId==101"
						src="	https://lxnapi.ccttiot.com/bike/img/static/uP9vN4Vht0B2bd10Sy60" mode=""></image>

					<view class="cont">
						<view class="name" v-if="info.realName!=null">
							{{maskedName}}
						</view>
						<view class="name" v-if="info.realName==null">
							未实名
						</view>
						<view class="phone">
							{{ maskedPhoneNumber }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="btnbg" v-if="false">
				<view class="btnbox">
					<view class="btncard">
						<view class="card_li" @click="topage(1)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u3ILM6aE0MdFo3ZKiYPH" mode="">
								</image>
								<view class="text">
									押金
								</view>
								<view class="tip" v-if="info.balance==null">
									未充值
								</view>
							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(2)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u4Y4UAai9GLSaCBMMIsv" mode="">
								</image>
								<view class="text">
									我的订单
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(3)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/u245BAqGOvTbYYGXJcrC" mode="">
								</image>
								<view class="text">
									问题上报记录
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(4)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/ufD1uFe0pknx00weXJaU" mode="">
								</image>
								<view class="text">
									用车指南
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<!-- <view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJFhEFoioikjCQqqWW3c" mode=""></image>
								<view class="text">
									计费规则
								</view>
								
							</view>
							<view class="iconfont icon-xiangyou1" >
								
							</view>
						</view> -->
						<view class="card_li" @click="topage(10)">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uk7i80QWz02cAfbbC518" mode="">
								</image>
								<view class="text">
									客户服务
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(8)" v-if="info.role==3||info.role==2">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode="">
								</image>
								<view class="text">
									维护入口
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(9)" v-if="info.role==3">
							<view class="card_left">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode="">
								</image>
								<view class="text">
									管理入口
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
					</view>
					<view class="btncard" style="margin-top: 36rpx;" v-if="false">
						<view class="card_li" @click="topage(5)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/utp8xohLmuvcTiYZdGCL" mode="">
								</image>
								<view class="text">
									用户协议
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="card_li" @click="topage(6)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/um7bn51NCkfnuQbP0toj" mode="">
								</image>
								<view class="text">
									隐私政策
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>

						<view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(7)">
							<view class="card_left">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uJ1TRgb6xURsKZo5GUj8" mode="">
								</image>
								<view class="text">
									关于我们
								</view>

							</view>
							<view class="iconfont icon-xiangyou1">

							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="tocont">
			<view class="cont_li" @click="topage(1)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYfTj4a3NkSNY0AqYHFc" mode=""></image>
				<view class="txt">
					押金
				</view>
			</view>
			<view class="cont_li" @click="topage(11)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY" mode=""></image>
				<view class="txt">
					实名认证
				</view>
			</view>
			<view class="cont_li" @click="topage(4)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ucR0pDCg1vDshatphlUb" mode=""></image>
				<view class="txt">
					用车指南
				</view>
			</view>
			<view class="cont_li" @click="topage(10)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uLHRXFuIPhMy0EDgPdVr" mode=""></image>
				<view class="txt">
					客服服务
				</view>
			</view>
		</view>
		<view class="type_cont">
			<view class="type_li"  @click="topage(2)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uG1iB3C69uNIr9Zx7qH6" mode=""></image>
				我的订单
				 <view class="iconfont icon-xiangyou1" ></view>
			</view>
			<view class="type_li" style="margin-top: 70rpx;"  @click="topage(3)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uqsALXg6QXh9Yf6wIddS" mode=""></image>
				问题上报
				 <view class="iconfont icon-xiangyou1" ></view>
			</view>
			<view class="type_li" style="margin-top: 70rpx;" @click="topage(10)">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uuVBPGs95GoM8RZ1FfVx" mode=""></image>
				帮助中心
				 <view class="iconfont icon-xiangyou1" ></view>
			</view>
		</view>
		<view class="type_cont" v-if="info.role==3||info.role==2">
			<view class="type_li"  @click="topage(8)" v-if="info.role==3||info.role==2">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uyA3Cjjryy4Z9fCjs15Z" mode=""></image>
				运维人员
				 <view class="iconfont icon-xiangyou1" ></view>
			</view>
		
			<view class="type_li" style="margin-top: 70rpx;" @click="topage(9)" v-if="info.role==3">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uC0nQVG6EK7OCYefw1Ws" mode=""></image>
				管理人员
				 <view class="iconfont icon-xiangyou1" ></view>
			</view>
		</view>
		<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import {
		info
	} from 'autoprefixer';
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent'
				},
				backcolor:{
					color:'#ffffff'
				},
				info: {},
				totype: 0,
				list: [],
				show: false,
				deptId: 0,
				statusBarHeight: 0,
				navBarHeight: 0




			}
		},
		onLoad() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];

			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()


			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2


			// #endif

		},
		onShow() {
			this.deptId = uni.getStorageSync('deptId');
			this.getuserInfo()
		},
		computed: {
			maskedPhoneNumber() {
				if (!this.info.phonenumber) return '';
				return this.info.phonenumber.slice(0, 3) + '****' + this.info.phonenumber.slice(7);
			},
			maskedName() {
				if (!this.info.realName) return '';
				return this.info.realName.charAt(0) + '*'.repeat(this.info.realName.length - 1);
			}
		},
		methods: {
			topage(num) {
				if (num == 0) {
					// uni.navigateTo({
					// 	url:''
					// })
				} else if (num == 1) {
					uni.navigateTo({
						url: '/page_user/yj'
					})
				} else if (num == 2) {
					uni.navigateTo({
						url: '/page_user/good_list'
					})
				} else if (num == 3) {
					uni.navigateTo({
						url: '/page_user/qsrecord'
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '/page_user/yczn'
					})
				} else if (num == 5) {
					uni.navigateTo({
						url: '/page_user/jfgz'
					})
				} else if (num == 8) {
					this.totype = 1

					if (this.list.length < 2) {
						uni.setStorageSync('adminAreaid', this.list[0].value);

						uni.navigateTo({
							url: '/page_fix/fix_index'
						})

					} else {
						this.show = true
					}
				} else if (num == 9) {

					this.totype = 2

					if (this.list.length < 2) {
						uni.setStorageSync('adminAreaid', this.list[0].value);
						uni.navigateTo({
							url: '/pages_admin/admin_index'
						})
					} else {
						this.show = true
					}

				} else if (num == 10) {

					uni.navigateTo({
						url: '/page_user/khfw/khfw'
					})
				} else if (num == 11) {
					if(info.idCard==''){
						uni.navigateTo({
							url: '/page_user/idcard_test'
						})
					}else{
						uni.showToast({
							title: '实名授权已完成',
							icon: 'none',
							duration: 2000
						});
					}
					
				}

			},
			confirm(e) {
				// console.log(e);
				uni.setStorageSync('adminAreaid', e[0].value);
				if (this.totype == 2) {

					uni.navigateTo({
						url: '/pages_admin/admin_index'
					})
				} else {
					uni.navigateTo({
						url: '/page_fix/fix_index'
					})
				}


			},
			getareaList() {


				this.$u.get('/appVerify/getAreaList').then((res) => {
					if (res.code == 200) {
						this.list = res.data.map(item => ({
							value: item.areaId,
							label: item.areaName
						}));
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},
			getuserInfo() {
				uni.showLoading({
					title: '加载中'
				})
				this.$u.get("/getAppInfo").then((res) => {

					if (res.code == 200) {
						uni.hideLoading()
						this.$store.commit('SET_USERID', res.user.userId);
						this.info = res.user
						if (info.role != 1) {
							this.getareaList()
						}
						// if( res.user.role==2){
						// 	uni.navigateTo({
						// 		url:'/page_fix/fix_index'
						// 	})
						// }
					} else {

						let areaId = uni.getStorageSync('areaId');
						if (areaId) {
							let that = this
							wx.login({
								success(res) {
									if (res.code) {
										console.log('登录！', res);
										let data = {
											wxOpenId: res.code,

										};
										let areaId = uni.getStorageSync('areaId');
										that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' +
											areaId).then(
											res => {
												uni.hideLoading();
												if (res.code == 200) {
													uni.setStorageSync('token', res.token);
													that.getuserInfo()


												} else if (res.code == 501) {
													uni.showToast({
														title: res.msg,
														icon: 'none',
														duration: 2000
													});
												} else {
													// console.log("老用户登录",res.data)
													uni.redirectTo({
														url: '/pages/login/login'
													})
												}
											});
									}
								},

							});
						} else {
							uni.showToast({
								title: '请授权位置信息后再尝试',
								icon: 'none',
								duration: 4000
							});
						}

					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar {
		background: transparent !important; // 使用 !important 确保覆盖原样式
	}

	page {
		background-color: #F4F4F4;
	}

	.page {
		width: 750rpx;

		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}

		.backimg {
			position: fixed;
			width: 750rpx;
			height: 564rpx;
			z-index: -1;
		}

		.topbg {
			width: 750rpx;
			// background: #fff;
			height: 184rpx;
			
			.topbox {
				width: 750rpx;
				// background: #fff;
				height: 184rpx;
				border-radius: 0 0 100rpx 0;

				.info {
					padding-top: 40rpx;
					margin-left: 100rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.cont {
						margin-left: 40rpx;
						width: 70%;

						.name {
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							width: 100%;
							text-shadow: 0px 8px 20px rgba(0,0,0,0.3);
						}

						.phone {
							margin-top: 4rpx;
							width: 100%;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							text-shadow: 0px 8px 20px rgba(0,0,0,0.3);
						}
					}
				}
			}
		}
		.type_cont{
			
			width: 680rpx;
			padding: 58rpx 54rpx;
			// height: 608rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin:  0 auto;
			margin-top: 30rpx;
			.type_li{
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				font-weight: 400;
				font-size: 32rpx;
				color: #2F3240;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
				.icon-xiangyou1{
					margin-left: auto;
					color: #2F3240;
					font-size: 36rpx;
				}
				
			}
		}
		.tocont{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			margin:  0 auto;
			margin-top: 100rpx;
			width: 680rpx;
			height: 176rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.cont_li{
				width: 112rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
				image{
					margin-top: 10rpx;
					width: 44rpx;
					height: 44rpx;
				}
				.txt{
					width: 112rpx;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #2F3240;
				}
			}
		}
		.btnbg {
			width: 750rpx;
			// background: #4C97E7;

			.btnbox {
				padding-top: 36rpx;
				width: 750rpx;
				background: #fff;

				border-radius: 100rpx 0 0 0;

				.btncard {
					padding: 0 54rpx;
					margin: 0 auto;
					width: 680rpx;
					// height: 438rpx;
					padding: 0 56rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 34rpx 34rpx 34rpx 34rpx;

					.card_li {
						padding-top: 18rpx;
						width: 100%;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2rpx solid #D8D8D8;
						padding-bottom: 26rpx;

						.card_left {
							// width: 100%;
							display: flex;
							flex-wrap: nowrap;
							// align-items: center;

							image {
								margin-right: 28rpx;
								width: 40rpx;
								height: 40rpx;
							}

							.text {
								margin-right: 24rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}

							.tip {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 80rpx;
								height: 28rpx;
								background: #FFEFEF;
								border-radius: 17rpx 17rpx 17rpx 17rpx;
								font-weight: 400;
								font-size: 16rpx;
								color: #FA5F5F;
							}
						}

						.icon-xiangyou1 {
							font-size: 42rpx;
							color: #3D3D3D;
						}

					}
				}
			}
		}
	}
</style>