<template>
	<view class="oneSetting">
		<!-- 资料 设置 -->
		<view class="tel_index_bg"></view>
		<view class="vio_list">
			<view class="msg_box ">
				<view class="content-head-wrap flex">
					<view class="content-head-img">
						<!-- <image :src="imgUrl" mode="aspectFill"></image> -->
						<avatar selWidth="250rpx" selHeight="250rpx" @upload="myUpload" 
							:avatarSrc="userdata.img?$service.getimg(userdata.img):imgUrl"
							avatarStyle="width: 164rpx;height: 164rpx;border-radius: 50%;" inner=true></avatar>
					</view>
				</view>
				<view class="content-item flex">
					<view>
						姓名
					</view>
					<view class="user-name">
						{{userdata.name}}
					</view>
				</view>
				<view class="content-item flex">
					<view>
						性别
					</view>
					<view class="user-name">
						<!-- 性别 1、男 2、女 -->
						{{userdata.sex==1?'男':'女'}}
					</view>
				</view>
				<view  class="content-item flex">
					<view>
						学号
					</view>
					<view class="user-name">
						{{userdata.study_code}}
					</view>
				</view>
				<view class="sign-out" @click="logout_fuc">
					退出登录
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				imgUrl: '/static/images/tx.png',
				userName: "学员01",
				gender: "男",
				studentNum: "ZZ202012058",
				identity:0,
				userdata:{
					img:''
				}
			}
		},
		onLoad(option) {
			that=this
			console.log(option);
			this.identity=uni.getStorageSync('identity')
			this.userdata=this.userDatas
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime', 'userDatas']),
		},
		methods: {
			// 更新头像
			myUpload(rsp) {
				var avatar = rsp.path
				// console.log(avatar)
				// Vue.set(that.userdata,'head_portrait',avatar)
				// return
				this.$service.wx_upload(avatar).then(res => {
							
					that.btn_kg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(that.userdata)
						Vue.set(that.userdata,'img',datas)
						that.setmsg()
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "上传失败"
							})
						}
					}
				}).catch(e => {
					that.btn_kg = 0
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '操作失败'
					})
				})
			},
			setmsg(){
				var datas = {
					img:that.userdata.img
				}
				var jkurl = '/my/save'
							
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
							
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						
					} else {
							
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			getimg(img){
				return this.$service.getimg(img)
			},
			logout_fuc(){
				uni.removeStorageSync('token')
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oneSetting {
		position: relative;
	}
	.tel_index_bg {
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		min-height: 220rpx;
		background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
	}
	.vio_list{
		width: 100%;
		padding: 0 30rpx 30rpx;
		position: relative;
		z-index: 2;
		// .main_list{
		// 	margin-top: 20rpx;
		// 	background: #FFFFFF;
		// 	border-radius: 10rpx;
		// 	padding:0 30rpx;
		// }
		
	}
	.msg_box {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		

		.content-head-wrap {
			width: 100%;
			height: 340rpx;
			justify-content: center;
			align-items: center;
			border-bottom: #eeeeee 1px solid;

			.content-head-img {
				width: 164rpx;
				height: 164rpx;
				border-radius: 50%;

				image {
					width: 164rpx;
					height: 164rpx;
					border-radius: 50%;
				}
			}
		}

		.content-item {
			width: 100%;
			height: 90rpx;
			border-bottom: #eeeeee 1px solid;
			padding: 0 28rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5B6476;

			.user-name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A9B1C0;
			}
		}
		.sign-out{
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2D81FF;
		}
	}
</style>