<template>
	<view class="top">
		<image class="bjtp" src="../../static/img/wobg.jpg" />
		<view v-if="islogin" class="userinfor">
			<view @tap="topage('/minePages/userInfor/index')" class="toux">
				<image :src="toux()" />
				<view>
					<view class="niche">{{username()}}</view>
					<!-- <view style="text-align: center;color: #484848;">{{userInfo.phoneNumber}}</view> -->
				</view>
			</view>
			<view style="text-align: center;" @tap="topage('/minePages/account/index')">
				<view style="font-size: 36rpx;text-align: center;">{{totalAmount/100}}</view>
				<view style="color: #848484;">余额</view>
			</view>
		</view>
		<view v-else class="userinfor">
			<view class="toux">
				<image src="../../static/img/toux.png" />
				<view>未登录</view>
			</view>
			<view class="btn" @tap="topage('/pages/login/index')">登录</view>
		</view>
		<!-- <up-icon name="arrow-right" color="#bdbdbd" size="20" /> -->
	</view>
	<view class="gncont">
		<template v-if="islogin">
			<view class="gnrk" @tap="topage('/minePages/order/index')">
				<view>
					<image src="../../static/img/cd2.png" />
					<view>我的订单</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="topage('/minePages/recharge/index')">
				<view>
					<image src="../../static/img/cd1.png" />
					<view>充值中心</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="topage('/minePages/reserlist/index')">
				<view>
					<image src="../../static/img/shiyxy.png" />
					<view>预约记录</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="topage('/minePages/vehicle/index')">
				<view>
					<image src="../../static/img/cd3.png" />
					<view>我的车辆</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="topage('/minePages/company/index')">
				<view>
					<image src="../../static/img/cd4.png" />
					<view>所属公司</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
		</template>
		<template v-else>
			<view class="gnrk" @tap="wdltip">
				<view>
					<image src="../../static/img/cd2.png" />
					<view>我的订单</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="wdltip">
				<view>
					<image src="../../static/img/cd1.png" />
					<view>充值中心</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="wdltip">
				<view>
					<image src="../../static/img/shiyxy.png" />
					<view>预约记录</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="wdltip">
				<view>
					<image src="../../static/img/cd3.png" />
					<view>我的车辆</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
			<view class="gnrk" @tap="wdltip">
				<view>
					<image src="../../static/img/cd4.png" />
					<view>所属公司</view>
				</view>
				<up-icon name="arrow-right" color="#b9b9b9" />
			</view>
		</template>
		<view class="gnrk" @tap="kefu">
			<view>
				<image src="../../static/img/shiyxy.png" />
				<view>客服热线</view>
			</view>
			<up-icon name="arrow-right" color="#b9b9b9" />
		</view>
		<!-- <view class="gnrk">
			<view>
				<image src="../../static/img/jrwm.png" />
				<view>加入我们</view>
			</view>
			<up-icon name="arrow-right" color="#b9b9b9" />
		</view> -->
		<view class="gnrk" @tap="topage('/minePages/about/index')">
			<view>
				<image src="../../static/img/gywm.png" />
				<view>关于我们</view>
			</view>
			<up-icon name="arrow-right" color="#b9b9b9" />
		</view>
	</view>
	<!-- <view v-if="islogin" class="cdrk">
		<view @tap="topage('/minePages/recharge/index')">
			<image src="../../static/img/cd1.png" />
			<view>充值</view>
		</view>
		<view @tap="topage('/minePages/order/index')">
			<image src="../../static/img/cd2.png" />
			<view>我的订单</view>
		</view>
		<view @tap="topage('/minePages/reserlist/index')">
			<image src="../../static/img/shiyxy.png" />
			<view>预约记录</view>
		</view>
		<view @tap="topage('/minePages/vehicle/index')">
			<image src="../../static/img/cd3.png" />
			<view>车辆管理</view>
		</view>
	</view> -->
	
	<!-- <view v-else @tap="wdltip" class="cdrk">
		<view>
			<image src="../../static/img/cd1.png" />
			<view>充值</view>
		</view>
		<view>
			<image src="../../static/img/cd2.png" />
			<view>我的订单</view>
		</view>
		<view>
			<image src="../../static/img/shiyxy.png" />
			<view>预约记录</view>
		</view>
		<view>
			<image src="../../static/img/cd3.png" />
			<view>车辆管理</view>
		</view>
	</view> -->
	
	<!-- <view class="cdrk">
		<view>
			<image src="../../static/img/cd4.png" />
			<view>优惠活动</view>
		</view>
		<view>
			<image src="../../static/img/shiyxy.png" />
			<view>客服中心</view>
		</view>
		<view>
			<image src="../../static/img/gywm.png" />
			<view>加入我们</view>
		</view>
		<view>
			<image src="../../static/img/jrwm.png" />
			<view>关于我们</view>
		</view>
	</view> -->
	<!-- <view style="position: absolute;width:100%;bottom: 30rpx;text-align: center;color: #c1c1c1;">关于我们</view> -->
	<!-- <cc-myTabbar :tabBarShow="2"></cc-myTabbar> -->
	<mytabbar :tabBarShow="2" />
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getInfo,getaccou } from '@/utils/service'
	
	import mytabbar from '@/components/mytabbar/mytabbar.vue'
	
	uni.hideTabBar()
	
	let islogin = ref(false)
	let PhoneNumber = ref('')
	
	let userInfo = reactive<any>({
		phoneNumber:'',
		avatarUrl:'',
		name:'',
		nickName:''
	})
	
	let totalAmount = ref(0)
	function toux() {
		return userInfo.avatarUrl?userInfo.avatarUrl:'../../static/img/toux.png'
	}
	
	onShow(() => {
		if(uni.getStorageSync('wxuid')){
			//获取用户信息
			getInfo({
				wuid:uni.getStorageSync('wxuid')
			}).then((rps:any) => {
				userInfo.phoneNumber = rps.data.phoneNumber?rps.data.phoneNumber:''
				userInfo.nickName = rps.data.nickName?rps.data.nickName:''
				userInfo.avatarUrl = rps.data.avatarUrl?rps.data.avatarUrl:''
				userInfo.name = rps.data.name?rps.data.name:''
			})
			
			//获取账户信息
			getaccou(uni.getStorageSync('wxuid')).then((rps:any) => {
				if(rps.data.records){
					totalAmount.value = rps.data.records[0].totalAmount
					uni.setStorageSync('totalAmount', rps.data.records[0].totalAmount)
					uni.setStorageSync('walletCode', rps.data.records[0].code)
				}
			})
			
			
			islogin.value = true
			// let pnum = uni.getStorageSync('PhoneNumber')
			// if(pnum){
			// 	PhoneNumber.value = pnum
			// }
		}else{
			islogin.value = false
			//PhoneNumber.value = ''
		}
	})
	
	
	function username() {
		if(userInfo.phoneNumber){
			return userInfo.phoneNumber
		}else if(userInfo.nickName){
			return userInfo.nickName
		}else if(userInfo.name){
			return userInfo.name
		}
		return '微信用户'
	}
	
	//页面跳转
	function topage(url:string){
		uni.navigateTo({
			url
		})
	}
	
	function wdltip() {
		uni.showToast({
			title:'请您先登录',
			icon:'none'
		})
	}

	//客服热线
	function kefu(){
		uni.makePhoneCall({
			phoneNumber: '400-888-12345'	//示例
		})
	}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.top{
		box-sizing: border-box;
		padding-bottom: 30rpx;
		// width: 750rpx;
		// height: 450rpx;
		//display: flex;
		//height: 400rpx;
		// padding:200rpx 25rpx 50rpx;
		// align-items: center;
		// justify-content: space-between;

		//background:linear-gradient(to bottom, #00aa7f , #fff);
		.bjtp{
			width: 750rpx;
			height: 450rpx;
		}
		.userinfor{
			position: relative;
			display: flex;
			margin: -80rpx 20rpx 20rpx;
			padding: 20rpx 25rpx;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
			.toux{
				display: flex;
				align-items: center;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				view{
					padding-left: 10rpx;
					//font-size: 40rpx;
					//font-weight: bold;
					//color: #005500;
				}
			}
		}
		
	}
	.gncont{
		margin: 0 25rpx;
		border-radius: 20rpx;
		background: #fff;
		.gnrk{
			display: flex;
			box-sizing: border-box;
			padding: 30rpx;
			border-bottom: 1px solid #f4f4f4;
			justify-content: space-between;
			
			>view:first-child{
				display: flex;
				align-items:center;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.cdrk{
		display: flex;
		justify-content: space-between;
		margin: 10rpx 30rpx 30rpx;
		// padding: 20rpx;
		// border-radius: 20rpx;
		flex-wrap: wrap;
		
		>view{
			box-sizing: border-box;
			width: 22%;
			//margin: 25rpx;
			//padding: 25rpx;
			
			//margin-bottom: 50rpx;
			text-align: center;
			background: #ccc;
			//box-shadow: 0 0 20px 2px rgba(221, 221, 221, 0.8);
			image{
				width: 70rpx;
				height: 70rpx;
			}
			view{
				padding-top: 10rpx;
			}
		}
	}
	.niche{
		width: 240rpx;
		padding-left: 20rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		text-align: left;
		font-size: 36rpx;
		color: #003829;
	}
	.btn{
		width: 150rpx;
		height:64rpx;
		background: #00aa7f;
		text-align:center;
		color:#fff;
		border-radius:10rpx;
		line-height: 64rpx;
		background: #5ac725;
	}
</style>