<template>
	<div class="">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-copy"></i> 文章管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box" :rules="rules">
				<el-cascader :options="options" v-model="query.options" :props="defaultParams" placeholder="请选择期刊分期" class="mr10"
				 @change="chan_id" style="width: 300px;"></el-cascader>
				<el-input v-model="query.seach" placeholder="请输入关键字" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<!-- <el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="add_Selection">添加</el-button> -->
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column label="药剂话题" width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.med_title!=''">
							<div v-html="scope.row.med_title"></div>
							<div v-html="scope.row.med_ename"></div>
							<el-button type="danger" @click="DelteMize(scope.$index, scope.row)" style="margin: 5px 0 0 0;">删除</el-button>
						</div>
						<div v-if="scope.row.med_title==''">
							<el-input v-model="scope.row.med_title0" placeholder="药剂话题名"></el-input>
							<el-input v-model="scope.row.med_ename0" placeholder="药剂英文名" style="margin: 10px 0;"></el-input>
							<el-button type="primary" @click="saveMize(scope.$index, scope.row)">确 定</el-button>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="文章标题">
					<template slot-scope="scope">
						<div v-html="scope.row.title"></div>
					</template>
				</el-table-column>
				<el-table-column prop="journal_title" label="所属期刊" width="260"></el-table-column>
				<el-table-column label="所属分期" width="260">
					<template slot-scope="scope">
						{{scope.row.stage_year}} Vol. {{scope.row.stage_vol}} Issue. {{scope.row.stage_no}} {{scope.row.stage_pagename}}
						{{scope.row.stage_page}}
					</template>
				</el-table-column>
				<el-table-column :label="'ICMJE\nDISCLOSURE\nFORM'" width="120" align="center">
					<template slot-scope="scope">
						<el-button icon="el-icon-check" type="text" style="color: #0fa31d;" v-if="scope.row.file_cdf!=''"></el-button>
						<el-button icon="el-icon-close" type="text" style="color: #ff0000" v-if="scope.row.file_cdf==''"></el-button>
					</template>
				</el-table-column>
				<el-table-column label="doi" width="80" align="center">
					<template slot-scope="scope">
						<el-button icon="el-icon-check" type="text" style="color: #0fa31d;" v-if="scope.row.doi!=''"></el-button>
						<el-button icon="el-icon-close" type="text" style="color: #ff0000" v-if="scope.row.doi==''"></el-button>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="权重" width="100" align="center"></el-table-column>
				<el-table-column label="操作" width="260" align="center">
					<template slot-scope="scope">
						<div v-if="use_rol != 0">
							<router-link :to="{path:'/arttext',query: {article_num: scope.row.article_id}}" style="margin-right: 10px;">
								<el-button type="text" icon="el-icon-edit">编辑</el-button>
							</router-link>
							<router-link :to="{path:'/artquote',query: {journal_num: scope.row.journal_id , article_num: scope.row.article_id}}"
							 style="margin-right: 10px;">
								<el-button type="text" icon="el-icon-document" class="green">引用</el-button>
							</router-link>
							<router-link :to="{path:'/artrelate',query: {journal_num: scope.row.journal_id , article_num: scope.row.article_id}}"
							 style="margin-right: 10px;">
								<el-button type="text" icon="el-icon-document-copy" class="orange">相关文章</el-button>
							</router-link>
							<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</div>
						<div v-if="use_rol == 0">
							<router-link :to="{path:'/arttextLook',query: {article_num: scope.row.article_id}}">
								<el-button type="text" icon="el-icon-view">查看文章</el-button>
							</router-link>
						</div>
					</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>

			<!-- 添加弹出框 -->
			<el-dialog title="添加" :visible.sync="addVisible" width="30%">
				<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="100px">
					<el-form-item label="文章标题" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
					<el-form-item label="所属期刊分期">
						<el-cascader :options="optionx" v-model="addForm.optionx" :props="defaultParams" placeholder="请选择期刊分期" class="mr10"
						 @change="ched_id" style="width: 300px;"></el-cascader>
					</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="mizeREVisible" width="500px">
				<el-form ref="mize_Form" :model="mizeREForm" :rules="rules" label-width="100px">
					<el-form-item label="药剂话题名" prop="med_title">
						<div>{{mizeREForm.med_title}}</div>
					</el-form-item>
					<el-form-item label="药剂英文名" prop="med_ename">
						<div>{{mizeREForm.med_ename}}</div>
					</el-form-item>
				</el-form>
				<p style="margin: 0 0 0 20px;color: #d10a0a;">
					当前药剂话题已存在。
					<br>如果您点击确认，文章将会添加到之前已经建立的药剂话题（一般出现在相同药方名且配伍相同的情况）。
					<br>如果您点击取消，请重新取名后提交（一般出现在相同药方名但配伍不同的情况）。
					<br>PS. 建议重新取名以以下形式 比如： {{mizeREForm.med_title}}B
				</p>
				<span slot="footer" class="dialog-footer">
					<el-button @click="mizeREVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveREMize(mizeREForm)">确 定</el-button>
				</span>
			</el-dialog>

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

