<template>
	<view class="user-content">
		<!-- 头部 -->
		<view class="user-head" >
			<view>
				<open-data type="userAvatarUrl" class="user-photo"></open-data>
				<u-image v-show="!hasLogin" src="/static/logo.png" width="100" height="100"></u-image>
			</view>
			<view class="user-info">
				<view v-if="hasLogin" class="user-info-item">{{userData.stationName || ''}}</view>
				<view v-if="hasLogin" class="user-info-item">{{userData.gatherName||''}} {{userData.gatherPhone || ''}}</view>
				<u-button v-else="!hasLogin" plain size="mini" shape="circle" @click="toLoginPage">立即登录</u-button>
			</view>
		</view>
		<!-- 列表 -->
		<view class="user-list">
			<u-cell-group>
				<u-cell-item icon="file-text" icon-size="40" :icon-style="{color:'#ffaa00'}" index="0" @click="toPage" title="服务协议及隐私政策"></u-cell-item>
				<u-cell-item  v-if="hasLogin" icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="1" @click="toPage" title="修改密码"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="user-list quit">
			<u-cell-group>
				<u-cell-item  v-if="hasLogin" icon="minus-circle" icon-size="40" index="3" @click="quitSys" title="退出登录"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import { checkLogin, getUserInfo, logout } from '@/api/login.js'
	export default {
		data() {
			return {
				hasLogin: false,
				userData: {},
			};
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin = res.status == 200
				console.log(this.hasLogin,res,'this.hasLogin')
				if(this.hasLogin){
					this.getUserInfo()
				}else{
					// uni.navigateTo({
					// 	url:"/pages/login/login"
					// })
				}
			})
		},
		computed: {
			user() {
				return this.userData 
			}
		},
		onLoad() {
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods:{
			// 获取用户信息
			getUserInfo(){
				getUserInfo().then(res => {
					console.log(res,'getUserInfo')
					if(res.status == 200){
						this.$u.vuex("vuex_userData",res.data)
						this.userData = res.data
						console.log(this.userData,'-----用户信息')
					}
				})
			},
			// 打开对应的页面
			toPage(index){
				console.log(index)
				let pageUrl=[
					'/pages/agreement/agreement?fromPage=usercenter',
					'/pages/userCenter/changePwd',
					]
				uni.navigateTo({
					url: pageUrl[index]
				})
			},
			// 退出登录
			quitSys(){
				let _this = this
				uni.showModal({
				  title: '提示',
				  content: '您确定要退出登录吗?',
				  success(res) {
				    if (res.confirm) {
				      logout().then(res => {
					   console.log(res,'logout')
				       getApp().globalData.token = ''
				       _this.$u.vuex('vuex_token','')
					   // 关闭socket
				        uni.reLaunch({
				        	url: '/pages/login/login'
				        })
				      })
				    }
				  }
				})
			},
			
			toLoginPage(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-content{
		width: 100%;
		.user-head{
			background: #0DC55F;
			display: flex;
			align-items: center;
			padding: 35rpx 55rpx;
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
				.user-info-item{
					margin: 10rpx 0;
					:first-child{
						font-size: 34upx;
					}
				}
			}
			.user-photo{
				display: block;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.my-ledou{
			background: #FFFFFF;
			border-radius: 15upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx;
			margin: 20upx;
			box-shadow: 0upx 3upx 6upx #eee;
			.user-jifen{
				display: flex;
				align-items: center;
				text{
					font-size: 40upx;
					font-weight: bold;
					color: red;
				}
				>view{
					&:first-child{
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.user-list{
			border-radius: 15upx;
			margin: 20upx;
			overflow: hidden;
			box-shadow: 0upx 3upx 6upx #eee;
			.quit{
				margin-top: 20upx;
			}
		}
		.user-btn{
			padding: 85rpx 200rpx;
		}
	}
</style>
