<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Reviewer Add
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">Add</el-button>
			</div>
			<div class="handle-box" :rules="rules">
				<el-select v-model="query.journalId" placeholder="Please select a journal" @change="chan_id">
					<el-option label="All" :key="0" :value="0"></el-option>
					<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
				</el-select>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="account" label="account"></el-table-column>
				<el-table-column prop="email" label="email"></el-table-column>
				<el-table-column prop="realname" label="realname"></el-table-column>
				<el-table-column prop="title" label="title"></el-table-column>
				<el-table-column prop="technical" label="technical"></el-table-column>
				<el-table-column prop="company" label="company"></el-table-column>
				<!-- <el-table-column label=" " width="140" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="link_Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="Add" :visible.sync="addVisible" width="40%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="account" prop="account">
					<el-input v-model="addForm.account" @blur='saerNa_U()'></el-input>
				</el-form-item>
				<el-form-item label="email" prop="email">
					<el-input v-model="addForm.email" @blur='saerEm_U()'></el-input>
				</el-form-item>
				<el-form-item label="password" prop="password">
					<span style="color: #666;">123456qwe</span>
				</el-form-item>
				<el-form-item label="gender" prop="gender">
					<el-radio-group v-model="addForm.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="journal" prop="journal_id">
					<el-select v-model="addForm.journal_id" placeholder="Please select a journal" @change="chan_id">
						<el-option v-for="item in df_jour" :label="item.title" :key="item.journal_id" :value="item.journal_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="title" prop="title">
					<el-select v-model="addForm.title" filterable placeholder="Please select a title" value-key="groupID" style="width: 300px;">
						<el-option key="Prof." label="Prof." value="Prof."></el-option>
						<el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."></el-option>
						<el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."></el-option>
						<el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
						<el-option key="Others" label="Others" value="Others"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="country" prop="country">
					<el-select v-model="addForm.country" filterable placeholder="Please select a country" value-key="groupID" style="width: 300px;">
						<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="realname">
					<el-input v-model="addForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="orcid">
					<el-input v-model="addForm.orcid"></el-input>
				</el-form-item>
				<el-form-item label="introduction">
					<el-input v-model="addForm.introduction"></el-input>
				</el-form-item>
				<el-form-item label="company">
					<el-input v-model="addForm.company"></el-input>
				</el-form-item>
				<el-form-item label="major" prop="maj_cn">
					<el-cascader v-model="addForm.maj_cn" :options="jl_major" :props="defaultParams" placeholder="Please select major"
					 @change="ched_id" style="width: 300px;"></el-cascader>
				</el-form-item>
				<el-form-item label="field" prop="field">
					<el-input v-model="addForm.field" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveAdd(addForm)" :disabled="this.btn_alert">OK</el-button>
			</span>
		</el-dialog>

		<!-- 编辑弹出框 -->
		<el-dialog title="Edit" :visible.sync="editVisible" width="40%">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="85px">
				<el-form-item label="account" prop="account">
					{{editForm.account}}
				</el-form-item>
				<el-form-item label="email" prop="email">
					<el-input v-model="editForm.email" @blur='saerEm_U()'></el-input>
				</el-form-item>
				<el-form-item label="gender" prop="gender">
					<span v-if="editForm.gender==1">male</span>
					<span v-if="editForm.gender==2">female</span>
				</el-form-item>
				<el-form-item label="journal" prop="journal_id">
					{{editForm.journal_title}}
				</el-form-item>
				<el-form-item label="technical" prop="technical">
					<el-select v-model="editForm.technical" filterable placeholder="Please select a title" value-key="groupID" style="width: 300px;">
						<el-option key="Prof." label="Prof." value="Prof."></el-option>
						<el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."></el-option>
						<el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."></el-option>
						<el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
						<el-option key="Others" label="Others" value="Others"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="country" prop="country">
					<el-select v-model="editForm.country" filterable placeholder="Please select a country" value-key="groupID" style="width: 300px;">
						<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="realname">
					<el-input v-model="editForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="orcid">
					<el-input v-model="editForm.orcid"></el-input>
				</el-form-item>
				<el-form-item label="introduction">
					<el-input v-model="editForm.introduction"></el-input>
				</el-form-item>
				<el-form-item label="company">
					<el-input v-model="editForm.company"></el-input>
				</el-form-item>
				<el-form-item label="major">
					<el-cascader :options="jl_major" v-model="editForm.maj_cn" :props="defaultParams" placeholder="Please select major"
					 @change="ched_id" style="width: 300px;"></el-cascader>
				</el-form-item>
				<el-form-item label="field">
					<el-input v-model="editForm.field" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveEdit(editForm)" :disabled="this.btn_alert">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				addForm: {
					gender: 1,
					major: [],
				},
				editForm: {},
				editVisible: false,
				addVisible: false,
				btn_alert: false,
				df_jour: [],
				df_country: [],
				jl_major: [],
				defaultParams: {
					label: 'title',
					value: 'major_id',
					children: 'children'
				},
				edit_id: localStorage.getItem('U_id'),
				query: {
					username: localStorage.getItem('U_name'),
					journalId: 0,
					pageIndex: 1,
					pageSize: 10
				},
				link_Total: 0,
				aid: -1,
				idx: -1,
				rules: {
					account: [{
						required: true,
						message: 'Please input account',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: 'Please input 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"
					}],
					genger: [{
						required: true,
						message: 'Please select genger',
						trigger: 'blur'
					}],
					journal_id: [{
						required: true,
						message: 'Please select journal_id',
						trigger: 'blur'
					}],
					maj_cn: [{
						required: true,
						message: 'Please select maj_cn',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: 'Please select title',
						trigger: 'blur'
					}],
					technical: [{
						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'
					}],
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {
				this.$api
					.post('api/Chief/getJournalsByEditor', {
						'user_id': this.edit_id
					})
					.then(res => {
						if (res.code == 0) {
							this.df_jour = res.data.journals;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('api/Reviewer/getReviewerListByJournal', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data;
							this.link_Total = res.total || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				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);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			// 下拉分类搜索
			chan_id(event) {
				this.getData();
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
			},
			// 下拉级联添加
			ched_id(event) {
				this.addForm.major = event[0];
				this.addForm.cmajor = event[1];
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Reviewer/addReviewer', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`Added successfully!`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.editForm = Object.assign({}, row);
				this.editForm.maj_cn = [this.editForm.major, this.editForm.cmajor];
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Reviewer/checkUser', {
								'account': this.editForm.email
							})
							.then(res => {
								if (res.code == 0) {
									if (res.data.has == 'no') {
										this.$api
											.post('master/Journal/editJournalAbs', this.editForm)
											.then(res => {
												if (res.code == 0) {
													this.editVisible = false;
													this.$message.success(`Successfully changed line ${this.idx + 1} `);
													this.getData();
												} else {
													this.$message.error(res.msg);
												}
											})
											.catch(err => {
												this.$message.error(err);
											});
									} else {
										this.$alert('Repeat of user email!', 'Tips', {
											confirmButtonText: 'OK',
										}).then(res => {}).catch(() => {});
									}
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});


					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete？', 'Tips', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delJournalAbs', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Delete succeeded!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 查找与他相同的账号
			saerNa_U() {
				if (this.addForm.account != undefined) {
					this.$api
						.post('api/Reviewer/checkUser', {
							'account': this.addForm.account
						})
						.then(res => {
							if (res.code == 0) {
								if (res.data.has == 'no') {
									this.btn_alert = false
								} else {
									this.$alert('Repeat of user account!', 'Tips', {
										confirmButtonText: 'OK',
									}).then(res => {}).catch(() => {});
									this.btn_alert = true
								}
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},
			// 查找与他相同的邮箱
			saerEm_U() {
				if (this.addForm.email != undefined) {
					this.$api
						.post('api/Reviewer/checkUser', {
							'account': this.addForm.email
						})
						.then(res => {
							if (res.code == 0) {
								if (res.data.has == 'no') {
									this.btn_alert = false
								} else {
									this.$alert('Repeat of user email!', 'Tips', {
										confirmButtonText: 'OK',
									}).then(res => {}).catch(() => {});
									this.btn_alert = true
								}
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},
		}
	};
</script>


<style scoped>
	.table {
		width: 100%;
		font-size: 14px;
	}

	.handle-box {
		margin-bottom: 20px;
	}


	.red {
		color: #ff0000;
	}
</style>
