<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">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					  <u-image class="avatar" width="100" height="100" :src="avatarUrl||'/static/def_personal_avatar.png'"></u-image>
					</button> 
					<view style="font-size: 0.8rem;text-align: center;"><text v-if="!avatarUrl">点击头像修改</text></view>
                </view>
			</view>
			<view class="list-item border-bottom">
				<view class="list-item-left">
					<text>姓名</text>
				</view>
			    <view class="list-item-right">
					<text>{{userInfo.userNameCN}}</text>
			    </view>
			</view>
			<view class="list-item border-bottom">
				<view class="list-item-left">
					<text>手机号</text>
				</view>
			    <view class="list-item-right">
			    	<text>{{userInfo.mobile}}</text>
			    </view>
			</view>
			<view class="list-item border-bottom">
				<view class="list-item-left">
					<text>门店名称</text>
				</view>
			    <view class="list-item-right">
					<text>{{userInfo.orgName}}</text>
			    </view>
			</view>
			<view class="list-item margin-bot" v-if="shelfInfo">
				<view class="list-item-left">
					<text>汽配经销商</text>
				</view>
			    <view class="list-item-right">
			    	<text>{{shelfInfo.dealerName}}</text>
			    </view>
			</view>
		</view>
		<view class="bottom-cont" style="color: dodgerblue;" @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 {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        components: {
			uniPopup,uniPopupDialog
        },
        data() {
            return {
				title:'',
				avatarUrl:""
            }
        },
		onShow() {
			//检测是否登录
			this.$store.dispatch('checkLogin')
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			shelfInfo(){
				return this.$store.state.vuex_storeShelf
			},
		},
        methods: {
		  onChooseAvatar(e) {
			const { avatarUrl } = e.detail 
			this.avatarUrl = avatarUrl
		  },
          loginOut(){
			  this.$refs.openModal.open()
		  },
		  onOk(){
			this.$refs.openModal.close()
			this.$store.dispatch('userLogout');
			setTimeout(function(){
				  uni.redirectTo({
					  url: '/pages/login/login'
				  });
			},300)
		  }
        },
		onLoad() {
		},
        onReady() {
            
        }
    }
</script>

<style lang="less" scoped>
	.content{
		padding: 0;
		background: rgb(245,245,245);
		.avatar-wrapper{
			width:100rpx;
			height:100rpx;
			background: none;
			padding: 0;
			border-radius: 100%;
			&::after{
				border:1px solid #eee;
			}
		}
	}
	
	.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;
				.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>
