<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">
			<el-tabs v-model="message">
				<el-tab-pane label="基本信息" name="first">
					<el-form ref="add_Form1" :model="addForm1" :rules="rules" label-width="190px">
						<el-form-item label="文章标题" prop="title">
							<div class="txt_con">{{addForm1.title}}</div>
						</el-form-item>
						<el-form-item label="标题斜体" prop="ltai">
							<div class="txt_con">{{addForm1.ltai}}</div>
						</el-form-item>
						<el-form-item label="所属期刊分期">
							<el-cascader :options="optionx" v-model="addForm1.optionx" :props="defaultParams" placeholder="请选择期刊分期" class="mr10"
							 style="width: 460px;" :disabled="true"></el-cascader>
						</el-form-item>
						<el-form-item label="页码" prop="npp">
								<div class="txt_con">{{addForm1.npp}}</div>
						</el-form-item>
						<el-form-item label="配图" label-width="190px">
							<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Article/up_article_file'" :show-file-list="false"
							 name="articleicon" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload" :disabled="true">
								<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-item label="文章类型">
							<div class="txt_con">{{addForm1.type}}</div>
						</el-form-item>
						<el-form-item label="引用数">
								<div class="txt_con">{{addForm1.cited}}</div>
						</el-form-item>
						<el-form-item label="作者简称（引用格式中）">
							<div class="txt_con">{{addForm1.abbr}}</div>
						</el-form-item>
						<el-form-item label="首页简介标题">
								<div class="txt_con">{{addForm1.tradition_tag}}</div>
						</el-form-item>
						<el-form-item label="Highlights内容">
							<div class="txt_con" v-html="addForm1.tradition"></div>
						</el-form-item>
						<el-form-item label="Medical history of objective">
							<div class="txt_con" v-html="addForm1.mhoo"></div>
						</el-form-item>
						<el-form-item label="Doi">
							<div class="txt_con">{{addForm1.doi}}</div>
						</el-form-item>
						<el-form-item label="简介" prop="abstract">
							<div class="txt_con" v-html="addForm1.abstract"></div>
						</el-form-item>
						<el-form-item label="关键字" prop="keywords">
							<div class="txt_con">{{addForm1.keywords}}</div>
						</el-form-item>
						<el-form-item label="Fund">
								<div class="txt_con">{{addForm1.fund}}</div>
						</el-form-item>
						<el-form-item label="HTML版本">
							<el-select v-model="addForm1.file_html" filterable placeholder="请选择" style="width: 450px;" :disabled="true">
								<el-option key="" value="" label="无"></el-option>
								<el-option v-for="item in opHTML" :key="sx_+'/'+item.val+'/index.html'" :label="item.val" :value="sx_+'/'+item.val+'/index.html'"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="发表日期">
							<div class="txt_con">{{addForm1.pub_date}}</div>
						</el-form-item>
						<el-form-item label="客座期刊">
							<el-select v-model="addForm1.journal_special_id" filterable placeholder="请选择客座期刊" value-key="groupID" :disabled="true">
								<el-option :key="0" label="无" :value="0"></el-option>
								<el-option v-for="item in guest" :key="item.journal_special_id" :label="item.title" :value="item.journal_special_id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="副标题">
									<div class="txt_con">{{addForm1.subtitle}}</div>
							<span style="font-size: 12px;color: #aaaaaa;">轮播图文章副标题 (选填项)</span>
						</el-form-item>
						<el-form-item label="轮播图" label-width="190px">
							<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Article/up_rotation_file'" :show-file-list="false"
							 name="rotation" :on-success="handleAvatarSuccess_" :on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_" :disabled="true">
								<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<span style="font-size: 12px;color: #aaaaaa;">轮播图图片 (选填项)</span>
						</el-form-item>
						<el-form-item label="权重">
								<div class="txt_con">{{addForm1.sort}}</div>
						</el-form-item>
						<el-form-item label="其他信息">
							<el-select v-model="addForm1.other_state" filterable value-key="groupID" :disabled="true">
								<el-option :key="0" label="无" :value="0"></el-option>
								<el-option :key="1" label="Being questioned(被质疑)" :value="1"></el-option>
								<el-option :key="2" label="Retracted(被撤回)" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-form>


				</el-tab-pane>
				<el-tab-pane label="作者" name="second">
					<template v-if="message === 'second'">
						<!-- 作者列表 -->
						
						<el-table :data="authorData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column prop="author_name" label="作者"></el-table-column>
							<el-table-column label="第一作者">
								<template slot-scope="scope">
									<el-tag round :type="scope.row.is_first=='0'?'danger':(scope.row.is_first=='1'?'success':'')">{{scope.row.is_first=='0'?'×':(scope.row.is_first=='1'?'√':'')}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="联系作者 ( 邮箱 ) ">
								<template slot-scope="scope">
									<el-tag round :type="scope.row.is_report=='0'?'danger':(scope.row.is_report=='1'?'success':'')">{{scope.row.is_report=='0'?'×':(scope.row.is_report=='1'?'√':'')}}</el-tag>
									&nbsp;&nbsp;&nbsp;
									<span>{{scope.row.is_report=='0'?'':(scope.row.is_report=='1'?scope.row.email:'')}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="organs" label="所属机构">
								<template slot-scope="scope">
									<span v-for="(u,i) in scope.row.organs">{{u.organ_name}}<br /></span>
								</template>
							</el-table-column>
							<el-table-column prop="author_country" label="国家"></el-table-column>
							<el-table-column prop="orcid" label="ORCID"></el-table-column>
						</el-table>

						<!-- 机构列表 -->
						<el-table :data="schoolData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
							<el-table-column prop="organ_name" label="机构"></el-table-column>
						</el-table>
					</template>
				</el-tab-pane>
				<el-tab-pane label="文章内容" name="third">
					<template v-if="message === 'third'">
						<el-form label-width="220px">
							<el-form-item label="PDF 文件上传">
								<div class="file_sty" v-for="item in fileL_pdf">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
							</el-form-item>
							<el-form-item label="SUB 文件上传">
								<div class="file_sty" v-for="item in fileL_sub">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
							</el-form-item>
							<el-form-item label="SUB2 文件上传">
								<div class="file_sty" v-for="item in fileL_sub2">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
							</el-form-item>
							<el-form-item label="EndNote 文件上传">
								<div class="file_sty" v-for="item in fileL_Note">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
								
							</el-form-item>
							<el-form-item label="BibTeX 文件上传">
								<div class="file_sty" v-for="item in fileL_Tex">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
							</el-form-item>
							<el-form-item label="ICMJE DISCLOSURE FORM">
								<div class="file_sty" v-for="item in fileL_Icm">
									<img src="../../assets/img/icon_0.png" alt="">
									<a :href='item.url' target="_blank">{{item.name}} 
										<i class="el-icon-download"></i>
									</a>
								</div>
							</el-form-item>
						</el-form>
					</template>
				</el-tab-pane>
				<el-tab-pane label="话题" name="forth">
					<template v-if="message === 'forth'">
						<el-form ref="add_Form4" :model="addForm4" label-width="70px">
							<el-form-item label="话题列表">
								<el-checkbox-group v-model="addForm4.topic" value-key='journal_topic_id' style="margin-left: 60px;" :disabled="true">
									<el-checkbox v-for="item in listopic" style="display:block;" name="topic" :label="item.journal_topic_id+''"
									 :key="item.journal_topic_id" @change="chan_topic($event,item)">{{item.tname}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
					</template>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>

	export default {
		// name: 'art_text',
		data() {
			return {
				openIsDisabled: false,
				message: 'first',
				idform: {},
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				imageUrl_: '',
				addForm1: {
					type: "",
					// optionx: [],
					journal_special_id: "无",
					sort: 0,
				},
				
				addForm4: {
					topic: []
				},
				optionx: [],
				sx_: '',
				opHTML: [],
				medical: [{
						label: '无',
						value: ''
					},
					{
						label: 'ARTICLE',
						value: 'Article'
					},
					{
						label: 'REVIEW',
						value: 'Review'
					},
					{
						label: 'CASE REPORT',
						value: 'Case report'
					},
					{
						label: 'RESEARCH PROPOSAL',
						value: 'Research proposal'
					},
					{
						label: 'NEWS',
						value: 'News'
					},
					{
						label: 'COMMENT',
						value: 'Comment'
					},
					{
						label: 'CORRECTION',
						value: 'Correction'
					},
					{
						label: 'HYPOTHESIS',
						value: 'Hypothesis'
					},
					{
						label: 'PREFACE',
						value: 'Preface'
					},
					{
						label: 'EDITORIAL',
						value: 'Editorial'
					},
					{
						label: 'REPORT',
						value: 'Report'
					},
					{
						label: 'LETTER',
						value: 'Letter'
					},
					{
						label: 'EMPIRICAL FORMULA',
						value: 'Empirical formula'
					},
					{
						label: 'EVIDENCE-BASED MEDICINE',
						value: 'Evidence-based medicine'
					},
					{
						label: 'EXPERT CONSENSUS',
						value: 'Expert consensus'
					},
					{
						label: 'LETTER TO EDITOR',
						value: 'Letter to editor'
					},
					{
						label: 'QUESTIONNAIRE INVESTIGATION',
						value: 'Questionnaire investigation'
					},
					{
						label: 'PROTOCOL',
						value: 'Protocol'
					},
					{
						label: 'CASE SERIES',
						value: 'Case Series'
					},
					{
						label: 'RETRACTION',
						value: 'Retraction'
					},
					{
						label: 'MINI REVIEW',
						value: 'Mini Review'
					},
					{
						label: '内经难经',
						value: '内经难经'
					},
					{
						label: '伤寒金匮',
						value: '伤寒金匮'
					},
					{
						label: '神农本草经',
						value: '神农本草经'
					},
					{
						label: '温病研究',
						value: '温病研究'
					},
					{
						label: '唐宋方药',
						value: '唐宋方药'
					},
					{
						label: '金元各家',
						value: '金元各家'
					},
					{
						label: '明清经典',
						value: '明清经典'
					},
					{
						label: '中西汇通',
						value: '中西汇通'
					},
					{
						label: '太湖选粹',
						value: '太湖选粹'
					},
					{
						label: '针灸推拿',
						value: '针灸推拿'
					},
					{
						label: '名医名方',
						value: '名医名方'
					},
					{
						label: '新冠肺炎',
						value: '新冠肺炎'
					},
					{
						label: '书评',
						value: '书评'
					}
				],
				defaultParams: {
					label: 'title',
					value: 'journal_stage_id',
					children: 'children'
				},
				
				editAuthor: false,
				addAuthor: false,
				editSchool: false,
				addSchool: false,
				authorData: [],
				schoolData: [],
				addFomauthor: {
					is_first: '0',
					is_report: '0',
					organs: []
				},
				editFomauthor: {
					// organs:[]
				},
				addFomschool: {

				},
				editFomschool: {

				},
				file_picF: [],
				fileL_pdf: [],
				fileL_sub: [],
				fileL_sub2: [],
				fileL_Note: [],
				fileL_Tex: [],
				fileL_Icm: [],
				country: [],
				guest: [],
				jour_id_: '',
				mechanism: [],
				listopic: [],
				rules: {
					title: [{
						required: true,
						message: '请输入文章标题',
						trigger: 'blur'
					}],
					npp: [{
						required: true,
						message: '请输入文章页码',
						trigger: 'blur'
					}],
					tradition_tag: [{
						required: true,
						message: '请输入封皮标签',
						trigger: 'blur'
					}],
					tradition: [{
						required: true,
						message: '请输入封皮简介',
						trigger: 'blur'
					}],
					
					abstract: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}],
					keywords: [{
						required: true,
						message: '请输入关键字',
						trigger: 'blur'
					}],
					fund: [{
						required: true,
						message: '请输入Fund',
						trigger: 'blur'
					}],
					act_guest: [{
						required: true,
						message: '请选择客座期刊',
						trigger: 'blur'
					}],
					pub_date: [{
						required: true,
						message: '请输入发表日期',
						trigger: 'blur'
					}],
					doi_num: [{
						required: true,
						message: '请输入Doi',
						trigger: 'blur'
					}],
					author_name: [{
						required: true,
						message: '请输入作者',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入联系作者邮箱',
						trigger: 'blur'
					}],
					author_country: [{
						required: true,
						message: '请选择国家',
						trigger: 'blur'
					}],
					organ_name: [{
						required: true,
						message: '请输入机构',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				this.idform.article_id = this.$route.query.article_num;
				
				this.addForm1.article_id = this.$route.query.article_num;
				this.addFomauthor.article_id = this.$route.query.article_num;
				this.addFomschool.article_id = this.$route.query.article_num;
				this.$api
					.post('master/Article/getArticleBase', this.idform)
					.then(res => {
						if (res.code == 0) {
							this.addForm1 = res.data.articleInfo;
							this.addForm1.optionx = [res.data.articleInfo.journal_id, res.data.articleInfo.journal_stage_id];
							if (res.data.articleInfo.icon != "") {
								this.imageUrl = this.IMGdo_Url + 'articleicon/' + res.data.articleInfo.icon;
							}
							if (res.data.articleInfo.rotation != "") {
								this.imageUrl_ = this.IMGdo_Url + 'rotation/' + res.data.articleInfo.rotation;
							}
							// if (res.data.articleInfo.file_pdf != "") {
							// 	this.file_picF = [{}];
							// 	this.file_picF[0].name = 'articlePDF';
							// 	this.file_picF[0].url = this.IMGdo_Url + 'articlePDF/' + res.data.articleInfo.file_pdf;
							// }
							if (res.data.articleInfo.file_pdf != "") {
								this.fileL_pdf = [{}];
								this.fileL_pdf[0].name = 'articlePDF';
								this.fileL_pdf[0].url = this.IMGdo_Url + 'articlePDF/' + res.data.articleInfo.file_pdf;
							}
							if (res.data.articleInfo.file_sub != "") {
								this.fileL_sub = [{}];
								this.fileL_sub[0].name = 'articleSUB';
								this.fileL_sub[0].url = this.IMGdo_Url + 'articleSUB/' + res.data.articleInfo.file_sub;
							}
							if (res.data.articleInfo.file_sub2 != "") {
								this.fileL_sub2 = [{}];
								this.fileL_sub2[0].name = 'articleSUB2';
								this.fileL_sub2[0].url = this.IMGdo_Url + 'articleSUB2/' + res.data.articleInfo.file_sub2;
							}
							if (res.data.articleInfo.endnote != "") {
								this.fileL_Note = [{}];
								this.fileL_Note[0].name = 'endNote';
								this.fileL_Note[0].url = this.IMGdo_Url + 'endNote/' + res.data.articleInfo.endnote;
							}
							if (res.data.articleInfo.bibtex != "") {
								this.fileL_Tex = [{}];
								this.fileL_Tex[0].name = 'bibTex';
								this.fileL_Tex[0].url = this.IMGdo_Url + 'bibTex/' + res.data.articleInfo.bibtex;
							}
							if (res.data.articleInfo.file_cdf != "") {
								this.fileL_Icm = [{}];
								this.fileL_Icm[0].name = 'articleCDF';
								this.fileL_Icm[0].url = this.IMGdo_Url + 'articleCDF/' + res.data.articleInfo.file_cdf;
							}
							this.opHTML = res.data.files;
							this.sx_ = res.data.journal.sx;
							// this.jour_id_ = res.data.journal.journal_id;

							this.$api
								.post('master/Article/getJournalSpecials', {
									'journal_id': res.data.journal.journal_id
								})
								.then(res => {
									if (res.code == 0) {
										this.guest = res.data.specials;
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				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;
							}
							this.optionx = res.data.joutaglist;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('master/Article/getArticleAuthor', this.idform)
					.then(res => {
						if (res.code == 0) {
							this.authorData = res.data.authorList;
							this.schoolData = res.data.organList;
							this.mechanism = res.data.organList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Article/getCountrys')
					.then(res => {
						if (res.code == 0) {
							this.country = res.data.countrys;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('master/Article/getTopicByArticle', this.idform)
					.then(res => {
						if (res.code == 0) {
							for (var r = 0; r < res.data.nowtopic.length; r++) {
								for (var v = 0; v < res.data.topics.length; v++) {
									if (res.data.nowtopic[r].topic_id == res.data.topics[v].journal_topic_id) {
										res.data.topics[v].article_to_topic_id = res.data.nowtopic[r].article_to_topic_id;
									}
								};
							};
							this.listopic = res.data.topics;
							let wzht_list = [];
							for (var i = 0; i < res.data.nowtopic.length; i++) {
								wzht_list.push(res.data.nowtopic[i].topic_id + '');
							};
							this.addForm4.topic = wzht_list;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			
			
			//上传图片1
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm1.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {

			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},
			//上传图片2
			handleAvatarSuccess_(res, file) {
				if (res.code == 0) {
					this.addForm1.rotation = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl_ = URL.createObjectURL(file.raw);
			},
			handleAvatarError_(res, file) {

			},
			beforeAvatarUpload_(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('图片大小不能超过 1M!');
				}
				return isLt2M;
			},

			// 选择话题
			chan_topic($event, val) {
				if ($event == true) {
					this.$api
						.post('master/Article/addTopicByArticle', {
							'article_id': this.$route.query.article_num,
							'topic_id': val.journal_topic_id
						})
						.then(res => {
							if (res.code == 0) {
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$api
						.post('master/Article/delTopic', {
							'article_to_topic_id': val.article_to_topic_id
						})
						.then(res => {
							if (res.code == 0) {
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},

			




			
		},
		
	}
</script>

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

	.el-table {
		margin-bottom: 40px;
	}

	.title_header {
		margin-bottom: 20px;
	}

	.message-title {
		cursor: pointer;
	}

	.quill-editor {
		margin-bottom: 20px;
		/* height: 200px; */
	}

	.ql-toolbar {
		border: 1px solid #DCDFE6 !important;
	}

	.ql-container {
		min-height: 100px !important;
		border: 1px solid #DCDFE6 !important;
	}

	.ql-editor {
		height: 100px;
	}

	.upload-demo .el-upload {
		width: 55px;
		float: left;
		margin-left: 20px;
	}

	.el-upload-list {
		margin-top: 4px;
		margin-left: 10px;
		float: left;
		width: 30px;
	}

	.el-upload-list .el-upload-list__item {
		width: 30px !important;
	}

	.el-upload-list .el-upload-list__item:hover {
		cursor: pointer;
	}

	.el-upload-list .el-upload-list__item .el-upload-list__item-name {
		width: 30px;
	}

	.el-upload-list .el-upload-list__item .el-upload-list__item-status-label {
		display: none;
	}

	.el-upload-list__item:hover .el-icon-close {
		display: none;
	}

	.red {
		color: #ff0000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		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 {
		width: 140px;
		height: 140px;
		display: block;
	}

	.upload-demo .el-upload {
		border: none;
		text-align: left;
		height: 35px;
	}

	.upload-demo .el-upload-list__item:first-child {
		margin-top: 0;
		width: 300px;
	}

	.suoshu_jigou .el-checkbox__label {
		white-space: normal;
	}

	.suoshu_jigou .el-checkbox__input {
		vertical-align: top;
		margin-top: 8px;
	}
	
	.txt_con{
		margin: 0 0 0 10px;
		color: #333;
	}
	
	.file_sty>a{
		color: #333;
	}
	.file_sty>a>i{
		margin-left: 10px;color: #66b1ff;font-weight: bold;
	}
	.file_sty>img{
		    vertical-align: middle;
			margin:0 10px 0 20px;
	}
</style>
