<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Author transferred to reviewer list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.journal_id" @change="getList()" placeholder="Please select journal">
					<el-option :key="0" label="All Journals" :value="0"></el-option>
					<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :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 label="Name">
					<template slot-scope="scope">
						{{scope.row.firstname}}{{scope.row.lastname}}
					</template>
				</el-table-column>
				<el-table-column prop="email" label="Email"></el-table-column>
				<el-table-column prop="journal_title" label="Journal"></el-table-column>
				<el-table-column prop="author_title" label="Technical"></el-table-column>
				<el-table-column prop="company" label="Affiliation"></el-table-column>
				<el-table-column prop="country" label="Country"></el-table-column>
				<el-table-column label="" width="220" align="center">
					<template slot-scope="scope">
						<el-button type="success" plain icon="el-icon-edit" @click="reviewerEdit(scope.row)">Supplementary Information</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="Supplementary reviewer information" :visible.sync="reviewerVisible" :close-on-click-modal="false"
		 width="700px">
			<el-form ref="reviewerform" :model="reviewerForm" :rules="rules" label-width="130px">
				<el-form-item label="Name :">
					{{reviewerForm.firstname}}{{reviewerForm.lastname}}
				</el-form-item>
				<el-form-item label="Email :">
					{{reviewerForm.email}}
				</el-form-item>
				<el-form-item label="Journal :">
					{{reviewerForm.journal_title}}
				</el-form-item>
				<!-- 性别 -->
				<el-form-item prop="gender" label="Gender :">
					<el-radio-group v-model="reviewerForm.gender">
						<el-radio :label="1">Male</el-radio>
						<el-radio :label="2">Female</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- 简介  -->
				<el-form-item prop="introduction" label="Introduction :">
					<el-input type="textarea" rows="3" v-model="reviewerForm.introduction" placeholder="Please input personal qualification and resume"></el-input>
				</el-form-item>
				<!-- 国家 -->
				<el-form-item prop="country" label="Country :">
					<el-select v-model="reviewerForm.country" placeholder="Please select country" filterable>
						<el-option v-for="it in country_list" :key="it.en_name" :label="it.en_name" :value="it.en_name"></el-option>
					</el-select>
				</el-form-item>
				<!-- 专业 -->
				<el-form-item prop="major" label="Major :" filterable>
					<el-select v-model="reviewerForm.major" placeholder="Please select major" filterable>
						<el-option v-for="ii in major_list" :key="ii.major_id" :label="ii.title+ii.ctitle" :value="ii.major_id"></el-option>
					</el-select>
				</el-form-item>
				<!-- 领域 -->
				<el-form-item prop="field" label="Field :">
					<el-input type="textarea" rows="3" v-model="reviewerForm.field" placeholder="Please input field"></el-input>
				</el-form-item>
				<!-- 职称 -->
				<el-form-item prop="author_title" label="Technical :">
					<el-select v-model="reviewerForm.author_title" placeholder="Please select technical">
						<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 prop="company" label="Affiliation :">
					<el-input size="small" v-model="reviewerForm.company" auto-complete="off" placeholder="Please enter affiliation">
					</el-input>
				</el-form-item>
				<!-- 简历 -->
				<el-form-item label="Qualifications :">
					<el-upload class="upload-demo" :action="upload_qualifications" accept=".rar, .zip" name="qualifications" :on-error="uperr"
					 :on-success="upSuccess" :limit="1" :on-exceed="alertlimit" :on-remove="removefile">
						<div class="el-upload__text">
							<em>click upload</em>
						</div>
						<div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="reviewerDelete(reviewerForm.rfa_id)">Reject</el-button>
				<el-button type="primary" @click="saveReviewer(reviewerForm)">Submit And Agree</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				editname: localStorage.getItem('U_name'),
				tableData: [],
				journalList: [],
				query: {
					journal_id: 0,
					username: localStorage.getItem('U_name')
				},
				reviewerVisible: false,
				reviewerForm: {},
				journal_list: [],
				country_list: [],
				major_list: [],
				rules: {
					introduction: [{
						required: true,
						message: 'Please input personal qualification and resume',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please enter country',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: 'Please select gender',
						trigger: 'blur'
					}],
					major: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
					author_title: [{
						required: true,
						message: 'Please select technical',
						trigger: 'blur'
					}],
					department: [{
						required: true,
						message: 'Please enter department',
						trigger: 'blur'
					}],
					field: [{
						required: true,
						message: 'Please enter field',
						trigger: 'blur'
					}],
					company: [{
						required: true,
						message: 'Please enter company',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
			this.getList();
		},
		computed: {
			upload_qualifications: function() {
				return this.baseUrl + 'api/Admin/up_file';
			}
		},
		methods: {
			// 获取初始数据
			getData() {
				// 期刊列表
				this.$api
					.post('api/Article/getJournal', {
						username: this.editname
					})
					.then(res => {
						this.journalList = res;
					})
					.catch(err => {
						console.log(err);
					});
				// 国家列表
				this.$api
					.post('api/Admin/getCountrys')
					.then(res => {
						this.country_list = res;
					})
					.catch(err => {
						console.log(err);
					});
				// 领域列表
				this.$api
					.post('api/User/getMajorList')
					.then(res => {
						this.major_list = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取列表数据
			getList() {
				// 作者列表
				this.$api
					.post('api/User/getAuthorToReviewerList', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.reviewerTrans
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 编辑操作
			reviewerEdit(e) {
				this.$api
					.post('api/User/getAuthorToReviewerDetail', {
						'rfa_id': e.rfa_id
					})
					.then(res => {
						if (res.code == 0) {
							this.reviewerForm = res.data.reviewerTran;
							this.reviewerForm.qualifications = '';
							this.reviewerVisible = true;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 保存编辑
			saveReviewer(reviewerForm) {
				this.$refs.reviewerform.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/User/ReviewerFromAuthorAdopt', this.reviewerForm)
							.then(res => {
								if (res.code == 0) {
									this.reviewerVisible = false;
									this.$message.success("Submit success!");
									this.getList();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

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

			// 删除审稿人
			reviewerDelete(e) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete？', 'Tips', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/User/ReviewerFromAuthorReject', {
								'rfa_id': e
							})
							.then(res => {
								if (res.code == 0) {
									this.reviewerVisible = false;
									this.$message.success('Reject success!');
									this.getList();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 上传文件
			uperr(err) {
				this.$message.error('upload defailed:' + err);
			},
			upSuccess(res, file) {
				if (res.code == 0) {
					this.reviewerForm.qualifications = res.upurl;
				} else {
					this.$message.error('Server upload error：' + res.msg);
				}
			},
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},
			removefile() {
				this.reviewerForm.qualifications = '';
			},

		}
	};
</script>

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

	.handle-box {
		margin-bottom: 20px;
	}
</style>
