<template>
	<view class="main pdt0">
		<view class="form">
			<view class="form_group">
				<view class="lable re" style="margin-top: 19px">头像</view>
				<image :src="user.avatar ? ip + user.avatar : '../../static/head.png'" class="head" @click="choice()"></image>
			</view>
			<view class="form_group">
				<view class="lable re">姓名</view>
				<input v-model="user.nickName" placeholder="请输入姓名" />
			</view>
			<view class="form_group">
				<view class="lable">科室</view>
				<view class="desc">{{ user.dept.deptName }}</view>
			</view>
			<view class="form_group">
				<view class="lable">角色</view>
				<view class="desc" v-if="user.roles.length > 0">{{ user.roles[0].roleName }}</view>
			</view>
			<view class="form_group">
				<view class="lable re">个人介绍</view>
			</view>
			<leditor ref="editor" v-model="user.introduce"></leditor>
		</view>
		<button class="btn" @click="save()">
			<text class="icon">&#xe653;</text>
			<text>确认修改</text>
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.http.ip,
			user: this.getUser()
		};
	},
	onLoad() {
		setTimeout(() => {
			this.$refs.editor.setContents();
		}, 300);
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', (path) => {
			uni.showLoading({ title: '正在上传...', mask: true });
			// 上传到服务端
			uni.uploadFile({
				url: this.ip + '/system/user/profile/avatar',
				filePath: path,
				name: 'avatarfile',
				header: { Authorization: this.getUser().token },
				contentType: 'application/x-www-form-urlencoded',
				success: (res) => {
					let r = JSON.parse(res.data);
					if (r.code === 200) {
						uni.showToast({ title: '更新成功' });
						this.user.avatar = r.imgUrl;
						let user = this.getUser();
						user.avatar = this.user.avatar;
						uni.setStorageSync('user', user);
						this.$forceUpdate();
					} else {
						uni.hideLoading();
						uni.showModal({ content: r.msg, showCancel: false });
					}
				}
			});
		});
	},
	methods: {
		choice() {
			uni.navigateTo({
				url: '/components/u-avatar-cropper/u-avatar-cropper?destWidth=100&rectWidth=140&fileType=jpg'
			});
		},
		save() {
			let rule = [
				{ name: 'avatar', checkType: 'notnull', errorMsg: '请上传头像' },
				{ name: 'nickName', checkType: 'notnull', errorMsg: '请输入姓名' },
				{ name: 'introduce', checkType: 'editor', errorMsg: '请输入个人介绍' }
			];
			if (!this.verify.check(this.user, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/system/user/editInfo',
				data: { nickName: this.user.nickName, introduce: this.user.introduce },
				method: 'POST',
				success: (res) => {
					let user = this.getUser();
					user.nickName = this.user.nickName;
					user.introduce = this.user.introduce;
					uni.setStorageSync('user', user);
					uni.showToast({ title: '编辑成功' });
				}
			});
		}
	}
};
</script>

<style lang="scss">
.form {
	.head {
		width: 40px;
		height: 60px;
		border-radius: 3px;
		float: right;
	}
	input {
		padding: 4px 0px 0px 3px;
	}
}
</style>