<script>
	export default {
		name: 'art_cle',
		data() {
			return {
				use_rol: localStorage.getItem('admin_role'),
				query: {
					editor_id: localStorage.getItem('admin_id'),
					journal_id: "0",
					journal_stage_id: "0",
					options: '0',
					seach: '',
					pageIndex: 1,
					pageSize: 10
				},
				options: [],
				optionx: [],
				defaultParams: {
					label: 'title',
					value: 'journal_stage_id',
					children: 'children'
				},
				tableData: [],
				mizeForm: {
					med_title: '',
					med_ename: '',
				},
				mizeREForm: {},
				mizeVisible: false,
				mizeREVisible: false,
				addForm: {
					sort: 0,
					optionx: '',
					journal_id: '',
					journal_stage_id: '',
				},
				addVisible: false,
				link_Total: 0,
				aid: -1,
				idx: -1,
				id: -1,
				rules: {
					title: [{
						required: true,
						message: '请输入文章标题',
						trigger: 'blur'
					}],
					med_title: [{
						required: true,
						message: '请输入药剂话题名',
						trigger: 'blur'
					}],
					med_ename: [{
						required: true,
						message: '请输入药剂英文名',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
			this.getEditor();
		},
		methods: {
			// 获取文章列表数据
			getData() {
				loading: true;
				if (this.use_rol == 0) {
					delete this.query.editor_id;
				}
				this.$api
				.post('master/Article/getArticleList', this.query)
				.then(res => {
					if (res.code == 0) {
						this.link_Total = res.data.count || 0;
						for (var i in res.data.articleList) {
							res.data.articleList[i].med_title0 = '';
							res.data.articleList[i].med_ename0 = '';
						}
						this.tableData = res.data.articleList;
						loading: false;
					} else {
						this.$message.error(res.msg);
					}
				})
				.catch(err => {
					this.$message.error(err);
				});
			},
			//获取期刊下拉数据搜索
			getEditor() {
				if (this.use_rol == 0) {
					this.$api
						.post('master/Journal/getJournalsAndStage')
						.then(res => {
							if (res.code == 0) {
								for (var i in res.data.joutaglist) {
									res.data.joutaglist[i].journal_stage_id = res.data.joutaglist[i].journal_id;
								}
								res.data.joutaglist.unshift({
									journal_stage_id: '0',
									title: '全部'
								});
								this.options = res.data.joutaglist;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$api
						.post('master/Article/getJournalAndStage', this.query)
						.then(res => {
							if (res.code == 0) {
								res.data.joutaglist.unshift({
									journal_stage_id: '0',
									title: '全部'
								});
								this.options = res.data.joutaglist;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				};

			},
			// 下拉分类搜索
			chan_id(event) {
				this.query.journal_id = event[0];
				if (this.query.journal_id == "0") {
					this.query.journal_stage_id = "0";
				} else {
					this.query.journal_stage_id = event[1];
				}
				this.getData();
			},
			// 搜索
			handleSearch() {
				this.getData();
			},
			//获取期刊下拉数据添加
			getEditor_() {
				this.$api
					.post('master/Article/getJournalAndStage', this.query)
					.then(res => {
						if (res.code == 0) {
							this.optionx = res.data.joutaglist;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 下拉分类添加
			ched_id(event) {
				this.addForm.journal_id = event[0];
				this.addForm.journal_stage_id = event[1];
			},
			// 添加操作
			add_Selection(index, row) {
				this.getEditor_();
				this.aid = index;
				this.addf = row;
				this.addVisible = true;
			},
			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.journal_id == '') {
					this.$message.error("请选择期刊分期！");
				} else {
					this.$refs.add_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Article/addArticleBase', this.addForm)
								.then(res => {
									if (res.code == 0) {
										this.$refs.add_Form.resetFields();
										this.$message.success(`添加成功`);
										this.addForm.optionx = [];
										this.addForm.journal_id = '';
										this.addForm.journal_stage_id = '';
										this.addForm.sort = 0;
										this.addVisible = false;
										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/Article/delArticle', 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(() => {});
			},

			// 保存中英文话题分类
			saveMize(index, row) {
				this.mizeForm.article_id = row.article_id
				this.mizeForm.med_ename = row.med_ename0
				this.mizeForm.med_title = row.med_title0
				this.$api
					.post('master/Medicament/addMedicament', this.mizeForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('添加成功');
							this.getData();
						} else if (res.code == 2) {
							this.mizeREForm = res.data
							this.mizeREForm.article_id = this.mizeForm.article_id
							this.mizeREVisible = true;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},
			// 保存中英文话题分类-重复
			saveREMize(mizeREForm) {
				this.$api
					.post('master/Medicament/addMedicamentHas', this.mizeREForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('添加成功');
							this.mizeREVisible = false;
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 删除中英文话题分类
			DelteMize(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Medicament/delMedicament', 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(() => {});

			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			}
		},
		computed: {

		}
	}
</script>

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

	.handle-select {
		width: 180px;
	}

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

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

	.red {
		color: #ff0000;
	}

	.green {
		color: #0fa31d;
	}

	.orange {
		color: #f1960f;
	}

	.mr10 {
		margin-right: 10px;
	}

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

	.el-table th>.cell {
		white-space: pre-line;
	}
</style>
