<template>
	<el-card shadow="never" header="账户信息">
		<el-form ref="form" :model="form" :rules="rules" label-width="90px" style="margin-top:10px;width: 480px;">
			<el-form-item label="" prop="avatar">
				<ossImgUpload @parentParams="parentParams" :url="this.$store.state.global.login_avatar" />
			</el-form-item>
			<el-form-item label="账号" prop="user">
				<el-input v-model="form.user" disabled></el-input>
				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
			</el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="mobile">
				<el-input v-model="form.mobile"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="verify_code">
				<div class="login-msg-yzm">
					<el-input v-model="form.verify_code" clearable placeholder="请输入验证码"></el-input>
					<el-button style="margin-left:10px;" @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{ time }})</span></el-button>
				</div>
			</el-form-item>
			<el-form-item label="邮箱地址" prop="email">
				<el-input v-model="form.email" disabled></el-input>
			</el-form-item>
			<el-form-item label="个性签名" prop="about">
				<el-input v-model="form.about" type="textarea"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
const {verifyPhone} = require("@/utils/verificate");
export default {
	data() {
		return {
			disabled:false,
			time:0,
			userRole:[],

			form: {
				id: "",
				avatar:this.$store.state.global.login_avatar,
				name: this.$store.state.global.login_name,
				login_name: '',
				user: "",
				mobile: "",
				email: "",
				about: "正所谓富贵险中求",
			},
			rules: {
				name: [
					{required: true, message: '请输入姓名'}
				],
				mobile: [
					{required: true, message: '请输入手机号'},
					{validator: verifyPhone, trigger: 'blur'}
				],
				verify_code:[
					{required: true, message: '请输入验证码'}
				]
			}
		}
	},
	mounted() {
		this.getInfo();
	},
	methods:{
		// 图片上传成功回调
		async parentParams(files) {
			let params = {
				avatar:files
			}
			const res = await this.$API.user.uploadAvatar.post(params);
			if (res.code == 200) {
				this.$store.commit("SET_LOGIN_AVATAR", files);
			}
		},
		async getInfo() {
			const res = await this.$API.user.getInformation.post();
			if(res.code == 200){
				const userInfo = JSON.parse(JSON.stringify(this.$TOOL.data.get('USER_INFO')));
				this.form.user = userInfo.login_name;
				this.userRole = userInfo.user_roles && userInfo.user_roles.role_names.length>0?userInfo.user_roles.role_names:[];

				this.$store.commit("SET_LOGIN_AVATAR", res.data.avatar);
				this.$store.commit("SET_LOGIN_NAME", res.data.name);

				Object.assign(this.form,res.data);
				Object.assign(userInfo,res.data);

				this.$TOOL.data.set('USER_INFO',userInfo);
			}
		},
		async getYzm() {
			const validate = await this.$refs.form.validateField("mobile").catch(() => {});
			if (!validate) {
				return false
			}
			const res = await this.$API.user.verifyCode.post({mobile: this.form.mobile});
			if (res.code === 200) {
				this.$message.success('短信已发送至手机号码');
				this.disabled = true
				this.time = 60
				const t = setInterval(() => {
					this.time -= 1
					if (this.time < 1) {
						clearInterval(t)
						this.disabled = false
						this.time = 0
					}
				}, 1000);
			}
		},
		save() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					const res = await this.$API.user.editUser.post(this.form)
					if (res.code === 200) {
						this.$message.success("操作成功");
						await this.getInfo();
					}
				} else {
					return false
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.login-msg-yzm{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
