<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Manuscript reviewer list
				</el-breadcrumb-item>
				<el-breadcrumb-item>Manuscript reviewer detail</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-row>
				<el-col :span="16">
					<div class="form-box">
						<el-form ref="articleform" :model="detailDate" label-width="200px">
							<el-form-item label="Article">
								<span>{{detailDate.article}}</span>
							</el-form-item>
							<el-form-item label="Reviewer">
								<span>{{detailDate.reviewer}}</span>
							</el-form-item>
							<el-form-item label="CreateTime">
								<span>{{formatDate(detailDate.ctime)}}</span>
							</el-form-item>
							<el-form-item label="Status">
								<span>{{mystate(detailDate.state)}}</span>
								<el-button style="margin-left:10px;" type="text" @click="dialogFormVisible=true" icon="el-icon-view">See
									Feedback</el-button>
							</el-form-item>
							<!-- <el-form-item label="Article file">
                                <el-popover placement="right" width="350" trigger="click">
                                    <el-table :data="articlefileList">
                                        <el-table-column
                                            width="150"
                                            :formatter="filedateformate"
                                            property="ctime"
                                            align="center"
                                            label="Date"
                                        ></el-table-column>
                                        <el-table-column
                                            width="100"
                                            property="up_username"
                                            align="center"
                                            label="Uploader"
                                        ></el-table-column>
                                        <el-table-column
                                            width="100"
                                            label="download"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-link
                                                    type="primary"
                                                    icon="el-icon-download"
                                                    :href="getlinkurl(scope.row)"
                                                ></el-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button
                                        class="more_btn"
                                        icon="el-icon-download"
                                        type="text"
                                        slot="reference"
                                    >Download</el-button>
                                </el-popover>
                                <el-upload
                                    class="upload-demo"
                                    drag
                                    :action="upload_file('articlefile')"
                                    accept=".doc, .docx"
                                    name="articlefile"
                                    :before-upload="beforeupload_file"
                                    :on-error="uperr_file"
                                    :on-success="upSuccess_file"
                                    :limit="1"
                                    :on-exceed="alertlimit"
                                    :on-remove="removefilearticlefile"
                                >
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">
                                        <em>Upload</em>
                                    </div>
                                    <div
                                        class="el-upload__tip"
                                        slot="tip"
                                    >Only word files can be uploaded(.doc,.docx)</div>
                                </el-upload>
                            </el-form-item> -->
							<!-- <el-form-item label="Others">
                                <el-popover placement="right" width="350" trigger="click">
                                    <el-table :data="articlezipList">
                                        <el-table-column
                                            width="150"
                                            :formatter="filedateformate"
                                            property="ctime"
                                            align="center"
                                            label="Date"
                                        ></el-table-column>
                                        <el-table-column
                                            width="100"
                                            property="up_username"
                                            align="center"
                                            label="Uploader"
                                        ></el-table-column>
                                        <el-table-column
                                            width="100"
                                            label="Download"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-link
                                                    type="primary"
                                                    icon="el-icon-download"
                                                    :href="getlinkurl(scope.row)"
                                                ></el-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button
                                        class="more_btn"
                                        icon="el-icon-download"
                                        type="text"
                                        slot="reference"
                                    >Download</el-button>
                                </el-popover>
                                <el-upload
                                    class="upload-demo"
                                    drag
                                    :action="upload_file('articlezip')"
                                    accept=".rar, .zip"
                                    name="articlezip"
                                    :before-upload="beforeupload_articlezip"
                                    :on-error="uperr_file"
                                    :on-success="upSuccess_articlezip"
                                    :limit="1"
                                    :on-exceed="alertlimit"
                                    :on-remove="removefilearticlezip"
                                >
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">
                                        <em>Upload</em>
                                    </div>
                                    <div
                                        class="el-upload__tip"
                                        slot="tip"
                                    >Only compressed files can be uploaded(.rar,.zip)</div>
                                </el-upload>
                            </el-form-item> -->
							<!-- <el-form-item>
                                <el-button type="primary" @click="onSubmit">submit</el-button>
                            </el-form-item> -->
						</el-form>
					</div>
				</el-col>
				<el-col :span="8">
					<!-- <div class="tree_box">
                        <h2>State tracking</h2>
                        <div class="block">
                            <el-timeline>
                                <el-timeline-item
                                    :timestamp="formatDate(form.ctime)"
                                    placement="top"
                                >
                                    <el-card>
                                        <h4>Article submission</h4>
                                        <p>{{form.username}} Submit articles</p>
                                    </el-card>
                                </el-timeline-item>
                                <el-timeline-item
                                    v-for="(activity, index) in msgs"
                                    :key="index"
                                    :timestamp="formatDate(activity.ctime)"
                                    placement="top"
                                >
                                    <el-card>
                                        <p>state change :{{statetostr(activity.state_from)}} to {{statetostr(activity.state_to)}}</p>
                                        <p>{{activity.content}}</p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>-->
				</el-col>
			</el-row>
		</div>
		<el-dialog title="Feedback questionnaire" :visible.sync="dialogFormVisible" width="900px">
			<el-form :model="questionform" ref="question" label-width="300px" label-position="top">
				<el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="1.Originality of the topic">
							<el-radio-group v-model="questionform.qu1">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="2.Importance in its Field">
							<el-radio-group v-model="questionform.qu3">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="3.Does the manuscript fall within the aim and scope of the journal?">
							<el-radio-group v-model="questionform.qu6">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="4.English language">
							<el-radio-group v-model="questionform.qu8">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="5.Readily Understandable">
							<el-radio-group v-model="questionform.qu5">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-collapse>
							<el-form-item label="6.Does the title represent manuscript's contents?">
								<el-col :span="8">
									<el-radio-group v-model="questionform.qu9">
										<el-radio :label="true">Yes</el-radio>
										<el-radio :label="false">No</el-radio>
									</el-radio-group>
								</el-col>
								<el-col :span="12">
									<el-collapse-item name="1" style="margin-top: -10px;">
										<template slot="title">
											<i class="el-icon-edit"></i>Comments/ Suggestions
										</template>
										<el-input type="textarea" placeholder="please input content" v-model="questionform.qu9contents" :rows="4"></el-input>
									</el-collapse-item>
								</el-col>
							</el-form-item>
						</el-collapse>
					</el-col>
				</el-row>


				<el-collapse>
					<el-form-item label="7.Is the Abstract accurate and concise?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu10">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="2" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu10contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="8.Are the approach/ methods properly described?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu11">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="3" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu11contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="9.Are the conclusions and interpretations sound?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu12">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="4" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu12contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="10.Are the references properly cited?">
						<el-col :span="4">
							<el-radio-group v-model="questionform.qu13">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="5" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content" v-model="questionform.qu13contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>

					<el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
					<el-form-item label="Overall the Paper is Rated">
						(Poor------------------------Excellent)
						<br />
						<el-radio-group v-model="questionform.rated" size="small">
							<el-radio-button label="1"></el-radio-button>
							<el-radio-button label="2"></el-radio-button>
							<el-radio-button label="3"></el-radio-button>
							<el-radio-button label="4"></el-radio-button>
							<el-radio-button label="5"></el-radio-button>
							<el-radio-button label="6"></el-radio-button>
							<el-radio-button label="7"></el-radio-button>
							<el-radio-button label="8"></el-radio-button>
							<el-radio-button label="9"></el-radio-button>
							<el-radio-button label="10"></el-radio-button>
						</el-radio-group>
						<span style="margin-left: 20px;">>Your score:{{questionform.rated}}</span>
					</el-form-item>
					<el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
						<el-radio-group v-model="questionform.recommend" style="line-height: 30px;">
							<el-radio :label="1">Accept with minor revision</el-radio>
							<br />
							<el-radio :label="2">Accept with major revision</el-radio>
							<br />
							<el-radio :label="3">Reject in current form, but may be resubmitted</el-radio>
							<br />
							<el-radio :label="4">Reject, with no resubmission</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="OTHER SPECIFIC CRITICISMS">
						<el-radio-group v-model="questionform.other" style="line-height: 30px;">
							<el-radio :label="1">Imperfect style</el-radio>
							<br />
							<el-radio :label="2">Too long</el-radio>
							<br />
							<el-radio :label="3">References incorrectly presented</el-radio>
							<br />
							<el-radio :label="4">Typographical and Grammatical errors</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="Comments for the Authors">
						<el-input type="textarea" placeholder="please input content" v-model="questionform.comment" :rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Confidential Comments to the Editor">
						<el-input type="textarea" placeholder="please input content" v-model="questionform.confident" :rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Please choose disclose your name or remain anonymous.">
						<el-radio-group v-model="questionform.is_anonymous" style="line-height: 30px;">
							<el-radio :label="0">Disclose name</el-radio>
							<br />
							<el-radio :label="1">Remain anonymous</el-radio>
						</el-radio-group>
						<p style="line-height: 20px;color: #aaa;font-size: 13px;margin: 12px 0 0 0;">
							If you agree to disclose your name, we will acknowledge you by name in the published
							PDF. However, if you prefer to remain anonymous, we will still express our gratitude
							by thanking you as an anonymous reviewer. 
							<br />For example, {{txt_mess.title}} would like to thank AAAAAAAA, BBBBBBBB, and other anonymous reviewers for their
							invaluable contributions to the peer review process of this paper.
						</p>
					</el-form-item>
				</el-collapse>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				dateId: this.$route.query.id,
				username: localStorage.getItem('U_name'),
				articlefileList: [],
				articlezipList: [],
				dialogFormVisible: false,
				activeNames: ['1', '2', '3', '4', '5', '6', '7'],
				detailDate: {
					editor: localStorage.getItem('U_name'),
					artrevid: '',
					article: '',
					reviewer: '',
					articlefile: '',
					articlezip: '',
					ctime: '',
					state: ''
				},
				txt_mess: {},
				questionform: {
					rev_qu_id: '',
					art_rev_id: this.$route.query.id,
					qu1: '',
					qu2: '',
					qu3: '',
					qu4: '',
					qu5: '',
					qu6: '',
					qu7: '',
					qu8: '',
					qu9: '',
					qu9contents: '',
					qu10: '',
					qu10contents: '',
					qu11: '',
					qu11contents: '',
					qu12: '',
					qu12contents: '',
					qu13: '',
					qu13contents: '',
					qu14: '',
					qu14contents: '',
					qu15: '',
					qu15contents: '',
					rated: '',
					recommend: '',
					other: '',
					confident: '',
					comment: ''
				}
			};
		},
		created: function() {
			this.getDate();
			this.initFileList();
			this.initquesion();
		},
		computed: {},
		methods: {
			upload_file(type) {
				return this.baseUrl + 'api/reviewer/up_file/type/' + type;
			},
			onSubmit() {
				if (this.detailDate.articlefile == '') {
					this.$message.error('you must upload article file');
					console.log('file up error');
					return false;
				}
				this.$api
					.post('api/Reviewer/articleReviewerUpSubmit/type/editor', this.detailDate)
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('success');
							this.$router.go(0);
						} else {
							this.$message.error('Failed to submit, please contact administrator!');
							console.log(res.msg);
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//初始化详情信息
			getDate() {
				this.$api
					.post('api/Reviewer/getartrevdate', {
						revid: this.dateId,
						human: 'editor'
					})
					.then((res) => {
						this.detailDate.artrevid = res.art_rev_id;
						this.detailDate.article = res.article_title;
						this.detailDate.reviewer = res.account;
						this.detailDate.ctime = res.ctime;
						this.detailDate.state = res.state;
						
						this.txt_mess = res
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//初始化filelist
			initFileList() {
				this.$api
					.post('api/Reviewer/getFilelistByID', {
						revid: this.dateId
					})
					.then((res) => {
						this.articlefileList = res.hasOwnProperty('articlefile') ? res.articlefile : [];
						this.articlezipList = res.hasOwnProperty('articlezip') ? res.articlezip : [];
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//初始化问卷
			initquesion() {
				this.$api.post('api/Reviewer/getQuestion', {
					artrevid: this.dateId
				}).then((res) => {
					if (res.code == 0) {
						this.questionform = res.data;
						this.questionform.rev_qu_id = res.data.rev_qu_id;
						this.questionform.qu1 = res.data.qu1;
						this.questionform.qu2 = res.data.qu2;
						this.questionform.qu3 = res.data.qu3;
						this.questionform.qu4 = res.data.qu4;
						this.questionform.qu5 = res.data.qu5;
						this.questionform.qu6 = res.data.qu6;
						this.questionform.qu7 = res.data.qu7;
						this.questionform.qu8 = res.data.qu8;
						this.questionform.qu9 = res.data.qu9 == 0 ? false : true;
						this.questionform.qu9contents = res.data.qu9_contents;
						this.questionform.qu10 = res.data.qu10 == 0 ? false : true;
						this.questionform.qu10contents = res.data.qu10_contents;
						this.questionform.qu11 = res.data.qu11 == 0 ? false : true;
						this.questionform.qu11contents = res.data.qu11_contents;
						this.questionform.qu12 = res.data.qu12 == 0 ? false : true;
						this.questionform.qu12contents = res.data.qu12_contents;
						this.questionform.qu13 = res.data.qu13 == 0 ? false : true;
						this.questionform.qu13contents = res.data.qu13_contents;
						this.questionform.qu14 = res.data.qu14 == 0 ? false : true;
						this.questionform.qu14contents = res.data.qu14_contents;
						this.questionform.qu15 = res.data.qu15 == 0 ? false : true;
						this.questionform.qu15contents = res.data.qu15_contents;
						this.questionform.rated = res.data.rated;
						this.questionform.recommend = res.data.recommend;
						this.questionform.other = res.data.other;
						this.questionform.confident = res.data.confidential;
						this.questionform.comment = res.data.comments;
						this.questionform.is_anonymous = res.data.is_anonymous;
					}
				});
			},
			//检验上传文件的格式
			beforeupload_file(file) {
				// const isWORd =
				//     file.type === 'application/msword' ||
				//     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
				// if (!isWORd) {
				//     this.$message.error('Only word files can be uploaded(.doc,.docx)');
				// }
				// return isWORd;
			},
			beforeupload_articlezip(file) {
				// const iszip = file.type === 'application/x-zip-compressed' || file.name.split('.')[1] === 'rar';
				// if (!iszip) {
				//     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
				// }
				// return iszip;
			},
			getlinkurl(row) {
				return this.mediaUrl + row.file_url;
			},
			filedateformate(row, column, cellValue, index) {
				return this.formatDate(cellValue);
			},
			uperr_file(err) {
				this.$message.error('上传失败');
			},
			beforeupload() {},
			upSuccess_file(res, file) {
				if (res.code == 0) {
					this.detailDate.articlefile = 'articlefile/' + res.upurl;
				} else {
					this.$message.error('服务器上传错误：' + res.msg);
				}
			},
			upSuccess_articlezip(res, file) {
				if (res.code == 0) {
					this.detailDate.articlezip = 'articlezip/' + res.upurl;
				} else {
					this.$message.error('服务器上传错误：' + res.msg);
				}
			},
			formatDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + ' ' + h + ':' + m + ':' + s;
			},
			//超出传送文件个数限制
			alertlimit() {
				this.$message.error('超过最大上传文件个数');
			},
			//清除文件时的事件
			removefilearticlefile(file, fileList) {
				this.detailDate.articlefile = '';
			},
			removefilearticlezip(file, fileList) {
				this.detailDate.articlezip = '';
			},
			mystate(mystate) {
				let str = '';
				switch (mystate) {
					case 0:
						str = 'With reviewer';
						break;
					case 1:
						str = 'Revision';
						break;
					case 2:
						str = 'Reject';
						break;
					case 3:
						str = 'Accept';
						break;
				}
				return str;
			}
		}
	};
</script>


<style scoped>
	.dwnbtn {
		margin-bottom: 5px;
	}

	.container {
		min-width: 1000px;
	}

	.tree_box {
		padding: 15px 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
