<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-item>时间轴文章</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="title_header">
				<el-row :gutter="24">
					<el-col :span="14">
						<span>{{title_header}}</span>
					</el-col>
					<el-col :span="9" :offset="1">
						<el-input v-model="qutitle.title" placeholder="请输入标题关键字" style="width: 250px;"
						 class="handle-input mr10"></el-input>
					</el-col>
				</el-row>
			</div>
			<el-row :gutter="24">
				<el-col :span="14">
					<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 prop="title" label="文章标题(已选)"></el-table-column>
					</el-table>
				</el-col>
				<el-col :span="9" :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 prop="title" label="文章标题(未选)"></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>


		</div>
	</div>
</template>

<script>
	const delay = (function() {
		let timer = 0
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms)
		}
	})();
	export default {
		data() {
			return {
				qutitle: {
					journal_id: this.$route.query.top_num,
					journal_line_id: this.$route.query.time_id,
					pageIndex: 1,
					pageSize: 15,
					title: ''
				},
				link_Total: 0,
				title_header: "",
				tableData1: [],
				tableData2: []
			};
		},
		created() {
			this.getData();
		},
		watch: {
			"qutitle.title"() {
				delay(() => {
					// this.fetchData();
					this.getData();
				}, 300);
			}
		},
		methods: {
			// 获取文章列表数据
			getData() {
				this.$api
					.post('master/Journal/getJournalLineArt', {'journal_line_id':this.$route.query.time_id})
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journalLine.title
							this.tableData1 = res.data.articles;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('master/Journal/getArticleByLine', this.qutitle)
					.then(res => {
						if (res.code == 0) {
							this.tableData2 = res.data.dataList;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			
			// 删除文章操作
			handleDel(index, row) {
				row.stage_id = this.$route.query.top_id;
				this.$api
					.post('master/Journal/delJournalLineArt', {'article_to_line_id':row.article_to_line_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/Journal/addJournalLineArt', {'journal_line_id':this.$route.query.time_id,'article_id':row.article_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();
			}
		},
		computed: {

		},
		mounted() {},
	}
</script>

<style>
	.title_header {
		margin-bottom: 20px;
	}
	.table {
		width: 100%;
		font-size: 14px;
	}
	
	.btn-ic i{
		font-size: 22px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

</style>
