<template>
	<view class="userPage">
		<view class="userTop">
			<view class="topbg">
				<image src="../static/usercenter/bg.png" mode="aspectFill"></image>
			</view>
			
			<view class="userTop-content" v-if="loginShow">
				<view class="avatar" @click="goEndit">
					<image :src="userMsg.avatarUrl" mode="aspectFill" v-if="userMsg.avatarUrl"></image>
					<image src="/static/bghesd.png" mode="aspectFill" v-else></image>
				</view>
				<view class="userinfo" v-if="userMsg.nickName">
					<view class="getnewname">
						<text>{{userMsg.nickName}}</text>
						<text class="getnew" @click="getUserProfile()">刷新</text>
					</view>
					<view class="phonenumber">
						{{phone}}
					</view>
				</view>
				<view class="userinfo" v-if="!userMsg.nickName" @click="getUserProfile()">
					<text>点击获取头像昵称</text>
				</view>
			</view>
			
			<view class="login" v-if="!loginShow">
				<view class="">
					日月峡森林康养旅行
				</view>
				<view class="btn" @click="gologin">
					登录
				</view>
			</view>
		</view>
		
		<view class="userOrder">
			<view class="flex-item" @click="goOrder()">
			    <image mode="aspectFit" src="../static/usercenter/Tobepaid.png" style="width: 45%;margin-bottom: -5px;"></image>
			         <view>待付款</view>
			</view>
			<view class="line">
				
			</view>
			<view class="flex-item" @click="goOrder()">
			    <image mode="aspectFit" src="../static/usercenter/Aftersales.png" style="width: 45%;margin-bottom: -5px;"></image>
			        <view>已付款</view>
			</view>
			<view class="line">
				
			</view>
			<view class="flex-item" @click="goOrder">
			    <image mode="aspectFit" src="../static/usercenter/Tobepaid1.png" style="width: 45%;margin-bottom: -5px;"></image>
			     <view>已完成</view>
			</view>
			<view class="line">
				
			</view>
		    <view  class="flex-item " @click="goOrder">
		        <image mode="aspectFit" src="../static/usercenter/all.png" style="width: 45%;margin-bottom: -5px;"></image>
		             <view>全部订单</view>
		    </view>
		    
		    
		   
		</view>
		<view class="" style="background-color: #FFFFFF; margin: 0 30rpx;border-radius: 8rpx;">
			<u-cell-group :border="false" >
				<u-cell title="出行人" isLink size="large" :border="false" @click="goaddpeople"></u-cell>
				<u-cell title="发票" isLink size="large" :border="false" @click="goinvoice"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="" style="background-color: #FFFFFF; margin: 20rpx 30rpx;border-radius: 8rpx 8rpx 8rpx 56rpx;">
		    <u-cell-group :border="false">
	            <u-cell title="客服" size="large" isLink :border="false"  @click="gomes"></u-cell>
			    <u-cell title="关于日月峡" size="large" isLink :border="false"  @click="goaboutus"></u-cell>
		    </u-cell-group>
		</view>
		<view class="signout" @click="signout" v-if="loginShow">
			退出登录
		</view>
		<view class="kefuicon" >
			<button open-type="contact" type="default" style="background-color: transparent;border-style:none;border:0;" >
			<image src="../static/usercenter/service.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	let that
