<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-coordinate"></i>
					<router-link :to="{path:'/partyList'}">
						<span class="top_dao"> User List Edit</span>
					</router-link>
					>> User Role
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div>
			<el-form ref="old_Form" :model="MessForm" :rules="rules" label-width="170px">
				<el-form-item label="Account :" prop="account">
					{{MessForm.account}}
				</el-form-item>
				<el-form-item label="Email :" prop="email">
					{{MessForm.email}}
				</el-form-item>
				<el-form-item label="English name :" prop="realname">
					<el-input v-model="MessForm.realname"></el-input>
					<br>
					<p class="zhujie_name">
						(Will be used for certificate, website, etc. in TMR Publishing Group Products.<br>
						Check
						<a href="https://www.tmrjournals.cn/afoor_text.html?&footer_id=50" target="_blank">Privacy
							Policy</a>)
					</p>
				</el-form-item>
				<el-form-item label="Local language name :" prop="localname">
					<el-input v-model="MessForm.localname"></el-input>
					<br>
					<p class="zhujie_name">
						(Just be used for view for users themselves and editors. <br>
						Check
						<a href="https://www.tmrjournals.cn/afoor_text.html?&footer_id=50" target="_blank">Privacy
							Policy</a>)
					</p>
				</el-form-item>
				<el-form-item>
					<span slot="label">
						WOS H index ({{this.now_year}}) :
					</span>
					<el-input v-model="MessForm.wos_index"></el-input>
				</el-form-item>
				<el-form-item>
					<span slot="label">
						Google H index ({{this.now_year}}) :
					</span>
					<el-input v-model="MessForm.google_index"></el-input>
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="saveMessage(MessForm)">OK</el-button>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				mediaUrl: this.Common.mediaUrl,
				role_id: this.$route.query.id,
				MessForm: {
					wos_index: '',
					google_index: '',
				},
				now_year: 0,
				rules: {
					role_type: [{
						required: true,
						message: 'Please select a role',
						trigger: 'blur'
					}],
					issn_id: [{
						required: true,
						message: 'Please select a journal',
						trigger: 'blur'
					}],
					special_id: [{
						required: true,
						message: 'Please select a guest',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}],
				}
			};
		},
		mounted() {

		},
		created() {
			this.getDate()
		},
		methods: {
			// 获取数据
			getDate() {
				this.now_year = new Date().getFullYear()
				this.$api
					.post('api/User/getUserDetail', {
						'user_id': this.role_id
					})
					.then(res => {
						if (res.code == 0) {
							this.MessForm = res.data.user;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 保存个人信息
			saveMessage() {
				this.$api
					.post('api/User/editUserMsg', this.MessForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Successfully modified personal information');
							this.messageVisible = false
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style scoped>
	.top_dao:hover {
		text-decoration: underline;
		cursor: pointer;
	}


	.zhujie_name {
		font-size: 12px;
		line-height: 20px;
		margin-top: 6px;
		color: #999;
	}

	.zhujie_name a {
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.zhujie_name a:hover {
		text-decoration: underline;
	}
</style>
