<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :is-back="false" title=" " :background="{ background: '#ffffff'  }" :border-bottom="false"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<u-cell-group>
			<u-cell-item :arrow="false" title="头像" :title-style="{ marginLeft: '10rpx' }">
				<u-upload :showUploadList="false" style="display: inline;" :custom-btn="true" :width='300' :height='300' @on-uploaded="onUploaded" :action="action">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-avatar mode="square" :src="userData.user.avatar" size="140"></u-avatar>
					</view>
				</u-upload>
			</u-cell-item>
			<u-cell-item :arrow="false" title="名字" @tap="linkTo(userData.user.realname,0)" :value="userData.user.realname" :title-style="{ marginLeft: '10rpx' }">
			</u-cell-item>
			<u-cell-item title="用户名" :arrow="false" :value="userData.user.username" :title-style="{ marginLeft: '10rpx' }">
			</u-cell-item>
			<u-cell-item @tap="linkToQrcode" title="二维码" :title-style="{ marginLeft: '10rpx' }">
				<u-icon :name="src1" size="40" :color="$u.color['lightColor']"></u-icon>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src1:'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/qr_code.png',
				action:this.$uploadUrl,
				filesArr: [],
				groupList: [
					/*{ title: '新消息通知', color: '#409eff', icon: 'star' },*/
					/*{ title: '隐私', color: '#409eff', icon: 'photo' },*/
					/*{ title: '帮助与反馈', color: '#ff9900', icon: 'heart' }*/
                    { title: '通用', color: '#409eff', icon: 'coupon' }
				],
				$url:''
			}
		},
		onShow() {
			console.log(this.userData)
		},
		methods: {
			onUploaded(lists) {
				this.filesArr = lists;
				let res = lists[0];
				if(res.response===undefined){
					uni.showToast({
						title:'文件错误',
						icon:'none'
					})
				}
				var that = this
				this.$socket.updateAvatar(this.userData.user.operId, that.$url + res.response.data, res => {
					console.log("res",res)
					that.userData.user.avatar = res.user.avatar			
					that.$u.vuex("userData",that.userData)
					uni.showToast({
						title: '更换成功',
						duration: 1000,
					});
					setTimeout(()=>{uni.navigateBack({})},1000);
				})
			},
			linkToQrcode(){
				this.$u.route({
					url: 'pageB/qrcode/qrcode'
				});
			},
			linkTo( context, type){
				this.$u.route({
					url: 'pageC/chat/updateGroupInfo',
					params: { context, type }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-btn {
		width: 626rpx;
		    height: 140rpx;
		    border-radius: 10rpx;
		    text-align: right;
	}
	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>
