<template>
    <view class="content">
       
		<view class="list-container">
			<view class="list-item margin-bot">
				<view class="list-item-left">
			 		<text>头像</text>
				</view>
                <view class="list-item-right">
					<open-data class="user-photo" type="userAvatarUrl"></open-data>
					<!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> -->
                </view>
			</view>
			<view class="list-item border-bottom">
				<view class="list-item-left">
					<text>名称</text>
				</view>
			    <view class="list-item-right">
					<open-data type="userNickName"></open-data>
					<!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> -->
			    </view>
			</view>
			
			<view class="list-item margin-bot">
				<view class="list-item-left">
					<text>性别</text>
				</view>
			    <view class="list-item-right">
			    	<open-data type="userGender" lang="zh_CN"></open-data>
					<!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> -->
			    </view>
			</view>
			
			<view class="list-item ">
				<view class="list-item-left">
					<text>联系电话</text>
				</view>
			    <view class="list-item-right">
			    	<text>{{userInfo.mobile}}</text>
					<!-- <u-icon class="back-img" name="arrow-right" color="#9DA8B5"></u-icon> -->
			    </view>
			</view>
		</view>
		<view class="bottom-cont" @click="loginOut">
			退出登录
		</view>
		<uni-popup ref="openModal" type="center">
			<uni-popup-dialog content="确定退出登录吗?" @confirm="onOk" :title="title"></uni-popup-dialog>
		</uni-popup>
    </view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
    import service from '../../service.js';
	import mIcon from '../../components/m-icon/m-icon.vue'
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        components: {
			mIcon,uniPopup,uniPopupDialog
        },
        data() {
            return {
				userInfo:'',
				title:'',
            }
        },
		onShow() {
			//检测是否登录
			this.$store.dispatch('checkLogin')
		},
		computed: {
			...mapState(['hasLogin'])
		},
        methods: {
          loginOut(){
			  this.$refs.openModal.open()
			  // this.$store.dispatch('userLogout');
			  // setTimeout(function(){
				 //  uni.redirectTo({
				 //      url: '/pages/login/login'
				 //  });
			  // },300)
		  },
		  onOk(){
			this.$refs.openModal.close()
			this.$store.dispatch('userLogout');
			setTimeout(function(){
				  uni.redirectTo({
					  url: '/pages/login/login'
				  });
			},300)
		  }
        },
		onLoad() {
			let UserInfo = uni.getStorageSync('userInfo');
			this.userInfo = UserInfo;
			console.log(UserInfo,"UserInfo")
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
        onReady() {
            
        }
    }
</script>

<style lang="less" scoped>
	.content{
		padding: 0;
		background: rgb(245,245,245);
	}
	
	.list-container{
		width: 100%;
		box-sizing:border-box;
		.border-bottom{
			padding-left: 32rpx;
			border-bottom: 1px solid #E5E5E5;
		}
		.margin-bot{
			margin-bottom: 20rpx;
		}
		.list-item{
			width: 100%;
			background-color: #fff;
			display: flex;
			padding: 30rpx 32rpx;
			justify-content: space-between;
			align-items:center;
			// border-bottom: 1px solid #E5E5E5;
			.user-photo{
				display: block;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.list-item-left{
				font-size: 36rpx;
				color: #191919;
			}
			.list-item-right{
				font-size: 36rpx;
				color: #666666;
				display: flex;
				align-items: center;
				.back-img{
					width: 18rpx;
					height: 34rpx;
					margin-left: 20rpx;
				}
			}
			
		}
	}
	.bottom-cont{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		height: 110rpx;
		font-size: 36rpx;
		color: #999999;
		text-align: center;
		line-height: 110rpx;
	}
		
</style>