<template>
	<view class="user-content">
		<!-- 头部 -->
		<view class="user-head">
			<view class="user-photo">
				<open-data type="userAvatarUrl" class="avatar"></open-data>
			</view>
			<view class="user-info">
				<text class="user-name">{{userInfoData.parentOrgName}}</text>
				<text class="user-phone">{{userInfoData.userNameCN || ''}}  {{userInfoData.username || ''}}</text>
			</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 icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="1" @click="toPage" title="关于我们"></u-cell-item>
				<u-cell-item icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="2" @click="toPage" title="修改密码"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 退出 -->
		<view class="user-btn">
			<u-button type="success" hover-class="none" :custom-style="quitButton" @click="quitSys" shape="circle">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	import {logout} from '@/api/login.js'
	import { getUserInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				quitButton: {
					borderRadius:'100rpx',
					fontSize:'30rpx',
					background: '#ff4546'
				},
				userInfoData: null,  //  用户信息
				userAvatarUrl: ''  //  用户头像
			};
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
		},
		methods:{
			//  获取用户信息
			getUserInfo(){
				this.userInfoData = this.$store.state.vuex_userData
				// getUserInfo().then(res => {
				// 	if(res.status == 200){
				// 		this.userInfoData = res.data
				// 	}else{
				// 		this.userInfoData = null
				// 	}
				// })
			},
			// 打开对应的页面
			toPage(index){
				let pageUrl=[
					'/pages/agreement/agreement?fromPage=usercenter',
					'/pages/userCenter/aboutUs',
					'/pages/userCenter/changePwd'
					]
				uni.navigateTo({
					url: pageUrl[index]
				})
			},
			// 退出登录
			quitSys(){
				let _this = this
				uni.showModal({
				  title: '提示',
				  content: '您确定要退出登录吗?',
				  success(ret) {
				    if (ret.confirm) {
						console.log(111)
						_this.logoutFun()
				    }
				  }
				})
			},
			logoutFun(){
				const _this = this
				logout({}).then(res => {
					console.log(222)
				 getApp().globalData.token = ''
				 _this.$u.vuex('vuex_token','')
				 _this.$u.vuex('vuex_userData','')
				 // 关闭socket
				 // _this.$store.commit("$closeWebsocket")
				  uni.reLaunch({
				  	url: '/pages/login/login'
				  })
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-content{
		width: 100%;
		.user-head{
			background: #ff4546;
			display: flex;
			align-items: center;
			padding: 55rpx 55rpx;
			.user-photo{
				flex-shrink: 0;
				margin-right: 5rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
				.user-name{
					display: block;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}
				.user-phone{
					display: block;
					font-size: 26rpx;
				}
			}
		}
		.user-list{
			border-radius: 15upx;
			margin: 20upx;
			overflow: hidden;
			box-shadow: 0upx 3upx 6upx #eee;
		}
		.user-btn{
			padding: 85rpx 200rpx;
		}
	}
</style>
