<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-box"></i>
					<router-link :to="{path:'/guestArticleL'}">
						<span class="top_dao"> Manuscript list</span>
					</router-link>
					>> Manuscript reviewer list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openAddRev">Reviewer Bank</el-button> -->
				<el-button type="primary" icon="el-icon-plus" @click="newAddInp">Add Reviewer</el-button>
				<!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="editVisible =true">Add reviewer</el-button> -->
				<!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="editVisible1 = true">Supplement</el-button> -->
			</div>
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column type="index" label="No." align="center" width="60"></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="country" label="Country"></el-table-column>
				<el-table-column :formatter="majorTitle" label="Major"></el-table-column>
				<el-table-column :formatter="revstate" label="State" align="center"></el-table-column>
				<el-table-column label="" width="120" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetail(scope.row)">Detail</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="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<el-dialog title="Add Reviewer" :visible.sync="AddInput" width="620px" :close-on-click-modal="false">
			<el-form ref="inp_form" :model="inpForm" :rules="rules" label-width="100px">
				<el-form-item label="Email :" prop="email">
					<el-input v-model="inpForm.email"></el-input>
				</el-form-item>
				<el-form-item label="Realname :" prop="realname">
					<el-input v-model="inpForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="Country :" prop="country">
					<el-select v-model="inpForm.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="Major :" prop="major_a">
					<el-select v-model="inpForm.major_a" placeholder="Please select" @change="majorChange(1)"
						style="width: 150px;margin: 0 10px 0 0;">
						<el-option v-for="item in majors_a" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
					<el-select v-model="inpForm.major_b" placeholder="Please select" v-if="majors_b!=''"
						@change="majorChange(2)" style="width: 150px;margin:0 10px 0 0;">
						<el-option :key="0" label="None" :value="0"></el-option>
						<el-option v-for="item in majors_b" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
					<el-select v-model="inpForm.major_c" placeholder="Please select" v-if="majors_c!=''"
						@change="majorChange(3)" style="width: 150px;">
						<el-option :key="0" label="None" :value="0"></el-option>
						<el-option v-for="item in majors_c" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="AddInput = false">Cancel</el-button>
				<el-button type="primary" @click="saveAddInp">Save</el-button>
			</span>
		</el-dialog>

		<el-dialog title="add reviewer" :closeOnClickModal="false" :visible.sync="editVisible" width="80%" v-loading="loading" :close-on-click-modal="false"
		 element-loading-text="Loading..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-form ref="editform" :model="editform" label-width="100px">
				<el-form-item label="state">
					<el-select v-model="editform.uid" filterable @change="changereviewer()" placeholder="Please select">
						<el-option :key="0" label="please select" :value="0"></el-option>
						<el-option v-for="item in reviewerList" :key="item.user_id" :label="item.account" :value="item.user_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Country" v-if="editform.uid != 0">
					<span>{{ reviewer_data.country }}</span>
				</el-form-item>
				<el-form-item label="Company" v-if="editform.uid != 0">
					<span>{{ reviewer_data.company }}</span>
				</el-form-item>
				<el-form-item label="Major" v-if="editform.uid != 0">
					<span>{{ reviewer_data.major_title }}</span>
				</el-form-item>
				<el-form-item label="Field" v-if="editform.uid != 0">
					<span>{{ reviewer_data.field }}</span>
				</el-form-item>
				<el-form-item label="Introduction" v-if="editform.uid != 0">
					<span>{{ reviewer_data.introduction }}</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="editVisible=false">canel</el-button>
				<el-button type="primary" @click="saveEdit">save</el-button>
			</span>
		</el-dialog>

		<el-dialog title="Supplement" :visible.sync="editVisible1" width="40%" v-loading="loading" element-loading-text="Loading..." :close-on-click-modal="false"
		 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-form :model="questionform" ref="question" label-width="300px" label-position="top">
				<el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="1.Originality of the topic">
							<el-radio-group v-model="questionform.qu1">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="2.Importance in its Field">
							<el-radio-group v-model="questionform.qu3">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="3.Does the manuscript fall within the aim and scope of the journal?">
							<el-radio-group v-model="questionform.qu6">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="4.English language">
							<el-radio-group v-model="questionform.qu8">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="5.Readily Understandable">
							<el-radio-group v-model="questionform.qu5">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-collapse>
							<el-form-item label="6.Does the title represent manuscript's contents?">
								<el-col :span="8">
									<el-radio-group v-model="questionform.qu9">
										<el-radio :label="true">Yes</el-radio>
										<el-radio :label="false">No</el-radio>
									</el-radio-group>
								</el-col>
								<el-col :span="12">
									<el-collapse-item name="1" style="margin-top: -10px;">
										<template slot="title">
											<i class="el-icon-edit"></i>Comments/ Suggestions
										</template>
										<el-input type="textarea" placeholder="please input content" v-model="questionform.qu9contents" :rows="4"></el-input>
									</el-collapse-item>
								</el-col>
							</el-form-item>
						</el-collapse>
					</el-col>
				</el-row>

				<el-collapse>
					<el-form-item label="7.Is the Abstract accurate and concise?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu10">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="2" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu10contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="8.Are the approach/ methods properly described?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu11">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="3" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu11contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="9.Are the conclusions and interpretations sound?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu12">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="4" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu12contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="10.Are the references properly cited?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu13">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="5" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu13contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>

					<el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
					<el-form-item label="Overall the Paper is Rated">
						(Poor------------------------Excellent)
						<br />
						<el-radio-group v-model="questionform.rated" size="small">
							<el-radio-button label="1"></el-radio-button>
							<el-radio-button label="2"></el-radio-button>
							<el-radio-button label="3"></el-radio-button>
							<el-radio-button label="4"></el-radio-button>
							<el-radio-button label="5"></el-radio-button>
							<el-radio-button label="6"></el-radio-button>
							<el-radio-button label="7"></el-radio-button>
							<el-radio-button label="8"></el-radio-button>
							<el-radio-button label="9"></el-radio-button>
							<el-radio-button label="10"></el-radio-button>
						</el-radio-group>
						<span style="margin-left: 20px;">>Your score:{{questionform.rated}}</span>
					</el-form-item>
					<el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
						<el-radio-group v-model="questionform.recommend" style="line-height: 30px;">
							<el-radio :label="1">Accept with minor revision</el-radio>
							<br />
							<el-radio :label="2">Accept with major revision</el-radio>
							<br />
							<el-radio :label="3">Reject in current form, but may be resubmitted</el-radio>
							<br />
							<el-radio :label="4">Reject, with no resubmission</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="OTHER SPECIFIC CRITICISMS">
						<el-radio-group v-model="questionform.other" style="line-height: 30px;">
							<el-radio :label="1">Imperfect style</el-radio>
							<br />
							<el-radio :label="2">Too long</el-radio>
							<br />
							<el-radio :label="3">References incorrectly presented</el-radio>
							<br />
							<el-radio :label="4">Typographical and Grammatical errors</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="Comments for the Authors">
						<el-input type="textarea" placeholder="please input content" v-model="questionform.comment" :rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Confidential Comments to the Editor">
						<el-input type="textarea" placeholder="please input content" v-model="questionform.confident" :rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Please choose disclose your name or remain anonymous.">
						<el-radio-group v-model="questionform.is_anonymous" style="line-height: 30px;">
							<el-radio :label="0">Disclose name</el-radio>
							<br />
							<el-radio :label="1">Remain anonymous</el-radio>
						</el-radio-group>
						<p style="line-height: 20px;color: #aaa;font-size: 13px;margin: 12px 0 0 0;">
							If you agree to disclose your name, we will acknowledge you by name in the published
							PDF. However, if you prefer to remain anonymous, we will still express our gratitude
							by thanking you as an anonymous reviewer. 
							<br />For example, {{txt_mess.title}} would like to thank AAAAAAAA, BBBBBBBB, and other anonymous reviewers for their
							invaluable contributions to the peer review process of this paper.
						</p>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addArtRev">submit</el-button>
					</el-form-item>
				</el-collapse>
			</el-form>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				questionform: {
					uid: 0,
					articleId: this.$route.query.id,
					qu1: '',
					qu2: '',
					qu3: '',
					qu4: '',
					qu5: '',
					qu6: '',
					qu7: '',
					qu8: '',
					qu9: '',
					qu9contents: '',
					qu10: '',
					qu10contents: '',
					qu11: '',
					qu11contents: '',
					qu12: '',
					qu12contents: '',
					qu13: '',
					qu13contents: '',
					qu14: '',
					qu14contents: '',
					qu15: '',
					qu15contents: '',
					rated: '',
					recommend: '',
					other: '',
					confident: '',
					comment: ''
				},
				inpForm: {
					editor_id: localStorage.getItem('U_id'),
					article_id: this.$route.query.id,
				},
				AddInput: false,
				txt_mess: {},
				query: {
					articleId: this.$route.query.id,
					pageIndex: 1,
					pageSize: 10
				},
				editform: {
					uid: 0,
					articleId: this.$route.query.id
				},
				df_country: [],
				jl_major: [],
				defaultParams: {
					label: 'title',
					value: 'major_id',
					children: 'children'
				},
				reviewer_data: {
					introduction: '',
					country: '',
					company: '',
					major_title: '',
					field: ''
				},
				reviewer_data1: {
					introduction: '',
					country: '',
					company: '',
					major_title: '',
					field: ''
				},
				editVisible: false,
				editVisible1: false,
				tableData: [],
				reviewerList: [],
				loading: false,
				Total: 0,
				majors_a: [],
				majors_b: [],
				majors_c: [],
				rules: {
					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"
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select country',
						trigger: 'blur'
					}],
					major_a: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
				}
			};
		},
		created() {
			this.getDate();
			this.initreviewerList();
			this.initMajor()
		},
		computed: {
			upload_url: function() {
				return this.baseUrl + 'api/Reviewer/up_file';
			}
		},
		methods: {
			// 获取编辑列表数据
			getDate() {
				this.$api
					.post('api/Article/getReviewerList', this.query)
					.then((res) => {
						this.Total = res.totle;
						this.tableData = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getDate();
			},
			// 添加当前页面审稿人信息
			newAddInp() {
				this.AddInput = true
			},
			// 提交审稿人
			saveAddInp() {
				this.$refs.inp_form.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Special/addReviewerToArticleForSpecial', this.inpForm)
							.then((res) => {
								this.$refs.inp_form.resetFields()
								this.AddInput = false
								this.getDate();
							})
							.catch((err) => {
								console.log(err);
							});
					}
				});
			},
			// 领域级联
			ched_id_edit(event) {
				this.inpForm.major = event[0];
				this.inpForm.cmajor = event[1];
			},
			// 添加跳页面
			openAddRev() {
				this.$router.push({
					path: 'articleReviewerAdd',
					query: {
						id: this.$route.query.id
					}
				});
			},
			//初始化审查员列表// 国家// 领域
			initreviewerList() {
				this.$api
					.post('api/Article/getArticleReviewerList', {
						articleId: this.query.articleId
					})
					.then((res) => {
						this.reviewerList = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
				this.$api
					.post('api/Reviewer/getCountrys')
					.then(res => {
						this.df_country = res.countrys;
					})
					.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);
					});
			},
			//保存添加操作
			saveEdit() {
				if (this.editform.uid == 0) {
					this.$message.error('please select a reviewer');
				} else {
					this.loading = true;
					this.$api
						.post('api/Article/addArticleReviewer', this.editform)
						.then((res) => {
							this.loading = false;
							if (res.code == 0) {
								this.$message.success('add success');
								this.$router.go(0);
							} else {
								this.$message.error('add error');
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			addArtRev() {
				if (this.questionform.uid == 0) {
					this.$message.error('Please select a reviewer');
				} else if (this.questionform.is_anonymous == "" && this.questionform.is_anonymous != "0") {
					this.$message.error('Please choose disclose your name or remain anonymous.');
				} else {
					this.loading = true;
					this.$api.post('api/Article/addArtRev', this.questionform)
						.then((res) => {
							this.loading = false;
							if (res.code == 0) {
								this.$message.success('add success');
								this.$router.go(0);
							} else {
								this.$message.error('add error');
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			showdetail(row) {
				if (row.state == 4) {
					this.$message.error('Review expired!');
				} else {
					this.$router.push({
						path: 'articleReviewerDetail',
						query: {
							id: row.art_rev_id
						}
					});
				}
			},
			changereviewer() {
				if (this.editform.uid !== 0) {
					this.$api
						.post('api/Article/getReviewerdetail', {
							uid: this.editform.uid
						})
						.then((res) => {
							this.reviewer_data.introduction = res.data.introduction;
							this.reviewer_data.country = res.data.country;
							this.reviewer_data.company = res.data.company;
							this.reviewer_data.major_title = res.data.major_title;
							this.reviewer_data.field = res.data.field;
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			changereviewer1() {
				if (this.questionform.uid !== 0) {
					this.$api
						.post('api/Article/getReviewerdetail', {
							uid: this.questionform.uid
						})
						.then((res) => {
							this.reviewer_data1.introduction = res.data.introduction;
							this.reviewer_data1.country = res.data.country;
							this.reviewer_data1.company = res.data.company;
							this.reviewer_data1.major_title = res.data.major_title;
							this.reviewer_data1.field = res.data.field;
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			majorTitle(row, column, cellValue, index) {
				return row.major_title + '(' + row.major_ctitle + ')';
			},
			revstate(row, column, cellValue, index) {
				let frag = '';
				if (row.state == 0) {
					frag = 'With reviewer';
				} else if (row.state == 1) {
					frag = 'Revision';
				} else if (row.state == 2) {
					frag = 'Reject';
				} else if (row.state == 3) {
					frag = 'Accept';
				} else if (row.state == 4) {
					frag = 'invalid';
				} else if (row.state == 5) {
					frag = 'invitation';
				}
				return frag;
			},
			
			// 领域
			initMajor() {
				this.$api
					.post('api/Ucenter/getMajor', {
						major_id: 1
					}).then((res) => {
						this.majors_a = res.data.major.children;
					});
			},
			
			
			
			// 搜索选择领域
			majorChange(e) {
				if (e == 1) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.inpForm.major_a
						}).then((res) => {
							this.majors_b = res.data.major.children;
							this.majors_c = []
							this.inpForm.major_b = ''
							this.inpForm.major_c = ''
							this.majorChange_panduan()
						});
				} else if (e == 2 && this.inpForm.major_b != 0) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.inpForm.major_b
						}).then((res) => {
							this.majors_c = res.data.major.children;
							this.inpForm.major_c = ''
							this.majorChange_panduan()
						});
				} else {
					this.majorChange_panduan()
				}
			},
			
			majorChange_panduan() {
				if (this.inpForm.major_c != '' || this.inpForm.major_c != 0) {
					this.inpForm.major = this.inpForm.major_c
				} else if (this.inpForm.major_b != '' || this.inpForm.major_b != 0) {
					this.inpForm.major = this.inpForm.major_b
				} else {
					this.inpForm.major = this.inpForm.major_a
				}
			},
			
		}
	};
</script>

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

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.el-table .warning-row {
		background: #f3ca7f;
	}

	.el-table .success-row {
		background: #bcfc9a;
	}

	.el-table .normol-row {
		background: #d8f1c7;
	}

	.el-table .red-row {
		background: #f05555;
	}
</style>
