<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>
		</div>
		<div class="container">
			<div class="title_header">
				<span>{{title_header}}</span><br>
			</div>
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">添加</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column label="编委类型" width="100" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type=='0'" type="warning">主编</el-tag>
						<el-tag v-if="scope.row.type=='1'" type="success">副主编</el-tag>
						<el-tag v-if="scope.row.type=='2'">编委成员</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column label="头像" width="110px" align="center">
					<template slot-scope="scope" v-if="scope.row.board_icon">
						<el-image style="width: 80px; height: 80px" :src="IMGdo_Url+scope.row.board_icon"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="dr" label="学位" width="100"></el-table-column>
				<el-table-column prop="title" label="职称" width="210"></el-table-column>
				<el-table-column prop="address" label="单位"></el-table-column>
				<el-table-column prop="country" label="国家"></el-table-column>
				<el-table-column prop="field" label="领域"></el-table-column>
				<el-table-column prop="group_name" label="分组" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type=='2' && scope.row.group_name==null" effect="plain">无</el-tag>
						<el-tag v-if="scope.row.type=='2' && scope.row.group_name!=null" effect="plain">{{scope.row.group_name}}</el-tag>
						<span v-if="scope.row.type!='2'" effect="plain"></span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加 - 编委" :visible.sync="addVisible" width="800px">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="60px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="头像" label-width="60px">
					<el-upload accept=".jpg,.png,.gif,.jpeg" class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_board_file'"
					 :show-file-list="false" name="boardIcon" :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-item label="主页" prop="website">
					<el-input v-model="addForm.website"></el-input>
				</el-form-item>
				<el-form-item label="身份" prop="type">
					<el-radio-group v-model="addForm.type">
						<el-radio label="0">主编</el-radio>
						<el-radio label="1">副主编</el-radio>
						<el-radio label="2">编委成员</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="分组" prop="board_group_id" v-if="addForm.type=='2'">
					<el-select v-model="addForm.board_group_id" filterable placeholder="请选择分组">
						<el-option :key="0" label="空" :value="0"></el-option>
						<el-option v-for="item in grouping" :key="item.board_group_id" :label="item.group_name" :value="item.board_group_id"></el-option>
					</el-select>
					<el-button type="success" plain @click="add_Group" style="margin-left: 20px;">分组管理</el-button>
					<br>
					<span style="font-size: 12px;color: #999;">注：分组是可选项，如不需分组请选"空"</span>
				</el-form-item>
				<el-form-item label="学位" :prop="addForm.journal_id==22?'':'dr'">
					<el-input v-model="addForm.dr"></el-input>
					<!-- 	<el-select v-model="addForm.dr" filterable placeholder="请选择学位">
						<el-option label="无" value=" "></el-option>
						<el-option label="Ph.D." value="Ph.D."></el-option>
						<el-option label="Post Doc." value="Post Doc."></el-option>
						<el-option label="M.D." value="M.D."></el-option>
						<el-option label="MBA" value="MBA"></el-option>
						<el-option label="MSc" value="MSc"></el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item label="职称" prop="title">
					<el-select v-model="addForm.title" filterable placeholder="请选择职称">
						<el-option v-for="item in title_options" :key="item.value" :label="item.value" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单位" prop="address">
					<el-input v-model="addForm.address"></el-input>
				</el-form-item>
				<el-form-item label="国家" prop="country">
					<el-select v-model="addForm.country" filterable placeholder="请选择国家" value-key="groupID">
						<el-option v-for="item in country" :key="item.en_name" :label="item.en_name" :value="item.en_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="领域" prop="field">
					<el-input type="textarea" :rows="2" v-model="addForm.field"></el-input>
				</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="800px">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="60px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="头像" label-width="60px">
					<el-upload accept=".jpg,.png,.gif,.jpeg" class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_board_file'"
					 :show-file-list="false" name="boardIcon" :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-item label="主页" prop="website">
					<el-input v-model="editForm.website"></el-input>
				</el-form-item>
				<el-form-item label="身份" prop="type">
					<el-radio-group v-model="editForm.type">
						<el-radio :label="0">主编</el-radio>
						<el-radio :label="1">副主编</el-radio>
						<el-radio :label="2">编委成员</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="分组" prop="board_group_id" v-if="editForm.type=='2'">
					<el-select v-model="editForm.board_group_id" filterable placeholder="请选择分组">
						<el-option :key="0" label="空" :value="0"></el-option>
						<el-option v-for="item in grouping" :key="item.board_group_id" :label="item.group_name" :value="item.board_group_id"></el-option>
					</el-select>
					<el-button type="success" plain @click="add_Group" style="margin-left: 20px;">分组管理</el-button>
					<br>
					<span style="font-size: 12px;color: #999;">注：分组是可选项，如不需分组请选"空"</span>
				</el-form-item>
				<el-form-item label="学位" :prop="addForm.journal_id==22?'':'dr'">
					<el-input v-model="editForm.dr"></el-input>
					<!-- <el-select v-model="editForm.dr" filterable placeholder="请选择学位">
						<el-option label="无" value=" "></el-option>
						<el-option label="Ph.D." value="Ph.D."></el-option>
						<el-option label="Post Doc." value="Post Doc."></el-option>
						<el-option label="M.D." value="M.D."></el-option>
						<el-option label="MBA" value="MBA"></el-option>
						<el-option label="MSc" value="MSc"></el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item label="职称" prop="title">
					<el-select v-model="editForm.title" filterable placeholder="请选择职称">
						<el-option v-for="item in title_options" :key="item.value" :label="item.value" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单位" prop="address">
					<el-input v-model="editForm.address"></el-input>
				</el-form-item>
				<el-form-item label="国家" prop="country">
					<el-select v-model="editForm.country" filterable placeholder="请选择国家" value-key="groupID">
						<el-option v-for="item in country" :key="item.en_name" :label="item.en_name" :value="item.en_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="领域" prop="field">
					<el-input type="textarea" :rows="2" v-model="editForm.field"></el-input>
				</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>

		<!-- 分组++弹出框 -->
		<el-dialog title="分组管理" :visible.sync="groupVisible" width="40%">
			<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="list_Group" style="margin-bottom: 25px;margin-top: -7px;">添加</el-button>
			<el-table :data="groupData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="group_name" label="分组名称"></el-table-column>
				<el-table-column prop="address" label="操作" width="150px" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="editProperty(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="deleProperty(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="groupVisible = false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分组++添加 -->
		<el-dialog title="添加 - 分组" :visible.sync="groupBroperty" width="25%">
			<el-form ref="GPad_Form" :model="GPadForm" :rules="rules" label-width="85px">
				<el-form-item label="分组名称" prop="group_name">
					<el-input v-model="GPadForm.group_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="groupBroperty = false">取 消</el-button>
				<el-button type="primary" @click="saveGpPad(GPadForm)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分组++编辑 -->
		<el-dialog title="编辑 - 分组" :visible.sync="groupProperty" width="25%">
			<el-form ref="GPet_Form" :model="GPetForm" :rules="rules" label-width="85px">
				<el-form-item label="分组名称" prop="group_name">
					<el-input v-model="GPetForm.group_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="groupProperty = false">取 消</el-button>
				<el-button type="primary" @click="editGpPet(GPetForm)">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				editVisible: false,
				addVisible: false,
				groupVisible: false,
				groupProperty: false,
				groupBroperty: false,
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				editForm: {},
				addForm: {
					journal_id: this.$route.query.top_id,
					board_icon: '',
					field: '',
					type: '0'
				},
				groupData: {},
				GPetForm: {
					journal_id: this.$route.query.top_id
				},
				GPadForm: {
					journal_id: this.$route.query.top_id
				},
				title_header: "",
				idx: -1,
				ixd: -1,
				ixdd: -1,
				iddx: -1,
				id: -1,
				grouping: [],
				country: [],
				title_options: [{
						value: 'Instructor'
					},
					{
						value: 'Assistant Professor'
					},
					{
						value: 'Senior Assistant Professor'
					},
					{
						value: 'Associate Professor'
					},
					{
						value: 'Senior Associate professor'
					},
					{
						value: 'Professor'
					},
					{
						value: 'Researcher'
					},
					{
						value: 'Associate Researcher'
					},
					{
						value: 'Assistant Researcher'
					},
					{
						value: 'RN'
					},
					{
						value: 'Research Fellow'
					},
					{
						value: 'Associate Research Scientist'
					},
					{
						value: 'Research Scientist'
					},
					{
						value: 'Senior Research Fellow'
					},
					{
						value: 'Senior Lecturer'
					},
					{
						value: 'Physician'
					},
					{
						value: 'Attending Physician'
					},
					{
						value: 'Associate Chief Physician'
					},
					{
						value: 'Chief Physician'
					},
					{
						value: 'Senior Research Scientist'
					},
					{
						value: 'Honorary Senior Research Fellow'
					},
					{
						value: 'Director'
					},
					{
						value: 'Executive Director'
					},
					{
						value: 'Sr. Bioinformatics Scientist'
					},
					{
						value: 'Psychotherapist'
					},
					{
						value: 'Postdoctoral Researcher'
					},
					{
						value: 'Managing Editor'
					},
					{
						value: 'Scientific Editor'
					},
					{
						value: 'Producion Editor'
					},
					{
						value: 'Assistant Editor'
					},
					{
						value: 'Engineer'
					},
					{
						value: 'Lecturer'
					},
					{
						value: 'Senior Investigator'
					},
					{
						value: '教授'
					},
					{
						value: '副教授'
					},
					{
						value: '讲师'
					},
					{
						value: '主任医师'
					},
					{
						value: '副主任医师'
					},
					{
						value: '主治医师'
					},
					{
						value: '主任中医师'
					},
					{
						value: '副主任中医师'
					}
				],
				rules: {
					group_name: [{
						required: true,
						message: '请输入分组名称',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入编委姓名',
						trigger: 'blur'
					}],
					website: [{
						required: true,
						message: '请输入个人主页地址',
						trigger: 'blur'
					}],
					dr: [{
						required: true,
						message: '请输入学位',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入职称',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入单位',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: '请选择国家',
						trigger: 'blur'
					}],
					board_group_id: [{
						required: true,
						message: '请选择分组',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择编委身份',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取编委列表数据
			getData() {
				this.addForm.journal_id = this.$route.query.top_id;
				this.$api
					.post('/master/Journal/getBoardList', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title;
							this.tableData = res.data.boards;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Journal/getBoardGroups', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.grouping = res.data.groups;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Article/getCountrys')
					.then(res => {
						if (res.code == 0) {
							this.country = res.data.countrys;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.imageUrl = "";
			},
			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.type != '2') {
					this.addForm.board_group_id = '0'
				}
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/addBoard', 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.board_icon) {
					this.imageUrl = this.IMGdo_Url + row.board_icon;
					this.editForm.board_icon = row.board_icon
				} else {
					this.imageUrl = ''
					this.editForm.board_icon = ''
				}
			},
			// 保存编辑
			saveEdit(editForm) {
				if (this.editForm.type != '2') {
					this.editForm.board_group_id = '0'
				}
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/editBoard', 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;
					}
				});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delBoard', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},


			// 分组---弹出操作
			add_Group(index, row) {
				this.ixd = index;
				this.$api
					.post('master/Journal/getBoardGroups', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.groupData = res.data.groups;
							this.groupVisible = true;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			list_Group(index, row) {
				this.ixdd = index;
				this.groupBroperty = true;
			},
			editProperty(index, row) {
				this.iddx = index;
				this.GPetForm = Object.assign({}, row);
				this.groupProperty = true;
			},
			// 分组---保存添加
			saveGpPad(GPadForm) {
				this.$refs.GPad_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/addBoardGroup', this.GPadForm)
							.then(res => {
								if (res.code == 0) {
									this.groupBroperty = false;
									this.$refs.GPad_Form.resetFields();
									this.$message.success(`添加成功`);
									this.$api
										.post('master/Journal/getBoardGroups', {
											'journal_id': this.$route.query.top_id
										})
										.then(res => {
											if (res.code == 0) {
												this.groupData = res.data.groups;
												this.grouping = res.data.groups;
											} else {
												this.$message.error(res.msg);
											}
										})
										.catch(err => {
											this.$message.error(err);
										});
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});

			},
			// 分组---保存编辑
			editGpPet(GPetForm) {
				this.$refs.GPet_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/editBoardGroup', this.GPetForm)
							.then(res => {
								if (res.code == 0) {
									this.groupProperty = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.$api
										.post('master/Journal/getBoardGroups', {
											'journal_id': this.$route.query.top_id
										})
										.then(res => {
											if (res.code == 0) {
												this.groupData = res.data.groups;
												this.grouping = res.data.groups;
											} else {
												this.$message.error(res.msg);
											}
										})
										.catch(err => {
											this.$message.error(err);
										});
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 分组---删除操作
			deleProperty(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delBoardGroup', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.$api
										.post('master/Journal/getBoardGroups', {
											'journal_id': this.$route.query.top_id
										})
										.then(res => {
											if (res.code == 0) {
												this.groupData = res.data.groups;
												this.grouping = res.data.groups;
											} else {
												this.$message.error(res.msg);
											}
										})
										.catch(err => {
											this.$message.error(err);
										});
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			//上传头像
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.board_icon = 'boardIcon/' + res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.board_icon = 'boardIcon/' + res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},

		}
	};
</script>

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

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

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

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.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-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}

	.avatar-uploader_small .el-upload {
		width: 80px;
		height: 80px;
	}

	.avatar-uploader_small .avatar-uploader-icon {
		line-height: 80px;
		margin-left: -30px;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}
</style>
