<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<div class="wrap">
				<el-form :model="form" style="width: 500px;">
					
					<el-form-item label="头像" :label-width="formLabelWidth">
						<el-upload
						  class="avatar-uploader"
						  action="http://www.pingguozhushou.shop/api/common/upload"
						  :show-file-list="false"
						  :headers="token"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="form.avatar" :src="form.avatar" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="ID" :label-width="formLabelWidth">
						<el-input v-model="form.id" type="text" disabled
							 width="300px"></el-input>
					</el-form-item>
					<el-form-item label="账号" :label-width="formLabelWidth">
						<el-input v-model="form.username" type="text" disabled
							 width="300px"></el-input>
					</el-form-item>
					<el-form-item label="昵称" :label-width="formLabelWidth">
						<el-input v-model="form.nickname" type="text" 
							placeholder="请输入昵称" width="300px"></el-input>
					</el-form-item>
				</el-form>
				<div class="dialog-footer">
					<!-- <el-button @click="dialogTableVisible = false">取 消</el-button> -->
					<el-button type="primary" @click="setInfo">确 定</el-button>
				</div>
			</div>


		</el-card>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		setTransaction,
	} from '@/request/agent.js'
	
	import {
		setUserInfo,
		getUserInfo
	} from '@/request/user.js'
	export default {
		name: 'Order',
		data() {
			return {
				token: {},
				formLabelWidth: '120px',
				form: {
					avatar: '',
					id: '',
					nickname: '',
					username: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				loading: false,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		created() {
			this.token['token'] = window.sessionStorage.getItem('token')
			this.form = {
				avatar: this.userInfo.avatar,
				id: this.userInfo.id,
				nickname: this.userInfo.nickname,
				username: this.userInfo.username
			}
			console.log(this.form,'this.form');
			console.log(window.sessionStorage.getItem('token'));
		},
		methods: {
			...mapMutations(['setUserInfo']),
			handleAvatarSuccess(res, file) {
				this.form.avatar = res.data.fullurl;
				console.log(this.form.avatar,'this.form.avatar');
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg/png';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// return isJPG && isLt2M;
				return true
			},
			handleAvatarError() {
				
			},
			openBuy() {
				this.dialogTableVisible = true
			},
			setInfo() {
				let that = this
				if(that.form.avatar == '') {
					return that.$msg.error('请选择头像')
				}
				if(that.form.nickname == '') {
					return that.$msg.error('请选择输入昵称')
				}
				setUserInfo({
					avatar: that.form.avatar,
					nickname: that.form.nickname
				}).then(res => {
					that.$msg.success('修改成功')
					getUserInfo().then(res => {
						that.setUserInfo(res.data)
					})
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
		},

	}
</script>

<style scoped>
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		width: 500px;
	}

	/deep/ .el-card__body {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 10px;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>