<template>
	<div>
		<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="title_header">
				<span>{{title_header}}</span>
			</div>
			<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" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="journal_name" label="所引期刊"></el-table-column>
				<el-table-column prop="article_name" label="所引文章"></el-table-column>
				<el-table-column prop="factor" label="影响因子" width="100"></el-table-column>
				<el-table-column prop="date" label="出版时间" align="center" width="140"></el-table-column>
				<el-table-column label="截图留存" align="center" width="160">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="IMGdo_Url+'articleCite/'+scope.row.img" :preview-src-list="srcList"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="120">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state == '0'" type="primary">审核中</el-tag>
						<el-tag v-if="scope.row.state == '1'" type="success">通过</el-tag>
						<el-tag v-if="scope.row.state == '2'" type="danger">驳回</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="30%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="所引期刊" prop="journal_name">
					<el-input v-model="addForm.journal_name"></el-input>
				</el-form-item>
				<el-form-item label="所引文章" prop="article_name">
					<el-input v-model="addForm.article_name"></el-input>
				</el-form-item>
				<el-form-item label="影响因子" prop="factor">
					<el-input-number v-model="addForm.factor" :precision="2" :step="0.1"></el-input-number>
				</el-form-item>
				<el-form-item label="出版时间" prop="adate">
					<el-date-picker v-model="addForm.adate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="截图留存">
					<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Article/up_cite_file'" :show-file-list="false" name="articleCite"
					 :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</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>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					article_id: this.$route.query.article_num
				},
				addForm: {
					article_id: this.$route.query.article_num,
					journal_id: this.$route.query.journal_num
				},
				tableData: [],
				srcList: [], //大图
				addVisible: false,
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				aid: -1,
				title_header: '',
				id: -1,
				rules: {
					journal_name: [{
						required: true,
						message: '请输入期刊名',
						trigger: 'blur'
					}],
					article_name: [{
						required: true,
						message: '请输入文章名',
						trigger: 'blur'
					}],
					factor: [{
						required: true,
						message: '请输入影响因子',
						trigger: 'blur'
					}],
					adate: [{
						required: true,
						message: '请输入引用时间',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取引用列表数据
			getData() {
				this.$api
					.post('master/Article/getCitesByArticle', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.cites;
							this.title_header = res.data.article.title;
							res.data.cites.forEach((item) => {
								this.srcList.push(this.IMGdo_Url+'articleCite/'+item.img);
							});
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.imageUrl = "";
			},
			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.img == undefined) {
					this.$message.error("请插入截图");
				} else {
					this.$refs.add_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Article/addArticleCite', this.addForm)
								.then(res => {
									if (res.code == 0) {
										this.addVisible = false;
										this.$refs.add_Form.resetFields();
										this.$message.success(`添加成功`);
										this.getData();
										this.imageUrl = "";
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});

						} else {
							this.$message.error('error submit!!');
							return false;
						}
					});
				}
			},

			//上传图片
			handleAvatarSuccess(res, file) {
				.0
				if (res.code == 0) {
					this.addForm.img = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.img = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},
		}
	};
</script>

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

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

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

	.red {
		color: #ff0000;
	}


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

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader_small {
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}

	.avatar-uploader_small .el-upload {
		width: 80px;
		height: 80px;
	}

	.avatar-uploader_small .avatar-uploader-icon {
		line-height: 80px;
		margin-left: -30px;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}
</style>
