<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> <span class="top_dao"> Personal Center</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<!-- 基本信息 -->
			<h2 class="infor_title" style="margin: 0 0 25px 0;">Essential Information</h2>
			<el-form :model="coreForm" :rules="rules" ref="core_Form" label-width="140px">
				<el-form-item label="Account :" prop="account">
					<span>{{coreForm.account}}</span>
				</el-form-item>
				<el-form-item label="Realname :" prop="realname">
					<el-input type="text" placeholder="Please enter..." v-model="coreForm.realname" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="Gender :" prop="gender">
					<el-radio-group v-model="coreForm.gender">
						<el-radio :label="1">Male</el-radio>
						<el-radio :label="2">Female</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="Change Password :">
					<el-button type="warning" @click="psw_word" plain>Change Password</el-button>
				</el-form-item>
				<el-form-item label="Phone :" prop="phone">
					<el-input type="text" placeholder="Please enter..." v-model="coreForm.phone" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="Email :" prop="email">
					<el-input type="text" placeholder="Please enter..." v-model="coreForm.email" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit_core(coreForm)">Modify and save</el-button>
				</el-form-item>
			</el-form>

			<!-- 审稿人信息 -->
			<div style="margin-top: 50px;" v-if="this.usercap.includes('reviewer')">
				<el-divider></el-divider>
				<h2 class="infor_title" style="	margin: 35px 0 25px 0;">As Reviewer Information</h2>
				<p style="margin: 0 0 30px 0;line-height:22px;font-size: 14px;">
					You are already the reviewer of the Journal of
					<b v-for="index in items_journal"> {{index.title}} ,</b><br>
					You can modify the following information.
				</p>
				<el-form :model="reviewForm" :rules="rules" ref="review_Form" label-width="140px">
					<el-form-item label="Title :" prop="title">
						<el-select v-model="reviewForm.title" filterable placeholder="Please select a title" value-key="groupID" style="width: 320px;">
							<el-option v-for="item in df_technical" :key="item.label" :label="item.label" :value="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Country :" prop="country">
						<el-select v-model="reviewForm.country" filterable placeholder="Please select a country" value-key="groupID"
						 style="width: 320px;">
							<el-option v-for="item in df_country" :label="item.en_name" :key="item.en_name" :value="item.en_name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Major :" prop="maj_cn">
						<el-cascader v-model="reviewForm.maj_cn" :options="jl_major" :props="defaultParams" placeholder="Please select major"
						 @change="ched_id" style="width: 440px;"></el-cascader>
					</el-form-item>
					<el-form-item label="Field :" prop="field">
						<el-input v-model="reviewForm.field" type="textarea" style="width: 600px;"></el-input>
					</el-form-item>
					<el-form-item label="Orcid :">
						<el-input v-model="reviewForm.orcid" style="width: 600px;"></el-input>
					</el-form-item>
					<el-form-item label="Introduction :">
						<el-input v-model="reviewForm.introduction" type="textarea" style="width: 600px;"></el-input>
					</el-form-item>
					<el-form-item label="Institution :">
						<el-input v-model="reviewForm.company" style="width: 600px;"></el-input>
					</el-form-item>
					<!-- 简历 -->
					<el-form-item label="CV. :" prop="Qualifications">
						<el-upload class="upload-demo" :action="baseUrl+'api/Reviewer/up_cv_file'" :on-success="handleFileSuccess1" name="reviewerCV"
						 type="reviewerCV" :on-error="handleFileError" :on-preview="handlePreview" :on-remove="handleRemove"
						 :before-remove="beforeRemove" :on-change="handleChange1" accept=".pdf" :on-exceed="handleExceed" :file-list="fileL_pdf1"
						 ref="upload">
							<el-button type="text" style="font-weight: bolder;"><b class="el-icon-lx-top" style="font-weight: bolder;"></b>upload</el-button>
						</el-upload>
						<span style="font-size: 12px; color: #aaa;">Only compressed files can be uploaded(.pdf)</span>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit_review(reviewForm)">Modify and save</el-button>
					</el-form-item>
				</el-form>

			</div>

		</div>

		<!-- 修改密码弹出框 -->
		<el-dialog title="Change Password" :visible.sync="pass_word" width="500px">
			<el-form :model="pwdform" :rules="rules" ref="pwd_form" label-width="160px">
				<el-form-item label="Old password :" prop="password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdform.password"></el-input>
				</el-form-item>
				<el-form-item label="New password :" prop="new_password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdform.new_password"></el-input>
				</el-form-item>
				<el-form-item label="Confirm password :" prop="re_password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdform.re_password"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pass_word = false">Cancel</el-button>
				<el-button type="primary" @click="save_pwd(pwdform)">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				user_id: localStorage.getItem('U_id'),
				username: localStorage.getItem('U_name'),
				userrole: localStorage.getItem('U_status'),
				usercap: localStorage.getItem('U_role'),
				coreForm: {
					account: localStorage.getItem("U_name"),
					gender: 1
				},
				pwdform: {
					account: localStorage.getItem("U_name"),
					password: '',
					new_password: '',
					re_password: ''
				},
				reviewForm: {

				},
				items_journal: [],
				jl_major: [],
				df_country: [],
				df_technical: [{
					label: 'Prof',
				}, {
					label: 'Associate Prof.',
				}, {
					label: 'Assistant Prof.',
				}, {
					label: 'Ph.D.',
				}, {
					label: 'Others',
				}],
				fileL_pdf1: [],
				defaultParams: {
					label: 'title',
					value: 'major_id',
					children: 'children'
				},
				pass_word: false,
				rules: {
					email: [{
						required: true,
						message: 'Please enter email',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
								callback(new Error("Please enter the correct email format"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					phone: [{
						required: true,
						message: 'Please enter phone',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^1[34578]\d{9}$/.test(value) == false) {
								callback(new Error("Please enter the correct phone format"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: 'Please enter old password',
						trigger: 'blur'
					}],
					new_password: [{
						required: true,
						message: 'Please enter new password ',
						trigger: 'blur'
					}],
					re_password: [{
						required: true,
						message: 'Please enter the new password again',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: 'Please select gender',
						trigger: 'blur'
					}],
					maj_cn: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: 'Please select title',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select country',
						trigger: 'blur'
					}],
					field: [{
						required: true,
						message: 'Please input field',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取个人信息，数据列表
			getData() {
				this.$api
					.post('api/Reviewer/getAllMajor')
					.then(res => {
						this.jl_major = res.data.majors;
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('api/Reviewer/getCountrys')
					.then(res => {
						this.df_country = res.countrys;
					})
					.catch(err => {
						this.$message.error(err);
					});

				if (this.usercap.includes('reviewer')) {
					this.$api
						.post('api/Journal/getJournalInReviewer', {
							username: this.username
						})
						.then((res) => {
							this.items_journal = res.data.journals;
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			// 点击修改密码
			psw_word() {
				this.pass_word = true;
			},
			// 点击提交密码
			save_pwd(pwdform) {
				this.$refs.pwd_form.validate((valid) => {
					if (valid) {
						if (pwdform.new_password == pwdform.re_password) {
							this.$api
								.post('master/Admin/changepasswd', this.pwdform)
								.then(res => {
									if (res.code == 0) {
										this.$message.success('Password modified successfully!');
										this.pass_word = false;
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error("The two new password entries are inconsistent!");
						}
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 点击提交个人基本信息
			onSubmit_core(coreForm) {
				this.$refs.core_Form.validate((valid) => {
					if (valid) {
						// 二次确认删除
						this.$confirm('Are you sure you want to modify your basic personal information？', 'Tips', {
								type: 'warning'
							})
							.then(() => {
								// this.$api
								// 	.post('master/Admin/editAdminBase', this.coreForm)
								// 	.then(res => {
								// 		if (res.code == 0) {
								// 			this.$message.success('Personal information modified successfully！');
								// 			this.getData();
								// 		} else {
								// 			this.$message.error(res.msg);
								// 		}
								// 	})
								// 	.catch(err => {
								// 		this.$message.error(err);
								// 	});
							})
							.catch(() => {});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 点击提交审稿人信息
			onSubmit_review(reviewForm) {
				this.$refs.review_Form.validate((valid) => {
					if (valid) {
						// 二次确认删除
						this.$confirm('Are you sure you want to modify reviewer information？', 'Tips', {
								type: 'warning'
							})
							.then(() => {

							})
							.catch(() => {});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 下拉级联添加
			ched_id(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},
			ched_id_old(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},
			ched_id_edit(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},

			// 上传文件
			handleChange1(file, fileList) {
				if (fileList.length > 0) {
					this.fileL_pdf1 = [fileList[fileList.length - 1]]
				}
			},
			handleFileSuccess1(res, file) {
				if (res.code == 0) {
					this.reviewForm.cv = res.upurl;
					this.reviewForm.qualifications = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`Remove ${ file.name }？`)
			},
			handleFileError(res, file) {

			},

			handleRemove(file, fileList) {

			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("The current limit is 1 file. Please delete the current file first！");
			},
		}
	};
</script>

<style scoped>
	.infor_title {
		font-size: 18px;

	}

	.join_bth {
		color: #fff;
		text-align: center;
		border-radius: 4px;
		width: 320px;
		height: 50px;
		line-height: 50px;
		background-color: #006699;
		font-size: 20px;
	}
</style>
