<template>
	<el-card shadow="never" header="个人信息">
		<el-form ref="form" :model="account" label-width="120px" style="margin-top:20px;">
			<el-form-item v-if="name" label="账号主体" prop="name">
				<el-input v-model="name" disabled></el-input>
			</el-form-item>
			<el-form-item label="账号" prop="username">
				<el-input v-model="account.username" disabled></el-input>
				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
			</el-form-item>
			<el-form-item label="头像" prop="avatar">
				<pi-upload v-model="account.avatar" title="头像" :cropper="true" :compress="1" :aspectRatio="1/1"></pi-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
export default {
	data() {
		return {
			account: {
				username: "",
				avatar: ""
			},
			name: ""
		}
	},
	mounted() {
		this.account = this.$TOOLS.data.get("USER_INFO")
		this.name = this.account.sub.name ?? ""
	},
	methods: {
		async save() {
			const res = await this.$API.auth.infoSave({avatar: this.account.avatar})
			this.$message.success(res.msg)
			this.$TOOLS.data.set("USER_INFO", this.account)
		}
	}
}
</script>

<style>
</style>
