<template>
	<div class="">
		<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>
			</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" row-key="journal_topic_id" border class="table" ref="multipleTable"
			 header-cell-class-name="table-header" :tree-props="{children: 'children', hasChildren: true}">
				<el-table-column prop="title" label="话题"></el-table-column>
				<el-table-column label="封面" align="center" width="160">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" v-if="scope.row.parent_id!='0'||scope.row.is_final!='0'&&scope.row.position!='highlights'"
						 :src="IMGdo_Url+'journaltopic/'+scope.row.icon"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="权重" width="100" align="center"></el-table-column>
				<el-table-column label="操作" width="200" align="left">
					<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>
						<router-link :to="{path:'/jouticl',query: {top_id: scope.row.journal_topic_id,top_num: scope.row.journal_id}}"
						 style="margin-left: 10px;">
							<el-button type="text" v-if="scope.row.is_final=='1'" icon="el-icon-lx-text" class="orange">文章</el-button>
						</router-link>
					</template>
				</el-table-column>
			</el-table>

			<!-- 添加弹出框 -->
			<el-dialog title="添加" :visible.sync="addVisible" width="500px">
				<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px">
					<el-form-item label="话题" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
					<el-form-item label="所属父级">
						<el-select v-model="addForm.parent_id" prop="parent_id" filterable placeholder="请选择所属父级" value-key="groupID"
						 @change="chan_id($event)">
							<el-option key="0" label="无" value="0"></el-option>
							<el-option v-for="item in options" :key="item.journal_topic_id" :label="item.level=='1'?item.title:(item.level!='1'?'\xa0\xa0\xa0':'')+item.title"
							 :value="item.journal_topic_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="页面位置" v-if="addForm.parent_id=='0'">
						<el-radio-group v-model="addForm.position" @change="agree_id($event)">
							<el-radio label="top">Top</el-radio>
							<el-radio label="left">Left</el-radio>
							<el-radio label="highlights">Highlights</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="是否是最后一层">
						<el-radio-group v-model="addForm.is_final">
							<el-radio label="1">是</el-radio>
							<el-radio label="0" :disabled="fal_sel">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="介绍">
						<el-input v-model="addForm.intro" type="textarea" rows="3"></el-input>
					</el-form-item>
					<el-form-item label="权重">
						<el-input-number v-model="addForm.sort" :min="0"></el-input-number>
					</el-form-item>
					<el-form-item label="封面" label-width="150px" v-if="addForm.parent_id!='0'">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_topic_file'" :show-file-list="false"
						 name="journaltopic" :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="come" v-if="addForm.parent_id!='0'">
						<el-input v-model="addForm.come"></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="500px">
				<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
					<el-form-item label="话题" prop="title">
						<el-input v-model="editForm.title"></el-input>
					</el-form-item>
					<el-form-item label="页面位置" v-if="editForm.parent_id=='0'">
						<el-radio-group v-model="editForm.position">
							<el-radio label="top" v-if="editForm.position!='highlights'">Top</el-radio>
							<el-radio label="left" v-if="editForm.position!='highlights'">Left</el-radio>
							<el-radio label="highlights" v-if="editForm.position=='highlights'">Highlights</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="介绍">
						<el-input v-model="editForm.intro" type="textarea" rows="3"></el-input>
					</el-form-item>
					<el-form-item label="权重">
						<el-input-number v-model="editForm.sort" :min="0"></el-input-number>
					</el-form-item>
					<el-form-item label="封面" label-width="150px" v-if="editForm.parent_id!='0'">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_topic_file'" :show-file-list="false"
						 name="journaltopic" :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="come" v-if="editForm.parent_id!='0'">
						<el-input v-model="editForm.come"></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>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {
					position: 'top',
					sort: 0,
					parent_id: "0",
					is_final: "1",
					intro: "",
					icon: "",
					come: ""
				},
				tableData: [],
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				editVisible: false,
				addVisible: false,
				aid: -1,
				editForm: {
					icon: ""
				},
				idx: -1,
				id: -1,
				fal_sel: false,
				title_header: "",
				idform: {},
				options: [],
				rules: {
					title: [{
						required: true,
						message: '请输入话题',
						trigger: 'blur'
					}],
					parent_id: [{
						required: true,
						message: '请选择所属父级',
						trigger: 'blur'
					}],
					come: [{
						required: true,
						message: '请输入摄图网版权授权合同链接',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取话题列表数据
			getData() {
				this.idform.journal_id = this.$route.query.top_id;
				this.addForm.journal_id = this.$route.query.top_id;
				this.$api
					.post('master/Journal/getTopicList', this.idform)
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title;
							this.tableData = res.data.topicList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			//获取下拉父级数据
			getEditor() {
				this.$api
					.post('master/Journal/getParent', this.idform)
					.then(res => {
						if (res.code == 0) {
							// let fuji_list = [];
							// for (var i = 0; i < res.data.parentList.length; i++) {
							// 	for (var j = 0; j < res.data.parentList[i].length; j++) {
							// 		fuji_list.push(res.data.parentList[i][j]);
							// 	}
							// }
							this.options = res.data.parentList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 下拉父级改变子元素
			chan_id(event) {
				for (var i = 0; i < this.options.length; i++) {
					if (this.options[i].journal_topic_id == event) {
						if (this.options[i].level == "2") {
							this.addForm.is_final = "1";
							this.fal_sel = true;
							this.addForm.position = 'top';
							break;
						} else {
							this.fal_sel = false;
						}
					} else {
						this.fal_sel = false;
					}
				}
			},
			// 单选Highlights情况
			agree_id(event) {
				if (event == 'highlights') {
					this.addForm.is_final = "1";
					this.fal_sel = true;
				} else {
					this.fal_sel = false;
				}

			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.getEditor();
				this.imageUrl = "";
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delTopic', 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(() => {});
			},

			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.parent_id == '0') {
					this.$refs.add_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Journal/addTopic', this.addForm)
								.then(res => {
									if (res.code == 0) {
										this.addVisible = false;
										this.$refs.add_Form.resetFields();
										this.$message.success(`添加成功`);
										this.addForm.is_final = "1";
										this.addForm.parent_id = "0";
										this.fal_sel = false;
										this.addForm.position = 'top';
										this.addForm.sort = 0;
										this.imageUrl = "";
										this.getData();
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error('error submit!!');
							return false;
						}
					});
				} else {
					if (this.addForm.icon == '') {
						this.$message.error("请插入封面！");
					} else if (this.addForm.come == '') {
						this.$message.error("请输入摄图网版权授权合同链接！");
					} else {
						this.$refs.add_Form.validate((valid) => {
							if (valid) {
								this.$api
									.post('master/Journal/addTopic', this.addForm)
									.then(res => {
										if (res.code == 0) {
											this.addVisible = false;
											this.$refs.add_Form.resetFields();
											this.$message.success(`添加成功`);
											this.addForm.is_final = "1";
											this.addForm.parent_id = "0";
											this.fal_sel = false;
											this.addForm.position = 'top';
											this.addForm.sort = 0;
											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;
				this.imageUrl = this.IMGdo_Url + 'journaltopic/' + row.icon;
			},
			// 保存编辑
			saveEdit(editForm) {
				if (this.editForm.parent_id == '0') {
					this.$refs.edit_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Journal/editTopic', 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;
						}
					});
				} else {
					if (this.editForm.come == '') {
						this.$message.error("请输入摄图网版权授权合同链接！");
					} else {
						this.$refs.edit_Form.validate((valid) => {
							if (valid) {
								this.$api
									.post('master/Journal/editTopic', 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;
							}
						});
					}
				}
			},
			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.icon = 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;
			},

		},
		computed: {

		}
	}
</script>

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

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

	.handle-select {
		width: 120px;
	}

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

	.handle-pwd {
		cursor: pointer;
	}

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

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

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

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}

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

	.red {
		color: #ff0000;
	}

	.orange {
		color: #e6a23c;
	}

	.mr10 {
		margin-right: 10px;
	}

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

	.upload-demo .el-upload {
		width: 55px;
		float: left;
		margin-left: 5px;
	}

	.el-upload-list {
		margin-top: 4px;
		margin-left: 10px;
		float: left;
		width: 30px;
	}

	.el-upload-list .el-upload-list__item {
		width: 30px !important;
	}

	.el-upload-list .el-upload-list__item:hover {
		cursor: pointer;
	}

	.el-upload-list .el-upload-list__item .el-upload-list__item-name {
		width: 30px;
	}

	.el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
		display: none;
	}

	.el-upload-list__item:hover .el-icon-close {
		display: none;
	}

	.red {
		color: #ff0000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		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 {
		width: 140px;
		height: 140px;
		display: block;
	}

	.upload-demo .el-upload {
		border: none;
		text-align: left;
		height: 35px;
	}

	.upload-demo .el-upload-list__item:first-child {
		margin-top: 0;
		width: 300px;
	}
</style>
