<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>
				<el-button type="warning" class="tishiyu" plain @click="showTips">提示语</el-button>
			</div>
			<div class="handle-box" :rules="rules">
				<el-select v-model="query.state" placeholder="请选择状态" @change="chan_id">
					<el-option label="全部" value="-1"></el-option>
					<el-option label="未审核" value="0"></el-option>
					<el-option label="通过" value="2"></el-option>
					<el-option label="拒绝" value="1"></el-option>
				</el-select>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column label="名称">
					<template scope="scope">
						{{scope.row.title}}<sup v-if="scope.row.has_sq=='1'" style="color: #fe4b4b;margin-left: 5px;font-size: 22px;">●</sup>
					</template>
				</el-table-column>
				<el-table-column prop="deadline" label="截止时间"></el-table-column>
				<el-table-column label="是否通过" width="200" align="center">
					<template scope="scope">
						<el-radio-group v-model="scope.row.state" @change="changeShow(scope.$index, scope.row)">
							<el-radio :label="2">通过</el-radio>
							<el-radio :label="1" class="jujue">拒绝</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" align="center">
					<template slot-scope="scope">
						<!-- <el-button type="text" icon="el-icon-edit">编辑</el-button> -->
						<router-link :to="{path:'/jougucon',query: {top_id: scope.row.journal_special_id,top_num: scope.row.journal_id}}"
						 style="margin-left: 10px;">
							<el-button type="text" icon="el-icon-edit">编辑</el-button>
						</router-link>
					</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="link_Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 提示语弹出框 -->
		<el-dialog title="提示语" :visible.sync="editVisible" width="50%">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
				<el-form-item label="需知" prop="agreement">
					<quill-editor ref="myTextEditor" v-model="editForm.agreement" :options="editorOption"></quill-editor>
				</el-form-item>
				<el-form-item label="成功提示语" prop="alert">
					<quill-editor ref="myTextEditor" v-model="editForm.alert" :options="editorOption"></quill-editor>
				</el-form-item>
				<el-form-item label="投稿简介" prop="intro">
					<quill-editor ref="myTextEditor" v-model="editForm.intro" :options="editorOption"></quill-editor>
				</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 {
				tableData: [],
				editVisible: false,
				editForm: {},
				title_header: "",
				idx: -1,
				id: -1,
				link_Total: 0,
				editorOption: {
					placeholder: 'Please enter...'
				},
				query: {
					journal_id: this.$route.query.top_id,
					state: '-1',
					pageIndex: 1,
					pageSize: 10
				},
				rules: {
					agreement: [{
						required: true,
						message: '请输入需知',
						trigger: 'blur'
					}],
					alert: [{
						required: true,
						message: '请输入成功提示语',
						trigger: 'blur'
					}],
					intro: [{
						required: true,
						message: '请输入投稿简介',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取客座列表数据
			getData() {
				this.$api
					.post('master/Special/getSpecialList', this.query)
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title;
							// for (let i = 0; i < res.data.specials.length; i++) {
							// 	let date = new Date(res.data.specials[i].deadline);
							// 	let Y = date.getFullYear() + '-';
							// 	let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
							// 	let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
							// 	res.data.specials[i].deadline = Y + M + D;
							// 	if(res.data.specials[i].state=='0'){
							// 		res.data.specials[i].state==''
							// 	}
							// }
							this.link_Total = res.data.count || 0;
							this.tableData = res.data.specials;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 下拉分类搜索
			chan_id(event) {
				this.getData();
			},

			//开关按钮是否启用
			changeShow(index, row) {
				this.$api
					.post('master/Special/changeSpecialState', row)
					.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.query, 'pageIndex', val);
				this.getData();
			},

			// 获取提示语操作
			showTips(index, row) {
				this.idx = index;
				this.editVisible = true;
				this.$api
					.post('master/Special/getSpecialAlert', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.editForm = res.data.alertInfo;
							this.editForm.special_alert_id = res.data.alertInfo.special_alert_id;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.editVisible = true;
			},

			// 保存提示语编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Special/editSpecialAlert', 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/Journal/delJournalAbs', 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(() => {});
			},

			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			}
		},
		components: {
			quillEditor
		}
	};
</script>

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

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

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

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

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

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

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

	.ql-editor {
		height: 150px;
	}

	.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;
	}
</style>
