<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="handle-box">
				<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="1"></el-option>
					<el-option label="驳回" value="2"></el-option>
				</el-select>
			</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="journal_title" label="被引用期刊"></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">
						<div class="demo-image__preview">
							<el-image class="table-td-thumb" :src="IMGdo_Url+'articleCite/'+scope.row.img" :preview-src-list="srcList"></el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="审核" width="180" align="center">
					<template scope="scope">
						<el-radio-group v-if="scope.row.state == '0'" v-model="scope.row.stgte" @change="changeShow(scope.$index, scope.row)">
							<el-radio label="1">通过</el-radio>
							<el-radio label="2" class="jujue">驳回</el-radio>
						</el-radio-group>
						<div v-if="scope.row.state != '0'">
							<el-tag v-if="scope.row.state == '1'" type="success">通过</el-tag>
							<el-tag v-if="scope.row.state == '2'" type="danger">驳回</el-tag>
						</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>

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

<script>
	export default {
		data() {
			return {
				query: {
					state: '-1',
					pageIndex: 1,
					pageSize: 10
				},
				link_Total: 0,
				tableData: [],
				IMGdo_Url: this.IMGdoURL,
				srcList: [], //大图
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取引用审核列表数据
			getData() {
				this.$api
					.post('master/Article/getAllArticleCites', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.cites;
							this.link_Total = res.data.count || 0;
							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);
					});
			},

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

			// 通过拒绝按键
			changeShow(index, row) {
				// 二次确认
				this.$confirm('确定要操作吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						row.state = row.stgte
						this.$api
							.post('master/Article/changeCiteState', 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(() => {
						row.stgte = '0'
					});
			},

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


		}
	};
</script>

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

	.el-radio {
		margin-right: 20px;
	}

	.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>
