<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="quitOut">
			退出登录
		</view>
    </view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {saveHeadImage } from '@/api/employee'
	const baseUrl = getApp().globalData.baseUrl
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        components: {
			uniPopup,
			uniPopupDialog
        },
        data() {
            return {
				title:'',
				avatarUrl:"",
				userInfo: null
            }
        },
		computed: {
			...mapState(['hasLogin']),
			shelfInfo(){
				return this.$store.state.vuex_storeShelf
			},
		},
		onShow() {
			this.avatarUrl = this.$store.state.vuex_userPhoto || uni.getStorageSync('userPhoto');
			this.userInfo = this.$store.state.vuex_userInfo
		},
        methods: {
		  onChooseAvatar(e) {
			const _this = this
			const { avatarUrl } = e.detail 
			uni.uploadFile({
				url: baseUrl + 'upload',
				filePath: avatarUrl,
				name: 'file',
				success: (uploadFileRes) => {
					const ret = JSON.parse(uploadFileRes.data)
					console.log(ret,'uploadFileRes')
					if(ret.status == 200){
						_this.avatarUrl = ret.data
						_this.$store.state.vuex_userPhoto = ret.data
						uni.setStorageSync('userPhoto', ret.data);
						saveHeadImage({photo: ret.data}).then(res => {
							if(res.status == 200){
								uni.showToast({
									icon: "none",
									title: "修改头像成功"
								})
							}
						})
					}else{
						uni.showToast({
							icon: "none",
							title: "修改头像失败，请重试"
						})
					}
				}
			});
		  },
          quitOut(){
          	let _this = this
          	uni.showModal({
          		title: '提示',
          		content: '确定退出登录吗？',
          		success: (ret) => {
          		  if(ret.confirm){
          			  _this.$store.dispatch('userLogout');
          			  uni.redirectTo({
          			  	 url: '/pages/login/login'
          			  });
          		  }
          		}
          	})
          }
        },
    }
</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>