export default {
	data(){
		return{
			loginShow:this.$store.state.login,
			getuser:this.$store.state.getuser,
			userMsg:{},
			phone:''
		}
	},
	onLoad() {
		that=this
		this.init()
		
	},
	onShow() {
		this.init()
	},
	// watch:{
	// 	  "this.$store.state.token": {
	// 	      handler(newValue, oldValue) {
	// 	        console.log("单个属性监听", newValue, oldValue);
	// 	      }
	// 	    },
	// },
	methods: {
		init(){
			// this.loginShow=this.$store.state.login
			let token=uni.getStorageSync("token")
			// console.log(token)
			if(token){
				this.loginShow=true
			}
			let userMsg=uni.getStorageSync("userMsg")
			if(userMsg){
				this.userMsg=userMsg
			}
			let phone=uni.getStorageSync("phone")
			this.phone=phone
			// if(!token){
				
			// }
		},
		// 登录
		gologin(){
			uni.navigateTo({
				url:"/pages/login"
			})
		},
		// 跳转完善个人信息
		goEndit(){
			uni.navigateTo({
				url:"/pages/userCenter/userEdit"
			})
		},
		// 跳转订单列表
		goOrder(){
			uni.navigateTo({
				url:"/pages/order/order"
			})
		},
		//跳转出行人
		goaddpeople(){
			uni.navigateTo({
				url:"/pages/peopleList/peopleList?id=0"
			})
		},
		// 跳转发票
		goinvoice(){
			uni.navigateTo({
				url:"/pages/userCenter/invoice"
			})
		},
	// 客服
	gomes(){
		uni.navigateTo({
			url:"/pages/customerService"
		})
	},
		// 关于我们
		goaboutus(){
			uni.navigateTo({
				url:"/pages/userCenter/aboutus"
			})
		},
		// 获取用户头像
		 getUserProfile() {
		    var that = this;
		          wx.getUserProfile({
		            desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
		            success: (res) => {
						that.$toast("获取成功")
		              // that.userMsg = res.userInfo; //这个我有时候获取不到，所以没管它，但先写着
		              uni.setStorageSync("userMsg", res.userInfo);
					  that.init()
		              let setNowTime = Date.now() + 3600 * 1000 * 24 * 30;  
		              uni.setStorageSync("userInfoStorageTime", setNowTime);
		            },
		            fail: function (err) {
		              console.log(err);
		            },
		          });
		  },
		  // setUserInfoStorageTime() {
		  //     let nowTime = Date.now();
		  //     let oldTime = uni.getStorageSync("userInfoStorageTime");
		  //     let userInfo = uni.getStorageSync("userMsg");
		  //     if ( userInfo.nickName != undefined && userInfo.nickName != null && userInfo.nickName != "" ) {
		  //       if (oldTime && nowTime < oldTime) {
		  //         that.userMsg=userInfo
		  //         return;
		  //       } else {
		  //         that.getUserProfile();
		  //       }
		  //     } else {
		  //       that.getUserProfile();
		  //     }
		  //   },
		  // })
		// 退出登录
		signout(){
			uni.showModal({
				title:"提示",
				content:"是否退出？",
				success: (res) => {
					if(res.confirm){
						this.$toast("退出成功")
						uni.removeStorageSync('token')
						uni.removeStorageSync('code')
						uni.removeStorageSync('phone')
						uni.removeStorageSync('userMsg')
						this.userMsg={}
						this.$store.commit("setToken","")
						this.$store.commit('getUserInfo',{})
						this.$store.commit('loginState',null)
						this.loginShow=this.$store.state.login
						this.init()
					}
				}
			})
			
		},
		
	}
}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		position: relative;
	}
	.userPage{
		height: 100vh;
		position: relative;
		.userTop{
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 50rpx 30rpx 65rpx;
			.topbg{
				image{
					width: 100%;
					height: 288rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}
			}
			
			.userTop-content{
				display: flex;
				align-items: center;
			}
			.userinfo{
				
			}
			.getnewname{
				display: flex;
				align-items: center;
			}
			.getnew{
				font-size: 22rpx;
				display: block;
				margin-left: 40rpx;
				padding:5rpx 10rpx ;
				border: 1rpx solid #555555;
				border-radius: 8rpx;
			}
			.phonenumber{
				padding-top: 10rpx;
			}
			.avatar{
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				// background-color: pink;
				margin-right: 30rpx;
				border: 5rpx solid rgba(216, 227, 224, 0.5);
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.login{
				text-align: center;
			}
			.btn{
				width: 324rpx;
				height: 62rpx;
				line-height: 62rpx;
				background: #1E9F6A;
				border-radius: 8rpx 32rpx 8rpx 32rpx;
				color: #FFFFFF;
				margin: 40rpx auto;
			}
		}
		.userOrder {
			margin: 20rpx 30rpx;
			padding: 40rpx 0;
			border-radius: 8rpx 56rpx 8rpx 8rpx;
			background-color: #ffffff;
			display: flex;
			font-size: 22rpx;
			font-weight: bold;
			color: #141328;
			text-align: center;
			.flex-item{
				flex: 1;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.line{
				width: 1px;
				height: 48rpx;
				line-height: 48rpx;
				background: #141328;
				opacity: 0.29;
				margin: auto 0;
			}
		}
		.signout{
			margin: 46rpx auto 0;
		   padding: 24rpx 0;
			width: 438rpx;
			text-align: center;
			background: #E6E5E5;
			border-radius: 8rpx 56rpx 8rpx 56rpx;
			
		}
		
		.kefuicon{
			button::after {
					border: none;
				}
			position: absolute;
			right: 30rpx;
			bottom: 0;
			image{
				width: 136rpx;
				height: 136rpx;
			}
		}
	}
</style>
