<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>{{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 label="序号" width="80" align="center">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="stage_year" label="年份" width="100"></el-table-column>
				<el-table-column prop="stage_vol" label="卷数" width="100"></el-table-column>
				<el-table-column prop="stage_no" label="期" width="100"></el-table-column>
				<el-table-column prop="stage_page" label="编号 / 页码">
					<template slot-scope="scope">
						{{scope.row.stage_pagename}}{{scope.row.stage_page}}
					</template>
				</el-table-column>
				<el-table-column prop="issue_date" label="出版时间"></el-table-column>
				<el-table-column label="封面" align="center" width="160">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" v-if="scope.row.stage_icon!=''"
							:src="IMGdo_Url+scope.row.stage_icon"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="是否出刊" width="100" align="center">
					<template scope="scope">
						<b class="el-icon-check" v-if="scope.row.is_publish==1" style="color: #08bc58;font-weight: bold;"></b>
						<b class="el-icon-close" v-if="scope.row.is_publish==0" style="color: #ef0e0e;font-weight: bold;"></b>
						<!-- <el-switch v-model="scope.row.is_publish" :active-value="1" :inactive-value="0"
							active-color="#13ce66" inactive-color="#B9B9B9"
							@change="changeShow(scope.$index, scope.row)" />
						</el-switch> -->
					</template>
				</el-table-column>
				<el-table-column label="提交数据库" width="110" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-paperclip" class="orange"
							@click="handleRefer(scope.$index, scope.row)" v-if="scope.row.journal_stage_id>=320">记录
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="360">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						
						<a
							:href="IMGdo_Url + 'dataFile/' + scope.row.journal_stage_id + '/' + scope.row.journal_stage_id + '.docx'">
							<el-button type="text" icon="el-icon-download" class="green"
								v-if="scope.row.journal_stage_id>=320&&scope.row.is_publish==1">下载目录文件</el-button>
						</a>
						<el-button type="text" icon="el-icon-refresh" class="orange"
							v-if="scope.row.journal_stage_id>=320&&scope.row.is_publish==1"
							@click="handleRegenerateCatalog(scope.row)">重新生成目录文件</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="600px">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="90px">
				<el-form-item label="年份" prop="stage_year">
					<el-input-number v-model="addForm.stage_year" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="卷数" prop="stage_vol">
					<el-input-number v-model="addForm.stage_vol" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="期" prop="stage_no">
					<el-input-number v-model="addForm.stage_no" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="编号 / 页码" prop="stage_page">
					<el-select v-model="addForm.stage_pagename" placeholder="请选择" style="width: 100px;">
						<el-option label="编号No." value="No."></el-option>
						<el-option label="页码pp." value="pp."></el-option>
					</el-select>
					<el-input v-model="addForm.stage_page" style="width: 235px;margin-left: 10px;"></el-input>
				</el-form-item>
				<!-- <p style="font-size: 12px; color: #aaa;margin-left: 80px;margin-bottom: 20px;">eg : 0000 Vol. 00 Issue. 00 No./pp. 00</p> -->
				<p style="font-size: 12px;color: #ef0e0e;margin-left: 90px;margin-bottom: 20px;font-weight: bold;">编号No.
					/ 页码pp.</p>
				<el-form-item label="出版时间" prop="issue_date">
					<el-input v-model="addForm.issue_date" placeholder="eg : 01 January 2020"></el-input>
				</el-form-item>
				<el-form-item label="封面">
					<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/upStageIcon'"
						:show-file-list="false" name="stage_icon" :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>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="600px">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="90px">
				<el-form-item label="年份" prop="stage_year">
					<el-input-number v-model="editForm.stage_year" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="卷数" prop="stage_vol">
					<el-input-number v-model="editForm.stage_vol" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="期" prop="stage_no">
					<el-input-number v-model="editForm.stage_no" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="编号 / 页码" prop="stage_page">
					<el-select v-model="editForm.stage_pagename" placeholder="请选择" style="width: 100px;">
						<el-option label="编号No." value="No."></el-option>
						<el-option label="页码pp." value="pp."></el-option>
					</el-select>
					<el-input v-model="editForm.stage_page" style="width: 235px;margin-left: 10px;"></el-input>
				</el-form-item>
				<p style="font-size: 12px;color: #ef0e0e;margin-left: 90px;margin-bottom: 20px;font-weight: bold;">编号No.
					/ 页码pp.</p>
				<el-form-item label="出版时间" prop="issue_date">
					<el-input v-model="editForm.issue_date" placeholder="eg : 01 January 2020"></el-input>
				</el-form-item>
				<el-form-item label="封面">
					<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/upStageIcon'"
						:show-file-list="false" name="stage_icon" :on-success="handleEditSuccess"
						: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="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 数据库进度条弹出框 -->
		<el-dialog title="" :close-on-click-modal="false" :show-close="false" :visible.sync="pubVisible" width="400px">
			<div style="margin: 0 20px;" v-if="re_finsh==1">
				<img src="../../assets/img/Fidget-spinner.gif"
					style="width: 80px;float: left;margin:10px 50px 150px 20px;">
				<div style="float: left;height: 150px;">
					<transition name="el-fade-in-linear" v-for="(item,index) in referData">
						<div v-show="item.ishow" class="transition-box ref_font">
							{{ item.name }}
							<img src="../../assets/img/Fidget-finsh.png"
								style="margin-left:10px;vertical-align: text-top;">
						</div>
					</transition>
				</div>
				<br clear="both">
			</div>
			<div v-if="re_finsh==0" style="text-align: center;">
				<img src="../../assets/img/Fidget-right.png" alt="" style="width: 120px;">
				<p style="font-size: 16px;margin: 20px 0 50px 0;">上传数据库成功！</p>
			</div>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="pubVisible = false" v-if="this.re_btn">确 定</el-button>
			</span> -->
		</el-dialog>

		<!-- 数据库弹出框 -->
		<el-dialog title="数据库收录情况" :visible.sync="referVisible" width="400px">
			<div style="margin: 0 10px 15px 10px;" v-for="item in referData">
				<span style="margin-right: 10px;">{{ item.name }}</span>
				<i class="el-icon-close red" style="font-weight: bold;" v-if="item.state==0"></i>
				<i class="el-icon-check blue" style="font-weight: bold;" v-if="item.state==1"></i>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="referVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {
					stage_pagename: 'No.'
				},
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				tableData: [],
				editVisible: false,
				addVisible: false,
				pubVisible: false,
				referVisible: false,
				re_btn: false,
				re_finsh: 1,
				aid: -1,
				editForm: {},
				idx: -1,
				id: -1,
				title_header: "",
				idform: {},
				referData: [{
					name: 'J-Gate',
					state: '0',
					ishow: false
				}, {
					name: '超星',
					state: '0',
					ishow: false
				}, {
					name: '万方',
					state: '0',
					ishow: false
				}, {
					name: '维普',
					state: '0',
					ishow: false
				}, {
					name: 'PORTICO',
					state: '0',
					ishow: false
				}, {
					name: 'Cnki scholar',
					state: '0',
					ishow: false
				}],
				rules: {
					stage_year: [{
						required: true,
						message: '请输入分期年份',
						trigger: 'blur'
					}],
					stage_vol: [{
						required: true,
						message: '请输入分期卷数',
						trigger: 'blur'
					}],
					stage_no: [{
						required: true,
						message: '请输入分期号码',
						trigger: 'blur'
					}],
					stage_page: [{
						required: true,
						message: '请输入分期页码',
						trigger: 'blur'
					}],
					issue_date: [{
						required: true,
						message: '请输入分期发布时间',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取分期列表数据
			getData() {
				this.idform.journal_id = this.$route.query.top_id;
				this.addForm.journal_id = this.$route.query.top_id;
				this.$api
					.post('master/Journal/getStageList', this.idform)
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title;
							this.tableData = res.data.stage_list;
						} 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) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/addStage', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加成功`);
									this.imageUrl = "";
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.editForm = Object.assign({}, row);
				this.editVisible = true;
				if (row.stage_icon == '') {
					this.imageUrl = '';
				} else {
					this.imageUrl = this.IMGdo_Url + row.stage_icon;
				}

			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/editStage', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			//开关按钮是否启用出刊
			changeShow(index, row) {
				// 提交数据库
				if (row.journal_stage_id >= 320 && row.is_publish == 1) {
					// 弹出框
					this.pubVisible = true;
					this.re_finsh = 1
					// 延迟效果
					for (let i = 0; i < this.referData.length; i++) {
						setTimeout(() => {
							this.referData[i].ishow = true
						}, 1000 * (i + 1));
					}
					setTimeout(() => {
						for (let i = 0; i < this.referData.length; i++) {
							this.referData[i].ishow = false
						}
						this.re_finsh = 0
					}, 1000 * (this.referData.length + 1) + 1000);
					setTimeout(() => {
						this.pubVisible = false
					}, 1000 * (this.referData.length + 1) + 2000);
					// 掉接口
					this.$api
						.post('master/Datebase/dataPush', row)
						.then(res => {
							if (res.code == 0) {
								this.$message.success(`提交数据库成功`);
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
				// 出刊
				this.$api
					.post('master/Journal/editStage', row)
					.then(res => {
						if (res.code == 0) {
							this.$message.success(`更改出刊状态成功`);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delStage', 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(() => {});
			},
			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.stage_icon = res.url;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.stage_icon = res.url;
				} 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;
			},
			// 下载操作
			handleDownload(index, row) {
				// this.IMGdo_Url + 'dataFile/' + row.journal_stage_id + '/' + row.journal_stage_id + '.docx'
			},
			// 重新生成目录文件
			handleRegenerateCatalog(row) {
				this.$confirm('确定要重新生成目录文件吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$api
						.post('master/Datebase/Mycreate', {
							journal_stage_id: row.journal_stage_id
						})
						.then(res => {
							if (typeof res === 'string' && res.trim() === 'success !') {
								this.$message.success('目录文件重新生成成功');
								this.getData();
							} else if (res.code == 0) {
								this.$message.success('目录文件重新生成成功');
								this.getData();
							} else {
								this.$message.error(res.msg || res);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}).catch(() => {});
			},
			// 数据库列表
			handleRefer(index, row) {
				if (row.is_publish == 1) {
					for (let i = 0; i < this.referData.length; i++) {
						this.referData[i].state = 1;
					}
				} else {
					for (let i = 0; i < this.referData.length; i++) {
						this.referData[i].state = 0;
					}
				}
				this.referVisible = true
			}
		},
		computed: {

		}
	}
</script>

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

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

	.handle-select {
		width: 120px;
	}

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

	.handle-pwd {
		cursor: pointer;
	}

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

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

	.red {
		color: #ff0000;
	}

	.blue {
		color: #409eff;
	}

	.orange {
		color: #ea9c13;

	}

	.green {
		color: #08bc58;
		margin-left: 10px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.ref_font {
		margin-bottom: 15px;
		font-size: 16px;
	}
</style>
