<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Manuscript detail
				</el-breadcrumb-item>
				<el-breadcrumb-item>article detail</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading">
			<el-row>
				<el-col :span="12">
					<div class="form-box">
						<el-form ref="articleform" :model="detailDate" label-width="200px">
							<el-form-item label="Manuscript title">
								<span>{{detailDate.article}}</span>
							</el-form-item>
							<el-form-item label="Manuscript ID">
								<span>{{detailDate.acceptSN}}</span>
							</el-form-item>
							<el-form-item label="Manuscript state">
								<span>{{mystate(detailDate.state)}}</span>
							</el-form-item>
							<el-form-item label=" ">
								<span>If you can not download the manuscript, please try other browsers instead of google one.</span>
							</el-form-item>
							<el-form-item label="Figures">
								<el-popover placement="right" width="350" trigger="click">
									<el-table :data="figFileList" empty-text="New messages (0)">
										<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
										<el-table-column width="100" property="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-form-item>
							<el-form-item label="Manuscirpt">
								<el-popover placement="right" width="350" trigger="click">
									<el-table :data="articlefileList" empty-text="New messages (0)">
										<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
										<el-table-column width="100" property="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-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"
                                    :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>reupload</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="auto" 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"
                                    :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>reupload</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 upload</el-button>
                            </el-form-item> -->
						</el-form>
					</div>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<h2>Feedback questionnaire</h2>
						</div>
						<el-form :model="questionform" :rules="rules" ref="question" label-width="300px" label-position="top">
							<el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
							<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-form-item label="2.Technical Quality">
								<el-radio-group v-model="questionform.qu2">
									<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-form-item label="3.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-form-item label="4.Style & Overall Representation">
								<el-radio-group v-model="questionform.qu4">
									<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-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-form-item label="6.Suitability for 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-form-item label="7.Adequate Illustrations or Drawings">
								<el-radio-group v-model="questionform.qu7">
									<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-form-item label="8.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-collapse>
								<el-form-item label="9.Does the title represent manuscript's contents?">
									<el-switch v-model="questionform.qu9" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="1">
										<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-form-item>
								<el-form-item label="10.Is the Abstract accurate and concise?">
									<el-switch v-model="questionform.qu10" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="2">
										<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-form-item>
								<el-form-item label="11.Are the approach/ methods properly described?">
									<el-switch v-model="questionform.qu11" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="3">
										<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-form-item>
								<el-form-item label="12.Are the conclusions and interpretations sound?">
									<el-switch v-model="questionform.qu12" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="4">
										<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-form-item>
								<el-form-item label="13.Are the references properly cited?">
									<el-switch v-model="questionform.qu13" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="5">
										<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-form-item>
								<el-form-item label="14.Is this a new/ original/ confirmatory contribution?">
									<el-switch v-model="questionform.qu14" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="6">
										<template slot="title">
											<i class="el-icon-edit"></i>Comments/ Suggestions
										</template>
										<el-input type="textarea" placeholder="please input content" v-model="questionform.qu14contents" :rows="4"></el-input>
									</el-collapse-item>
								</el-form-item>
								<el-form-item label="15.Is it within the scope of the journal?">
									<el-switch v-model="questionform.qu15" active-text="yes" inactive-text="no"></el-switch>
									<el-collapse-item name="7">
										<template slot="title">
											<i class="el-icon-edit"></i>Comments/ Suggestions
										</template>
										<el-input type="textarea" placeholder="please input content" v-model="questionform.qu15contents" :rows="4"></el-input>
									</el-collapse-item>
								</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>
									<br />
									<span>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" v-if="this.txt_mess.atype == 'Comment' || this.txt_mess.atype == 'News'">
									<el-input type="textarea" placeholder="please input content" v-model="questionform.comment" :rows="8"></el-input>
								</el-form-item>
								<el-form-item label="Comments for the Authors" prop="comment" v-if="this.txt_mess.atype != 'Comment' && this.txt_mess.atype != 'News'">
									<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.confidential" :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-form-item>
									<el-button type="primary" @click="questionSubmit">submit</el-button>
								</el-form-item>
							</el-collapse>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</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'),
				loading: false,
				articlefileList: [],
				figFileList: [],
				articlezipList: [],
				txt_mess: {},
				detailDate: {
					artrevid: '',
					article: '',
					acceptSN: '',
					reviewer: '',
					articlefile: '',
					articlezip: '',
					ctime: '',
					state: ''
				},
				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: ''
				},
				rules: {
					recommend: [{
						required: true,
						message: 'please select',
						trigger: 'blur'
					}],
					comment: [{
						required: true,
						message: "please input content",
						trigger: "blur"
					}],
				}
			};
		},
		created: function() {
			this.getDate();
			this.initFileList();
			this.initquesion();
		},
		computed: {},
		methods: {
			upload_file(type) {
				return this.baseUrl + 'api/reviewer/up_file/type/' + type;
			},
			questionSubmit() {
				if (this.questionform.is_anonymous == "" && this.questionform.is_anonymous != "0") {
					this.$message.error('Please choose disclose your name or remain anonymous.');
				} else {
					this.$refs.question.validate((valid) => {
					if (valid) {
						this.loading = true;
						this.$api
						.post('api/Reviewer/questionSubmit', this.questionform)
						.then((res) => {
							this.loading = false;
							if (res.code == 0) {
								this.$message.success('success!!');
								this.$router.go(0);
							} else {
								this.$message.error('question submit error');
							}
						});
					} else {
						this.loading = false
						this.$message.error('Please complete the information!');
					}
				});
				}
				
			},
			onSubmit() {
				if (this.detailDate.articlefile == '') {
					this.$message.error('you must upload article file');
					console.log('file up error');
					return false;
				}
				this.loading = true;
				this.$api
					.post('api/Reviewer/articleReviewerUpSubmit/type/reviewer', this.detailDate)
					.then((res) => {
						this.loading = false;
						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: 'reviewer'
					})
					.then((res) => {
						if (res.state == 4) {
							this.$message.error('this review expired!');
							this.$router.push('/reviewerArticleList');
						}
						this.detailDate.artrevid = res.art_rev_id;
						this.detailDate.article = res.article_title;
						this.detailDate.acceptSN = res.accept_sn;
						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/getAFilelistByID', {
						revid: this.dateId
					})
					.then((res) => {
						this.articlefileList = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
				this.$api
					.post('api/Reviewer/getBFilelistByID', {
						revid: this.dateId
					})
					.then((res) => {
						this.figFileList = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//初始化问卷
			initquesion() {
				this.$api.post('api/Reviewer/getQuestion', {
					artrevid: this.dateId
				}).then((res) => {
					if (res.code == 0) {
						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;
						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('Upload error');
			},
			beforeupload() {},
			upSuccess_file(res, file) {
				if (res.code == 0) {
					this.detailDate.articlefile = 'articlefile/' + res.upurl;
				} else {
					this.$message.error('Service error:' + res.msg);
				}
			},
			upSuccess_articlezip(res, file) {
				if (res.code == 0) {
					this.detailDate.articlezip = 'articlezip/' + res.upurl;
				} else {
					this.$message.error('Service 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('The maximum number of uploaded files has been exceeded');
			},
			//清除文件时的事件
			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;
					case 4:
						str = 'invalid';
						break;
					case 5:
						str = 'invitation';
						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);
	}

	h2 {
		text-align: center;
	}

	.sectitle {
		font-size: 15px;
		font-weight: 500;
		/* line-height: 25px; */
	}
</style>
