<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 期刊管理</el-breadcrumb-item>
				<el-breadcrumb-item>客座管理</el-breadcrumb-item>
				<el-breadcrumb-item>客座管理 - 详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-tabs v-model="message">
				<el-tab-pane label="基本信息" name="first">
					<el-form ref="base_Form" :model="baseForm" :rules="rules" label-width="150px">
						<el-form-item label="Proposed title" prop="title">
							<el-input v-model="baseForm.title" type="textarea" rows="2"></el-input>
						</el-form-item>
						<el-form-item label="category" prop="intro">
							<el-input v-model="baseForm.intro"></el-input>
						</el-form-item>
						<el-form-item label="Image" prop="icon">
							<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_file'"
							:show-file-list="false" name="journalicon" :on-success="handleImageSuccess"
							:on-error="handleAvatarError" :before-upload="beforeImageUpload">
							<img v-if="SpecialImageUrl" :src="SpecialImageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						</el-form-item>
						<el-form-item label="Summary" prop="abstract">
							<quill-editor ref="myTextEditor" v-model="baseForm.abstract" :options="editorOption"></quill-editor>
						</el-form-item>
						<el-form-item label="Keywords" prop="keywords">
							<el-input v-model="baseForm.keywords" type="textarea" rows="2"></el-input>
						</el-form-item>
						<el-form-item label="Anticipated deadline" prop="deadline">
							<el-input v-model="baseForm.deadline"></el-input>
						</el-form-item>
					</el-form>
					<div style="text-align: right;">
						<el-button type="primary" @click="saveBase(editForm)">提交</el-button>
					</div>
				</el-tab-pane>
				<el-tab-pane label="编辑" name="second">
					<template v-if="message === 'second'">
						<div class="handle-box">
							<span>申请客座编辑</span>
						</div>
						<!-- 作者申请列表 -->
						<el-table :data="tableData3" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column label="姓名" width="250px">
								<template scope="scope">
									{{scope.row.first_name}} {{scope.row.last_name}}
								</template>
							</el-table-column>
							<el-table-column label="头像" width="110">
								<template slot-scope="scope">
									<el-image class="table-td-thumb" :src="IMGdo_Url+scope.row.specialIcon"></el-image>
								</template>
							</el-table-column>
							<el-table-column prop="email" label="邮箱"></el-table-column>
							<el-table-column prop="address" label="地址"></el-table-column>
							<el-table-column prop="interests" label="兴趣"></el-table-column>
							<el-table-column prop="orcid" label="ORCID"></el-table-column>
							<el-table-column prop="website" label="网站"></el-table-column>
							<el-table-column label="是否通过" width="200" align="center">
								<template scope="scope">
									<el-button type="success" :value='0' @click="ApplyOk(scope.$index, scope.row)">通过</el-button>
									<el-button type="danger" :value='1' @click="ApplyNo(scope.$index, scope.row)">拒绝</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 编辑列表 -->
						<div class="title_header">
							<el-row :gutter="24">
								<el-col :span="13" :offset="11">
									<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">添加</el-button>
								</el-col>
							</el-row>
						</div>
						<el-row :gutter="24">
							<el-col :span="10">
								<el-table :data="tableData1" border class="table" ref="multipleTable" header-cell-class-name="table-header">
									<el-table-column label="操作" width="80" align="center">
										<template slot-scope="scope">
											<el-button type="text" class="red btn-ic" icon="el-icon-lx-roundclose" @click="handleDel(scope.$index, scope.row)"></el-button>
										</template>
									</el-table-column>
									<el-table-column label="编辑(已选)">
										<template scope="scope">
											<img :src="IMGdo_Url + scope.row.specialIcon" style="vertical-align: bottom;margin: 0 3px 0 0;width: 30px;height: 30px;"
											 v-if="scope.row.specialIcon!=''">
											{{scope.row.first_name}} {{scope.row.last_name}}
										</template>
									</el-table-column>
									<el-table-column label="操作" width="100" align="center">
										<template slot-scope="scope">
											<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="13" :offset="1">
								<el-table :data="tableData2" border class="table" ref="multipleTable" header-cell-class-name="table-header">
									<el-table-column label="操作" width="80" align="center">
										<template slot-scope="scope">
											<el-button type="text" class="btn-ic" icon="el-icon-lx-roundadd" @click="handlAdd(scope.$index, scope.row)"></el-button>
										</template>
									</el-table-column>
									<el-table-column label="编辑(未选)">
										<template scope="scope">
											<img :src="IMGdo_Url + scope.row.specialIcon" style="vertical-align: bottom;margin: 0 3px 0 0;width: 100px;height: 100px;"
											 v-if="scope.row.specialIcon!=''">
											{{scope.row.first_name}} {{scope.row.last_name}}
										</template>
									</el-table-column>
									<el-table-column label="操作" width="100" align="center">
										<template slot-scope="scope">
											<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
										</template>
									</el-table-column>
								</el-table>
								<div class="pagination">
									<el-pagination background layout="total, prev, pager, next" :current-page="qutitle.pageIndex" :page-size="qutitle.pageSize"
									 :total="link_Total" @current-change="handlePageChange"></el-pagination>
								</div>
							</el-col>
						</el-row>

						<!-- 添加弹出框 -->
						<el-dialog title="添加" :visible.sync="addVisible" width="600px">
							<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="120px">
								<el-form-item label="First name" prop="first_name">
									<el-input v-model="addForm.first_name"></el-input>
								</el-form-item>
								<el-form-item label="Last name" prop="last_name">
									<el-input v-model="addForm.last_name" placeholder="eg : TMR"></el-input>
								</el-form-item>
								<el-form-item label="E-mail" prop="email">
									<el-input v-model="addForm.email"></el-input>
								</el-form-item>
								<el-form-item label="Address" prop="address">
									<el-input v-model="addForm.address" type="textarea" rows="2"></el-input>
								</el-form-item>
								<el-form-item label="Interests">
									<el-input v-model="addForm.interests"></el-input>
								</el-form-item>
								<el-form-item label="ORCID (optional)">
									<el-input v-model="addForm.orcid">
										<template slot="prepend">https://orcid.org/</template>
									</el-input>
								</el-form-item>
								<el-form-item label="Website">
									<el-input v-model="addForm.website"></el-input>
								</el-form-item>
								<el-form-item label="Profile Photo">
									<el-upload class="avatar-uploader" accept='.jpg,.png,.gif' :action="IMGup_Url+'master/Special/up_icon_file'"
									 :show-file-list="false" name="specialIcon" :on-success="handleAvatarSuccess" :on-error="handleAvatarError"
									 :before-upload="beforeAvatarUpload">
										<img v-if="imageUrl" :src="imageUrl" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="addVisible = false">取 消</el-button>
								<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
							</span>
						</el-dialog>

						<!-- 编辑弹出框 -->
						<el-dialog title="编辑" :visible.sync="editVisible" width="600px">
							<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="120px">
								<el-form-item label="First name" prop="first_name">
									<el-input v-model="editForm.first_name"></el-input>
								</el-form-item>
								<el-form-item label="Last name" prop="last_name">
									<el-input v-model="editForm.last_name" placeholder="eg : TMR"></el-input>
								</el-form-item>
								<el-form-item label="E-mail" prop="email">
									<el-input v-model="editForm.email"></el-input>
								</el-form-item>
								<el-form-item label="Address" prop="address">
									<el-input v-model="editForm.address" type="textarea" rows="2"></el-input>
								</el-form-item>
								<el-form-item label="Interests">
									<el-input v-model="editForm.interests"></el-input>
								</el-form-item>
								<el-form-item label="ORCID (optional)">
									<el-input v-model="editForm.orcid">
										<template slot="prepend">https://orcid.org/</template>
									</el-input>
								</el-form-item>
								<el-form-item label="Website">
									<el-input v-model="editForm.website"></el-input>
								</el-form-item>
								<el-form-item label="Profile Photo">
									<el-upload class="avatar-uploader" accept='.jpg,.png,.gif' :action="IMGup_Url+'master/Special/up_icon_file'"
									 :show-file-list="false" name="specialIcon" :on-success="handleEditSuccess" :on-error="handleAvatarError"
									 :before-upload="beforeAvatarUpload">
										<img v-if="imageUrl" :src="imageUrl" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="editVisible = false">取 消</el-button>
								<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
							</span>
						</el-dialog>

					</template>
				</el-tab-pane>

			</el-tabs>

		</div>


	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {
		data() {
			return {
				message: 'first',
				baseForm: {},
				editForm: {},
				aid: -1,
				idx: -1,
				id: -1,
				link_Total: 0,
				imageUrl: '',
				SpecialImageUrl: '',
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				editVisible: false,
				addVisible: false,
				qutitle: {
					journal_id: this.$route.query.top_num,
					journal_special_id: this.$route.query.top_id,
					pageIndex: 1,
					pageSize: 10
				},
				editorOption: {
					placeholder: 'Please enter...'
				},
				addForm: {
					journal_id: this.$route.query.top_num
				},
				editForm: {},
				tableData1: [],
				tableData2: [],
				tableData3: [],
				rules: {
					first_name: [{
						required: true,
						message: '请输入First name',
						trigger: 'blur'
					}],
					last_name: [{
						required: true,
						message: '请输入Last name',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入E-mail',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入Address',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入Proposed title',
						trigger: 'blur'
					}],
					intro: [{
						required: true,
						message: '请输入Category',
						trigger: 'blur'
					}],
					abstract: [{
						required: true,
						message: '请输入Summary',
						trigger: 'blur'
					}],
					keywords: [{
						required: true,
						message: '请输入Keywords',
						trigger: 'blur'
					}],
					deadline: [{
						required: true,
						message: '请输入Anticipated deadline',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {

			// 获取基本信息
			getData() {
				this.$api
					.post('master/Special/getSpecialDetail', {
						'journal_special_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {

							this.baseForm = res.data.special;
							this.SpecialImageUrl = res.data.special.icon?this.IMGdo_Url + 'journalicon/'+res.data.special.icon:'';
							
							this.baseForm.first_name = res.data.editors[0].first_name;
							this.baseForm.last_name = res.data.editors[0].last_name;
							this.baseForm.email = res.data.editors[0].email;
							this.baseForm.address = res.data.editors[0].address;
							this.baseForm.interests = res.data.editors[0].interests;
							this.baseForm.orcid = res.data.editors[0].orcid;
							this.baseForm.website = res.data.editors[0].website;

							this.tableData1 = res.data.editors;

							this.tableData3 = res.data.applys;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});


				this.$api
					.post('master/Special/getSpecialEditors', this.qutitle)
					.then(res => {
						if (res.code == 0) {
							this.tableData2 = res.data.editors;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},

			// 保存基本信息
			saveBase(baseForm) {
				this.$refs.base_Form.validate((valid) => {
					if (valid) {
						if(this.baseForm.icon==''){
							this.$message.error(`请上传图片`);
									return false
						}
					
						this.$api
							.post('master/Special/editSpecialBasic', this.baseForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$message.success(`更改成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

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

			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},

			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.imageUrl = "";
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Special/addSpecialEditor', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加成功`);
									this.imageUrl = "";
									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.editVisible = true;
				if (row.specialIcon == '') {
					this.imageUrl = ''
				} else {
					this.imageUrl = this.IMGdo_Url + row.specialIcon;
				}
			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Special/editSpecialEditor', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},


			// 删除关系操作
			handleDel(index, row) {
				row.stage_id = this.$route.query.top_id;
				this.$api
					.post('master/Special/delSpecialToEditor', {
						'journal_special_id': this.$route.query.top_id,
						'journal_special_editor_id': row.journal_special_editor_id
					})
					.then(res => {
						if (res.code == 0) {
							this.$message.success('删除编辑成功');
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});;
			},
			// 添加关系操作
			handlAdd(index, row) {
				this.$api
					.post('master/Special/addSpecialToEditor', {
						'journal_id': this.$route.query.top_num,
						'journal_special_id': this.$route.query.top_id,
						'journal_special_editor_id': row.journal_special_editor_id
					})
					.then(res => {
						if (res.code == 0) {
							this.$message.success('添加编辑成功');
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.qutitle, 'pageIndex', val);
				this.getData();
			},

			// 通过/拒绝操作
			ApplyOk(index, row) {
				this.$api
					.post('master/Special/adoptEditor', row)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('通过申请客座编辑');
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			ApplyNo(index, row) {
				this.$api
					.post('master/Special/refuseEditor', row)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('拒绝申请客座编辑');
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

//上传图片
handleImageSuccess(res, file) {
				if (res.code == 0) {
					this.baseForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.SpecialImageUrl = URL.createObjectURL(file.raw);
			},
			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.specialIcon = 'specialIcon/' + res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.specialIcon = 'specialIcon/' + res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {
				// this.$message.error(res);
			},
			beforeImageUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 5;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 5M!');
				}
				return isLt2M;
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},

		},
		components: {
			quillEditor
		}
	};
</script>

<style>
	.title_header {
		margin: 20px 0;
	}

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

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

	.btn-ic i {
		font-size: 22px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.quill-editor {
		margin-bottom: 20px;
		/* height: 200px; */
	}

	.ql-toolbar {
		border: 1px solid #DCDFE6 !important;
	}

	.ql-container {
		min-height: 100px !important;
		border: 1px solid #DCDFE6 !important;
	}

	.ql-editor {
		height: 250px;
	}

	.jujue .el-radio__input.is-checked .el-radio__inner {
		border-color: #fe4b4b;
		background: #fe4b4b;
	}

	.jujue .el-radio__input.is-checked+.el-radio__label {
		color: #fe4b4b;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader_small {
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader img {
		width: 140px;
		height: 140px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}
</style>
