<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> Journal list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" @click="addJournal">Add Journal</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 prop="journal_id" label="ID" align="center" width="40"></el-table-column>
				<el-table-column prop="title" label="Title"></el-table-column>
				<el-table-column prop="issn" label="Issn" align="center" width="100"></el-table-column>
				<el-table-column prop="alias" label="Alias" align="center" width="60"></el-table-column>
				<el-table-column prop="level" label="Level" align="center" width="60"></el-table-column>
				<el-table-column prop="kfen" label="Initial review score" align="center" width="70"></el-table-column>
				<el-table-column prop="scope" label="Introduction" align="center" width="300"></el-table-column>
				<el-table-column prop="editor" label="Editor" align="center" width="150"></el-table-column>
				<el-table-column label="" width="150" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-edit"
							@click="showdetail(scope.row)">Edit Message</el-button>
						<p style="height: 10px;"></p>
						<el-button size="mini" type="warning" plain icon="el-icon-edit"
							@click="handleChange(scope.row)">Change Editor</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="Edit Message" :visible.sync="detailVisible" width="650px">
			<el-form ref="detail_form" :model="detailForm" :rules="rules" label-width="165px">
				<el-form-item label="Journal :">
					<span>{{detailForm.title}}</span>
				</el-form-item>
				<el-form-item label="Level :" prop="level">
					<el-select v-model="detailForm.level" placeholder="Please select">
						<el-option v-for="item in levelList" :key="item.title" :label="item.title" :value='item.title'>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Email :" prop="email">
					<el-input v-model="detailForm.email"></el-input>
				</el-form-item>
				<el-form-item label="Password :" prop="epassword">
					<el-input v-model="detailForm.epassword"></el-input>
				</el-form-item>
				<el-form-item label="Initial review score :" prop="kfen">
					<el-input-number v-model="detailForm.kfen" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="Introduction :" prop="scope">
					<el-input type="textarea" rows="5" v-model="detailForm.scope"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveDetail">Save</el-button>
			</span>
		</el-dialog>

		<el-dialog title="Change Editor" :visible.sync="editVisible" width="500px">
			<el-form ref="changform" :model="changeForm" label-width="100px">
				<el-form-item label="Journal :">
					<span>{{changeForm.title}}</span>
				</el-form-item>
				<el-form-item label="Editor :">
					<el-select v-model="changeForm.editorId" placeholder="Please select">
						<el-option :key="0" label="Please select" :value="0"></el-option>
						<el-option v-for="item in editorList" :key="item.user_id" :label="item.account"
							:value='item.user_id'></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveChange">Save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'journallist',
		data() {
			return {
				query: {
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				Total: 0,
				detailForm: {
					journal_id: 0,
					level: '',
					email: '',
					epassword: '',
				},
				changeForm: {
					journalId: 0,
					editorId: 0,
					title: ''
				},
				detailVisible: false,
				editVisible: false,
				levelList: [{
					title: "A"
				}, {
					title: "B"
				}, {
					title: "C"
				}],
				editorList: [],
				rules: {
					level: [{
						required: true,
						message: 'please select level',
						trigger: 'blur'
					}],
					epassword: [{
						required: true,
						message: 'Please input re-password',
						trigger: 'blur'
					}],
					kfen: [{
						required: true,
						message: 'Please input initial review score',
						trigger: 'blur'
					}],
					scope: [{
						required: true,
						message: 'Please input journal introduction',
						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"
					}],
				}
			};
		},
		created() {
			this.getDate();
			this.initEditorList();
		},
		methods: {
			//获取编辑列表
			initEditorList() {
				this.$api.post('api/Admin/getEditorList')
					.then(res => {
						if (res.code == 0) {
							this.editorList = res.data;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取编辑列表数据
			getDate() {
				this.$api
					.post('api/Admin/getJournals', this.query)
					.then(res => {
						this.Total = res.total;
						this.tableData = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getDate();
			},
			// 添加期刊
			addJournal() {
				this.$router.push('/journalAdd');
			},
			// 更改期刊参数
			showdetail(row) {
				this.detailForm =JSON.parse(JSON.stringify(row)) 
				this.detailVisible = true
			},
			// 保存期刊参数
			saveDetail() {
				this.$refs.detail_form.validate((valid) => {
					if (valid) {
						this.$api.post('api/Journal/editJournal', this.detailForm)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Change Success!');
									this.detailVisible = false;
									this.getDate();
								} else {
									this.$message.error('Change failed');
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			//更改期刊编辑
			handleChange(row) {
				this.changeForm.journalId = row.journal_id;
				this.changeForm.editorId = row.editor_id;
				this.changeForm.title = row.title;
				this.editVisible = true;
			},
			//更改期刊编辑
			saveChange() {
				this.$api.post('api/Admin/journalEditorChange', this.changeForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Change Success!');
							this.editVisible = false;
							this.getDate();
						} else {
							this.$message.error('Change failed');
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
		}
	};
</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>
