<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Add manuscript reviewer</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..."
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-select v-model="messform.major_id" filterable placeholder="Please select majors"
				@change="changereviewer()">
				<el-option :key="0" label="All" :value="0"></el-option>
				<el-option v-for="item in majorsList" :key="item.major_id" :label="item.title+' '+item.ctitle"
					:value="item.major_id"></el-option>
			</el-select>
			<el-select v-model="messform.class" style="width: 100px;margin: 0 0 0 15px;"
				placeholder="Please select class" @change="changereviewer()">
				<el-option label="All class" :key="0" :value="0"></el-option>
				<el-option label="A" key="A" value="A"></el-option>
				<el-option label="B" key="B" value="B"></el-option>
				<el-option label="C" key="C" value="C"></el-option>
				<el-option label="D" key="D" value="D"></el-option>
				<el-option label="Not rated" key="1" value="1"></el-option>
			</el-select>
			<el-input v-model="messform.keywords" clearable placeholder="Please enter keyword"
				style="width: 220px;display: inline-block;margin: 0 10px 20px 10px;"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
			<el-table :data="revTable" border stripe class="table" ref="multipleTable"
				header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="class" label="Class" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.grade!=''">{{scope.row.grade}}</span>
						<span v-if="scope.row.grade==''">Not rated</span>
					</template>
				</el-table-column>
				<el-table-column prop="realname" label="Real Name"></el-table-column>
				<el-table-column prop="account" label="Name"></el-table-column>
				<el-table-column prop="cmajor" label="" width="180"></el-table-column>
				<el-table-column prop="field" label="Field"></el-table-column>
				<el-table-column prop="company" label="Company"></el-table-column>
				<el-table-column prop="rs_num" label="Reviewed Times" width="140">
					<template slot-scope="scope">
						{{scope.row.rs_num}}
						<font style="margin-left: 5px;">(Reviewing:{{scope.row.now}})</font>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="rd_num" label="Fail number" width="140"></el-table-column> -->
				<el-table-column label="" width="200" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="success" plain icon="el-icon-tickets"
							@click="openDetail(scope.row)">Detail</el-button>
						<el-button size="mini" type="primary" plain icon="el-icon-check" @click="openSelect(scope.row)">
							Select</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="messform.pageIndex"
					:page-size="messform.pageSize" :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		<el-dialog title="Reviewer information" :visible.sync="mesOpenVisble" width="800px" v-loading="loading"
			element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-form v-model="mesOpen" label-width="140px">
				<el-form-item label="User :">
					<span>{{ mesOpen.account }}</span>
				</el-form-item>
				<el-form-item label="Name :">
					<span>{{ mesOpen.realname }}</span>
				</el-form-item>
				<el-form-item label="Country :">
					<span>{{ mesOpen.country }}</span>
				</el-form-item>
				<el-form-item label="Company :">
					<span>{{ mesOpen.company }}</span>
				</el-form-item>
				<el-form-item label="Major :">
					<span>{{ mesOpen.major_title }}</span>
				</el-form-item>
				<el-form-item label="Field :">
					<span>{{ mesOpen.field }}</span>
				</el-form-item>
				<el-form-item label="Introduction :">
					<span>{{ mesOpen.introduction }}</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="mesOpenVisble = false">Canel</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				messform: {
					article_id: this.$route.query.id,
					major_id: 0,
					class: 0,
					keywords: '',
					pageIndex: 1,
					pageSize: 15
				},
				majorsList: [],
				revTable: [],
				mesOpen: [],
				mesOpenVisble: false,
				loading: false,
				Total: 0

			};
		},
		created() {
			this.getdate();
			this.getmajors();
		},
		computed: {

		},
		methods: {
			// 获取领域列表
			getmajors() {
				this.$api
					.post('api/Reviewer/getAllReviewerMajor', {
						article_id: this.$route.query.id,
					})
					.then((res) => {
						this.majorsList = res.data.majors;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 获取编辑列表数据
			getdate() {
				this.$api
					.post('api/Reviewer/searchReviewer', this.messform)
					.then((res) => {
						this.revTable = res.data.reviewers;
						this.Total = res.data.count;
						this.loading = false;
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 下拉搜索
			changereviewer() {
				if (this.messform.class == 0) {
					if (this.messform.grade != undefined) {
						delete this.messform.grade
					}
				} else if (this.messform.class == 1) {
					this.messform.grade = ''
				} else {
					this.messform.grade = this.messform.class
				}
				this.loading = true;
				this.getdate();
			},

			// 关键字搜索
			handleSearch() {
				this.loading = true;
				this.getdate();
			},

			// 审稿人详情
			openDetail(row) {
				this.mesOpenVisble = true;
				this.$api
					.post('api/Article/getReviewerdetail', {
						uid: row.user_id
					})
					.then((res) => {
						this.mesOpen = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 保存添加操作
			openSelect(row) {
				this.loading = true;
				this.$api
					.post('api/Article/addArticleReviewer', {
						uid: row.user_id,
						articleId: this.$route.query.id
					})
					.then((res) => {
						this.loading = false;
						if (res.code == 0) {
							this.$message.success('Add Success');
							this.getdate();
							// this.$router.push({
							// 	path: 'articleReviewer',
							// 	query: {
							// 		id: this.$route.query.id
							// 	}
							// });
						} else {
							this.$message.error('Add Error');
						}
					})
					.catch((err) => {
						this.loading = false;
						console.log(err);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.messform, 'pageIndex', val);
				this.getdate();
			},

		}
	};
</script>

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