<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-global"></i> 底栏管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<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="footer_id" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 :default-expand-all="true" :tree-props="{children: 'children', hasChildren: true}">
				<el-table-column prop="footer_title" label="标题"></el-table-column>
				<el-table-column prop="sort" label="权重" width="80" align="center"></el-table-column>
				<el-table-column label="操作" width="140" align="center">
					<template slot-scope="scope" v-if="scope.row.footer_id!='Publishing Policy'&&scope.row.footer_id!='Join Us'&&scope.row.footer_id!='Products'&&scope.row.footer_id!='Cooperate with Us'&&scope.row.footer_id!='Publisher Information'">
						<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="85px">
				<el-form-item label="分组" prop="footer_group">
					<el-select v-model="addForm.footer_group" filterable value-key="groupID">
						<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题" prop="footer_title">
					<el-input v-model="addForm.footer_title"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<quill-editor ref="myTextEditor" v-model="addForm.content" :options="editorOption"></quill-editor>
				<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_footer_file'" name="journalfooter"
				 :show-file-list="false" :on-success="uploadSuccess">
				</el-upload>
				</el-form-item>
				<el-form-item label="权重">
					<el-input-number v-model="addForm.sort" :min="0"></el-input-number>
				</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="85px">
				<el-form-item label="分组">
					<p style="margin: 0 0 0 15px;">{{ellipsis(editForm.footer_group)}}</p>
				</el-form-item>
				<el-form-item label="标题" prop="footer_title">
					<el-input v-model="editForm.footer_title"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<quill-editor ref="myTextEditor" v-model="editForm.content" :options="editorOption"></quill-editor>
				<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_footer_file'" name="journalfooter"
				 :show-file-list="false" :on-success="uploadSuccess">
				</el-upload>
				</el-form-item>
				<el-form-item label="权重">
					<el-input-number v-model="editForm.sort" :min="0"></el-input-number>
				</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>
</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 {
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				IMGqi_Url: this.IMGqiURL,
				addForm: {
					sort: 0,
				},
				addVisible: false,
				editVisible: false,
				editForm: {},
				tableData: [],
				editorOption: {
					placeholder: 'Please enter...'
				},
				options: [{
					id: 1,
					title: 'Publishing Policy',
				}, {
					id: 2,
					title: 'Join Us',
				}, {
					id: 3,
					title: 'Products',
				}, {
					id: 4,
					title: 'Cooperate with Us',
				}, {
					id: 5,
					title: 'Publisher Information',
				}],
				editorOption: {
					placeholder: 'Please enter...',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								['blockquote', 'code-block'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'indent': '-1'
								}, {
									'indent': '+1'
								}],
								[{
									'direction': 'rtl'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'font': []
								}],
								[{
									'align': []
								}],
								['link', 'image', 'video']
							],
							// 工具栏
							handlers: {
								image: function(value) {
									if (value) {
										// upload点击上传事件
										document.querySelector('.avatar-uploader input').click()
									} else {
										this.quill.format('image', false)
									}
								}
							}
						}
					}
				},
				rules: {
					footer_title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					footer_group: [{
						required: true,
						message: '请选择分组',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入消息内容',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取footer列表数据
			getData() {
				this.$api
					.post('master/Footer/getFooterList')
					.then(res => {
						if (res.code == 0) {
							this.tableData=[]
							let fot_data = res.data.footers;
							for (let i in fot_data) {
								this.tableData.push({
									footer_title: i,
									footer_id: i,
									children: fot_data[i],
								})
							}
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.addVisible = true;
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Footer/addFooter', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.addForm.sort = 0;
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						return false;
					}
				});

			},
			// 编辑操作
			handleEdit(index, row) {
				this.editForm = Object.assign({}, row);
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Footer/editFooter', this.editForm)
							.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;
					}
				});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Footer/delFooter', 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(() => {});
			},
			// 分组回显
			ellipsis(value){
				if (value == 1) {
					return 'Publishing Policy';
				} else if (value == 2) {
					return 'Join Us';
				} else if (value == 3) {
					return 'Products';
				} else if (value == 4) {
					return 'Cooperate with Us';
				} else if (value == 5) {
					return 'Publisher Information';
				}else{
					return 'None';
				}
			},
			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
			// 上传成功
			uploadSuccess(res) {
				let quill = this.$refs.myTextEditor.quill;
				// 获取光标所在位置
				let length = quill.getSelection().index
				// 插入图片 res.upurl为服务器返回的图片地址
				quill.insertEmbed(length, 'image', this.IMGqi_Url + 'journalfooter/' + res.upurl)
				// 调整光标到最后
				quill.setSelection(length + 1)
			}
		},
		components: {
			quillEditor
		},
	};
</script>

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

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

	.red {
		color: #e71313;
	}
	
	.avatar-uploader {
		height: 0;
	}
	
	.avatar-uploader .el-upload--text {
		height: 0 !important;
		border: 0;
	}
</style>
