<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 v-html="title_header"></span>
			</div>

			<el-form ref="form_Data" :model="formData" label-width="70px">
				<el-form-item label="期刊列表">
					<el-checkbox-group v-model="formData.journal" value-key='journal_id' style="margin-left: 60px;">
						<el-checkbox v-for="item in listjour" style="display:block;" name="journal" :label="item.journal_id+''" :key="item.journal_id"
						 @change="chan_journal($event,item)">{{item.title}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>

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

<script>
	export default {
		data() {
			return {
				formData: {
					journal: []
				},
				listjour: [],
				title_header: "",
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取期刊列表数据
			getData() {
				this.$api
					.post('master/Journal/getJournalAll', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.listjour = res.data.journalList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Journal/getJournalralet', {
						'journal_id': this.$route.query.top_id
					})
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title

							let wzht_list = [];
							for (var i = 0; i < res.data.journals.length; i++) {
								wzht_list.push(res.data.journals[i].journal_id + '');
							};
							this.formData.journal = wzht_list;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 选择相关期刊
			chan_journal($event, val) {
				if ($event == true) {
					this.$api
						.post('master/Journal/addJournalralet', {
							'journal_id': this.$route.query.top_id,
							'relat_id': val.journal_id
						})
						.then(res => {
							if (res.code == 0) {
								this.getData();
							} else {
								this.$message.error(res.msg);
								this.getData();
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$api
						.post('master/Journal/delJournalralet', {
							'journal_id': this.$route.query.top_id,
							'relat_id': val.journal_id
						})
						.then(res => {
							if (res.code == 0) {
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},
		},
		computed: {

		}
	}
</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>
