<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-coordinate"></i>
					<router-link :to="{path:'/partyList'}">
						<span class="top_dao"> User List</span>
					</router-link>
					>> User Role
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..." style="min-width: 800px;"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<el-tabs tab-position="top" style="margin: 30px 20px 0 20px;">
				<el-tab-pane label="User information">
					<div class="s_rol" style="margin-top: 10px;">
						<h3>
							Basic information
							<el-button @click="handleMessage" type="primary" icon="el-icon-edit" size="mini" round>
								Edit message
							</el-button>
						</h3>
						<div class="rol_mess">
							<font style="margin-top: 35px;vertical-align: top;">Picture :</font>
							<div class="portrait" @click="unplIcon">
								<img src="../../assets/img/userImg.jpg" class="portrait" v-if="pictureUrl==''">
								<img :src="pictureUrl" class="portrait" v-if="pictureUrl!=''">
								<el-upload class="avatar-uploader" ref="upIconIMg"
									:action="baseUrl+'api/Ucenter/up_userIcon_file'" :show-file-list="false" name="icon"
									:on-success="handleAvatarSuccess2" :on-error="handleAvatarError2"
									:before-upload="beforeAvatarUpload2" style="display: none;">
									<img v-if="pictureUrl" :src="pictureUrl" class="avatar" accept=".png,.jpg">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div class="ptmark">Upload avatar</div>
							</div>

						</div>
						<div class="rol_mess">
							<font>Account :</font>
							<p class="rm_huid">{{userMessage.account}}</p>
						</div>
						<div class="rol_mess">
							<font>Email :</font>
							<p class="rm_huid">{{userMessage.email}}</p>
						</div>
						<div class="rol_mess">
							<font>English name :</font>
							<p class="rm_huid">{{userMessage.realname}}</p>
						</div>
						<div class="rol_mess">
							<font>Local language name :</font>
							<p class="rm_huid">{{userMessage.localname}}</p>
						</div>
						<div class="rol_mess">
							<font>Phone :</font>
							<p class="rm_huid">{{userMessage.phone}}</p>
						</div>
						<div class="rol_mess">
							<font>Country :</font>
							<p class="rm_huid">{{userMessage.country}}</p>
						</div>
						<div class="rol_mess">
							<font>Title :</font>
							<p class="rm_huid">{{userMessage.technical}}</p>
						</div>
						<div class="rol_mess">
							<font>Major :</font>
							<p class="rm_huid">{{userMessage.majorStr}}</p>
						</div>
						<div class="rol_mess" v-if="userMessage.company!=''&&userMessage.company!=undefined">
							<font>Company :</font>
							<p class="rm_huid">{{userMessage.company}}</p>
						</div>
						<div class="rol_mess">
							<font>Field :</font>
							<p class="rm_huid">{{userMessage.field}}</p>
						</div>
						<div class="rol_mess">
							<font>Introduction :</font>
							<p class="rm_huid">{{userMessage.introduction}}</p>
						</div>
						<div class="rol_mess">
							<font>CV. :</font>
							<p class="rm_huid">
								<img src="../../assets/img/icon_0.png" alt="" class="icon_img"
									v-if="cvitaTable.length>0&&cvitaTable!=undefined">
								<span v-if="cvitaTable.length>0&&cvitaTable!=undefined"
									style="margin-left: 10px;color: #888;font-size: 13px;vertical-align: text-bottom;">
									<i class="el-icon-paperclip"></i>
									{{formatDate(cvitaTable[cvitaTable.length-1].ctime)}}
								</span>
								<el-button type="primary" @click="openCVita()" size="mini"
									style="vertical-align: text-bottom;padding: 4px 8px;margin-left: 10px;">
									<i class="el-icon-document"></i>
									Update / View
								</el-button>
							</p>
						</div>
					</div>
					<div class="s_rol">
						<h3>
							Index
						</h3>
						<div class="rol_mess">
							<font>Grade :</font>
							<p style="display: inline-block;">
								<img src="../../assets/img/star-all.png" v-for="item in starList"
									v-if="starList_mark<=8&&item.star==1" class="starSty">
								<img src="../../assets/img/star-traf.png" v-for="item in starList"
									v-if="starList_mark<=8&&item.star==0" class="starSty">
								<img src="../../assets/img/star-none.png" v-for="item in starList"
									v-if="starList_mark<=8&&item.star==2" class="starSty">
								<img src="../../assets/img/star-all.png" v-if="starList_mark>8" class="starSty">
								<b style="font-size: 15px;color: #b77614;" v-if="starList_mark>8">×
									{{starList_mark}}</b>
							</p>
						</div>
						<div class="rol_mess">
							<font>WOS Index :</font>
							<span v-html="colorIndex(userMessage.wos_index,userMessage.wos_time)"></span>
							<b class="el-icon-edit pencil" @click="handleIndex(1)"></b>
						</div>
						<div class="rol_mess">
							<font>Google Index :</font>
							<span v-html="colorIndex(userMessage.google_index,userMessage.google_time)"></span>
							<b class="el-icon-edit pencil" @click="handleIndex(2)" v-if="userMessage.g_author==''"></b>
							<b class="el-icon-refresh-right pencil" @click="freshIndex"
								v-if="userMessage.g_author!=''"></b>
						</div>
						<div class="rol_mess">
							<img src="../../assets/img/browser.png" alt=""
								style="width: 20px;vertical-align: sub;margin-right: 5px;">
							<font style="width: 125px;">Google account :</font>
							<b class="el-icon-check" v-if="userMessage.g_author!=''"
								style="font-size: 20px;font-weight: bold;color: #2a9916;"></b>
							<a v-if="userMessage.g_author!=''" target="_blank"
								:href="'https://scholar.google.it/citations?user='+userMessage.g_author"
								class="webLink">
								Certified
							</a>
							<el-button @click="handleIndex(3)" type="warning" icon="el-icon-paperclip" size="mini" round
								style="margin: 0 0 0 5px;padding: 5px 12px;" v-if="userMessage.g_author==''">Certified
							</el-button>
						</div>
						<p v-if="geogleList.length!=0&&bankVisible" style="margin:30px 0 20px 0;font-weight: bold;">
							Please select one and press the OK button.
						</p>
						<div v-for="item in geogleList"
							:class="IndexForm.g_author == item.author_id?'gugeList gu_col':'gugeList'"
							@click="choseGego(item)" v-if="bankVisible">
							<p style="font-weight: bold;letter-spacing: -0.5px;">{{item.name}}</p>
							<p>
								<font>Email :</font>{{item.email}}
							</p>
							<p>
								<font>Affiliations :</font>{{item.affiliations}}
							</p>
							<p><a :href="item.link" target="_blank">{{item.link}}</a></p>
							<i class="kuangGeo"></i>
							<b class="el-icon-check"></b>
						</div>
						<div style="text-align: right;" v-if="geogleList.length!=0&&bankVisible">
							<el-button @click="bankVisible = false">Cancel</el-button>
							<el-button type="primary" @click="saveIndex(IndexForm)">OK</el-button>
						</div>
						<p v-if="geogleList.length==0&&bankVisible" style="text-align: center;color: #999;">
							No corresponding data
						</p>
					</div>
				</el-tab-pane>
				<el-tab-pane label="User role">
					<p style="text-align: right;margin: 0 0 20px 0;">
						<el-button @click="handleAddGuest" type="primary" icon="el-icon-plus" size="mini" round>Add
							User
							Role</el-button>
					</p>

					<div class="s_rol" v-if="this.role_author==1">
						<h3 style="color: #006699;">
							Author
						</h3>
						<div class="rol_art">
							<p v-if="authorTable.manuscriptNum!=undefined">
								<b class="colNUmber">{{authorTable.manuscriptNum}}</b>
								articles submitted.
							</p>
							<p v-if="authorTable.accept!=undefined">
								<b class="colNUmber">{{authorTable.accept}}</b>
								articles accepted.
							</p>
							<p v-if="authorTable.index!=undefined">
								<b class="colNUmber">{{authorTable.index}}</b>
								records citing.
							</p>
						</div>
					</div>
					<div class="s_rol" v-if="this.role_editor==1">
						<h3 style="color: #006699;">
							Editor
						</h3>
						<div class="rol_art">

						</div>
					</div>
					<div class="s_rol" v-if="this.role_chief==1">
						<h3 style="color: #006699;">
							Editor-in-Chief
						</h3>
						<div class="rol_art">

						</div>
					</div>
					<div class="s_rol" v-if="this.role_reviewer==1">
						<h3 style="color: #006699;">
							Reviewer
						</h3>
						<div class="rol_art">
							<p class="roLrevi" v-for="index in review_journal">
								<b>{{index.title}}</b>
							</p>
							<p>
								<b class="colNUmber">{{reviewTable.successReview}}</b>
								manuscripts reviewed.
							</p>
						</div>
					</div>
					<div class="s_rol" v-if="this.role_board==1">
						<h3 style="color: #006699;">
							Editorial Board Member
						</h3>
						<div class="rol_art">
							<p v-for="(item,index) in board_journal">
								<b>{{item.title}}</b>
							</p>
						</div>
					</div>
					<div class="s_rol" v-if="this.role_yboard==1">
						<h3 style="color: #006699;">
							Young Scientist
						</h3>
						<div class="rol_art">
							<p v-for="(item,index) in youth_journal">
								<b>{{item.title}}</b>
								<i class="el-icon-arrow-up arrowBtn" v-if="item.arrowMark==0"
									@click="arrowBtnChange(index,1)"></i>
								<i class="el-icon-arrow-down arrowBtn" v-if="item.arrowMark==1"
									@click="arrowBtnChange(index,0)"></i>
								<font v-if="item.arrowMark==1">
									<span style="display: block;margin-top: 15px;"></span>
									<span v-for="ihxd in item.sd" style="display: block;margin-top: 5px;">
										{{formatYear(ihxd.start_date)}}
										<span style="margin: 0 3px;">-</span>
										{{formatYear(ihxd.end_date)}}
										<a @click="cerFicte(ihxd.icon)" class="certBtn">
											<i class="el-icon-trophy"></i>
											Certificate
										</a>
									</span>
									<font style="display: block;margin: 10px 0 5px 0">
										Submitted articles :
										<b
											style="color: #006699;font-size: 16px;margin: 0 0 0 5px;">{{item.article_num}}</b>
									</font>
									<font style="display: block;margin: 0 0 25px 0">
										Reviewed articles :
										<b
											style="color: #006699;font-size: 16px;margin: 0 0 0 5px;">{{item.reviewer_num}}</b>
									</font>
								</font>
							</p>
						</div>
					</div>
					<div class="s_rol" v-if="this.role_special==1">
						<h3 style="color: #006699;">
							Guest Editor
						</h3>
						<div class="rol_art">
							<font v-for="item in userMessage.specials">
								{{item.journal_title}}
								<font style="margin: 0 10px;">>></font>
								{{item.title}}
							</font>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<!-- 编辑信息弹出框 -->
		<el-dialog title="Edit personal message" :visible.sync="messageVisible" width="700px">
			<el-form ref="mes_Form" :model="MessForm" :rules="rules" label-width="170px">
				<el-form-item label="Account :" prop="account">
					{{MessForm.account}}
				</el-form-item>
				<el-form-item label="Email :" prop="email">
					{{MessForm.email}}
				</el-form-item>
				<el-form-item label="English name :" prop="realname">
					<el-input v-model="MessForm.realname"></el-input>
					<br>
					<p class="zhujie_name">
						(Will be used for certificate, website, etc. in TMR Publishing Group Products.<br>
						Check
						<a href="https://www.tmrjournals.cn/afoor_text.html?&footer_id=50" target="_blank">Privacy
							Policy</a>)
					</p>
				</el-form-item>
				<el-form-item label="Local language name :" prop="localname">
					<el-input v-model="MessForm.localname"></el-input>
					<br>
					<p class="zhujie_name">
						(Just be used for view for users themselves and editors. <br>
						Check
						<a href="https://www.tmrjournals.cn/afoor_text.html?&footer_id=50" target="_blank">Privacy
							Policy</a>)
					</p>
				</el-form-item>
				<el-form-item label="Country :" prop="country">
					<el-select v-model="MessForm.country" filterable placeholder="Please select" value-key="groupID"
						style="width: 200px;">
						<el-option v-for="item in df_country" :key="item.en_name" :label="item.en_name"
							:value="item.en_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Title :" prop="technical">
					<el-select v-model="MessForm.technical" filterable placeholder="Please select" value-key="groupID"
						style="width: 200px;">
						<el-option v-for="item in df_technical" :key="item.label" :label="item.label"
							:value="item.label"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Major :" prop="majors_a">
					<el-select v-model="MessForm.major_a" placeholder="Please select" @change="majorChange(1)"
						style="width: 150px;margin: 0 10px 0 0;">
						<el-option v-for="item in majors_a" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
					<el-select v-model="MessForm.major_b" placeholder="Please select" v-if="majors_b!=''"
						@change="majorChange(2)" style="width: 150px;margin:0 10px 0 0;">
						<el-option :key="0" label="None" :value="0"></el-option>
						<el-option v-for="item in majors_b" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
					<el-select v-model="MessForm.major_c" placeholder="Please select" v-if="majors_c!=''"
						@change="majorChange(3)" style="width: 150px;">
						<el-option :key="0" label="None" :value="0"></el-option>
						<el-option v-for="item in majors_c" :key="item.major_id" :label="item.major_title"
							:value="item.major_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Company :" prop="company">
					<el-input v-model="MessForm.company" placeholder="Please enter"></el-input>
				</el-form-item>
				<el-form-item label="Field :" prop="field">
					<el-input v-model="MessForm.field" placeholder="Please enter" type="textarea" autosize>
					</el-input>
				</el-form-item>
				<el-form-item label="Introduction :">
					<el-input v-model="MessForm.introduction" placeholder="Please enter" type="textarea" autosize>
					</el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="messageVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveMessage(MessForm)">OK</el-button>
			</span>
		</el-dialog>

		<!-- H指数弹出框 -->
		<el-dialog title="Edit personal index" :visible.sync="indexVisible" width="600px">
			<el-form ref="index_Form" :model="IndexForm" :rules="rules" label-width="170px">
				<el-form-item label="Account :" prop="account">
					{{IndexForm.account}}
				</el-form-item>
				<el-form-item v-if="IndexForm.number==1">
					<span slot="label">
						WOS H index ({{this.now_year}}) :
					</span>
					<el-input v-model="IndexForm.wos_index"></el-input>
				</el-form-item>
				<el-form-item v-if="IndexForm.number==2">
					<span slot="label">
						Google H index ({{this.now_year}}) :
					</span>
					<el-input v-model="IndexForm.google_index"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="indexVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveIndex(IndexForm)">OK</el-button>
			</span>
		</el-dialog>

		<!-- 添加身份 -->
		<el-dialog title="Add User Role" :visible.sync="guestVisible" width="700px">
			<el-form ref="applyTab" :model="addRoleForm" :rules="rules" label-width="130px">
				<el-form-item label="Realname :">
					{{addRoleForm.realname}}
				</el-form-item>
				<el-form-item label="Email :">
					{{addRoleForm.email}}
				</el-form-item>
				<el-form-item label="User Role :" prop="role_type">
					<el-select v-model="addRoleForm.role_type" @change="chan_role(addRoleForm.role_type)">
						<el-option v-for="item in df_role" :label="item.title" :key="item.type" :value="item.type">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- 审稿人 -->
				<div v-if="addRoleForm.role_type=='reviewer'">
					<el-form-item label="Journal :" prop="journal_id">
						<el-select v-model="addRoleForm.journal_id" placeholder="Please select a journal"
							@change="changeShow()" style="width: 300px;">
							<el-option v-for="item in df_jour_reviewer" :label="item.title" :key="item.journal_id"
								:value="item.journal_id"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<!-- 编委 -->
				<div v-if="addRoleForm.role_type=='board'">
					<el-form-item label="Journal :" prop="journal_id">
						<el-select v-model="addRoleForm.journal_id" placeholder="Please select a journal"
							@change="changeJourboard();changeShow()" style="width: 300px;">
							<el-option v-for="item in df_jour_board" :label="item.title" :key="item.journal_id"
								:value="item.journal_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Identity :" prop="type">
						<el-radio-group v-model="addRoleForm.type">
							<el-radio :label="0">Editor-in-Chief</el-radio>
							<el-radio :label="1">Vice Editor-in-Chief</el-radio>
							<el-radio :label="2">Editorial Board Members</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="Group :" prop="board_group_id" v-if="addRoleForm.type==2">
						<el-select v-model="addRoleForm.board_group_id" placeholder="Please select a group"
							@change="changeShow()" style="width: 300px;">
							<el-option v-for="item in df_group_board" :label="item.group_name"
								:key="item.board_group_id" :value="item.board_group_id"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<!-- 青年科学家 -->
				<div v-if="addRoleForm.role_type=='yboard'">
					<el-form-item label="Journal :" prop="journal_id">
						<el-select v-model="addRoleForm.journal_id" placeholder="Please select a journal"
							@change="changeJourYboard(addRoleForm.journal_id);changeShow()" style="width: 270px;">
							<el-option v-for="item in df_jour_yboard" :label="item.title" :key="item.journal_id"
								:value="item.journal_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Term of office :" prop="year">
						<el-select v-model="addRoleForm.year" placeholder="Please select a year">
							<el-option v-for="item in list_year" :label="item.title" :key="item.id" :value="item.id">
							</el-option>
						</el-select>
						<span v-if="addRoleForm.yboardMark==1" style="margin-left: 15px;color: #888;">(Journal
							Renewal)</span>
					</el-form-item>
				</div>
				<!-- 客座 -->
				<div v-if="addRoleForm.role_type=='special'">
					<el-form-item label="Journal :" prop="issn_id">
						<el-select v-model="addRoleForm.issn_id" @change="chan_jour">
							<el-option v-for="item in df_jour_special" :label="item.title" :key="item.issn"
								:value="item.issn">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Guest Journal :" prop="special_id">
						<el-select v-model="addRoleForm.special_id" style="width: 360px;">
							<el-option v-for="item in df_guest" :label="item.title" :key="item.journal_special_id"
								:value="item.journal_special_id"></el-option>
						</el-select>
					</el-form-item>
				</div>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="guestVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveApply">Save</el-button>
			</span>
		</el-dialog>


		<!-- 个人简历弹出框 -->
		<el-dialog title="CV. List" :visible.sync="cvitaVisible" width="500px">
			<p style="margin: 0 0 25px 28px;font-size: 18px;">CV. List</p>
			<p style="color: #aaa;margin: 0 0 30px 28px;" v-if="cvitaTable.length==0">No data</p>
			<div v-for="(item,index) in cvitaTable" style="margin: 0 0 0 30px;">
				{{index+1}}.
				<img src="../../assets/img/icon_0.png" alt="" class="icon_img"
					style="vertical-align: middle;margin-left: 10px;">
				<span style="margin-left: 20px;color: #888;font-size: 13px;">
					<i class="el-icon-paperclip"></i>
					{{formatDate(item.ctime)}}
				</span>
				<a :href="mediaUrl+'reviewer/'+item.cv" target="_blank" class="txt_pdf">
					<i class="el-icon-download"></i>
				</a>
				<i class="el-icon-delete" @click="deletCVita(item)"
					style="color: #f12424;cursor: pointer;font-weight: bold;margin: 0 0 0 15px;"></i>
			</div>
			<p style="width: 90%;background-color: #d7d7d7;height: 1px;margin: 10px auto 30px auto;"></p>
			<p style="margin: 0 0 25px 28px;">If you want to update your resume, please upload it.</p>
			<el-form :model="cvitaForm" :rules="rules" ref="cvita_Form" label-width="70px">
				<el-form-item label="CV. :">
					<el-upload class="upload-demo" :action="baseUrl+'api/Ucenter/up_cv_file'"
						:on-success="handleFileSuccess1" name="reviewerCV" type="reviewerCV" :on-error="handleFileError"
						:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
						:on-change="handleChange1" accept=".pdf" :on-exceed="handleExceed" ref="uploadRef1">
						<el-button type="text" style="font-weight: bolder;">
							<b class="el-icon-lx-top" style="font-weight: bolder;"></b>upload
						</el-button>
					</el-upload>
					<span style="font-size: 12px; color: #aaa;">
						Only pdf files can be uploaded(.pdf)
					</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cvitaVisible = false">Close</el-button>
			</span>
		</el-dialog>


		<!-- 证书弹出框 -->
		<el-dialog :visible.sync="cerVisible" width="850px">
			<p style="text-align: right;margin-bottom: 20px;">
				<el-button type="primary" @click="down_pic" icon="el-icon-download">Download</el-button>
			</p>
			<el-image class="table-td-thumb rev_digol" :src="this.IMG_Url"></el-image>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				userrole: localStorage.getItem('U_status'),
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				role_id: this.$route.query.id,
				MessForm: {},
				coreTable: {},
				IndexForm: {
					wos_index: '',
					google_index: '',
				},
				geogleList: [],
				reviewTable: {},
				authorTable: {},
				cvitaTable: [],
				review_journal: [],
				board_journal: [],
				youth_journal: [],
				starList: [],
				starList_mark: 0,
				cerVisible: false,
				cvitaForm: {},
				IMG_Url: '',
				pictureUrl: '',
				messageVisible: false,
				indexVisible: false,
				bankVisible: false,
				cvitaVisible: false,
				fileL_pdf1: [],
				now_year: 0,
				majors_a: [],
				majors_b: [],
				majors_c: [],
				df_jour_reviewer: [],
				df_jour_board: [],
				df_jour_yboard: [],
				df_jour_special: [],
				df_group_board: [],
				df_guest: [],
				df_country: [],
				df_role: [
					// {
					// 	title: 'Author',
					// 	type: 'author',
					// }, {
					// 	title: 'Editor',
					// 	type: 'editor',
					// }, {
					// 	title: 'Editor-in-Chief',
					// 	type: 'chief',
					// }, 
					// {
					// 	title: 'Reviewer',
					// 	type: 'reviewer',
					// }, {
					// 	title: 'Editorial Board',
					// 	type: 'board',
					// }, 
					{
						title: 'Young Scientist',
						type: 'yboard',
					}, {
						title: 'Guest Editor',
						type: 'special',
					}
				],
				df_technical: [{
					label: 'Prof',
				}, {
					label: 'Associate Prof.',
				}, {
					label: 'Assistant Prof.',
				}, {
					label: 'Ph.D.',
				}, {
					label: 'Researcher',
				}, {
					label: 'Associate research fellow',
				}, {
					label: 'Assistant research fellow',
				}, {
					label: 'Engineer',
				}, {
					label: 'Senior engineer',
				}, {
					label: 'Others',
				}],
				list_year: [{
					title: '1 Year',
					id: 1
				}, {
					title: '2 Years',
					id: 2
				}, {
					title: '3 Years',
					id: 3
				}],
				role_author: 0,
				role_editor: 0,
				role_chief: 0,
				role_reviewer: 0,
				role_board: 0,
				role_yboard: 0,
				role_special: 0,
				userMessage: {},
				addRoleForm: {
					user_id: this.$route.query.id,
					role_type: '',
					issn_id: '',
					special_id: '',
					yboardMark: 0
				},
				guestVisible: false,
				rules: {
					role_type: [{
						required: true,
						message: 'Please select a role',
						trigger: 'blur'
					}],
					board_group_id: [{
						required: true,
						message: 'Please select a group',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: 'Please input type',
						trigger: 'blur'
					}],
					issn_id: [{
						required: true,
						message: 'Please select a journal',
						trigger: 'blur'
					}],
					special_id: [{
						required: true,
						message: 'Please select a guest',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}],
					journal_id: [{
						required: true,
						message: 'Please select journal',
						trigger: 'blur'
					}],
					year: [{
						required: true,
						message: 'Please select year',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select country',
						trigger: 'blur'
					}],
					majors_a: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
					technical: [{
						required: true,
						message: 'Please select title',
						trigger: 'blur'
					}],
					field: [{
						required: true,
						message: 'Please input field',
						trigger: 'blur'
					}],
				}
			};
		},
		mounted() {

		},
		created() {
			this.getSelectData()
			this.getDate()
		},
		methods: {
			// 获取下拉列表
			getSelectData() {
				this.$api
					.post('api/Admin/getCountrys')
					.then(res => {
						this.df_country = res;
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 获取数据
			getDate() {
				this.loading = true
				this.now_year = new Date().getFullYear()
				this.$api
					.post('api/User/getUserDetail', {
						'user_id': this.role_id
					})
					.then(res => {
						if (res.code == 0) {
							this.userMessage = res.data.user;
							this.role_author = 0;
							this.role_editor = 0;
							this.role_chief = 0;
							this.role_reviewer = 0;
							this.role_board = 0;
							this.role_yboard = 0;
							this.role_special = 0;
							let shenfen = this.userMessage.roles
							for (let i = 0; i < shenfen.length; i++) {
								if (shenfen[i] == 'author') {
									this.role_author = 1
								} else if (shenfen[i] == 'editor') {
									this.role_editor = 1
								} else if (shenfen[i] == 'chief') {
									this.role_chief = 1
								} else if (shenfen[i] == 'reviewer') {
									this.role_reviewer = 1
								} else if (shenfen[i] == 'board') {
									this.role_board = 1
								} else if (shenfen[i] == 'yboard') {
									this.role_yboard = 1
								} else if (shenfen[i] == 'special') {
									this.role_special = 1
								}
							}
							this.addRoleForm.email = res.data.user.email
							this.addRoleForm.realname = res.data.user.realname
							this.getINfodata()
							this.loading = false
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},


			// 获取补充数据
			getINfodata() {
				this.$api
					.post('api/Ucenter/getUserInfo', {
						'user_id': this.role_id
					})
					.then(res => {
						if (res.code == 0) {
							if (res.data.baseInfo.icon != '') {
								this.pictureUrl = this.mediaUrl + 'usericon/' + res.data.baseInfo.icon
							} else {
								this.pictureUrl = ''
							}
							this.userMessage.technical = res.data.baseInfo.technical
							this.userMessage.country = res.data.baseInfo.country
							this.userMessage.field = res.data.baseInfo.field
							this.userMessage.introduction = res.data.baseInfo.introduction
							this.userMessage.majorshu = res.data.baseInfo.majorshu
							this.userMessage.majorStr = res.data.baseInfo.majorStr
							this.cvitaForm.user_id = res.data.baseInfo.user_id;

							this.coreTable = res.data.baseInfo
							this.cvitaTable = res.data.cvs

							if (res.data.asAuthor) {
								this.authorTable = res.data.asAuthor
							}
							if (res.data.asReviewer) {
								this.reviewTable = res.data.asReviewer
								this.review_journal = res.data.asReviewer.journal
								this.userMessage.reviewer_id = res.data.asReviewer.reviewer_id
							}
							if (res.data.asBoard) {
								this.board_journal = res.data.asBoard
							}
							if (res.data.Yboard) {
								this.youth_journal = res.data.Yboard
								for (let i = 0; i < this.youth_journal.length; i++) {
									this.youth_journal[i].arrowMark = 1
								}
							}
							this.getScoreData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 评分
			getScoreData() {
				this.starList = []
				if (this.coreTable.score < 0.5 && this.coreTable.score > 0) {
					this.starList.push({
						star: 2
					})
					this.starList_mark = 1
				} else {
					let zheng = Math.floor(this.coreTable.score)
					let xiao = Number(this.coreTable.score) - Math.floor(this.coreTable.score)
					if (xiao >= 0.5) {
						xiao = 0.5
					} else {
						xiao = 0
					}
					for (var i = 0; i < zheng; i++) {
						this.starList.push({
							star: 1
						})
					}
					if (xiao == 0.5) {
						this.starList.push({
							star: 0
						})
					}
					this.starList_mark = Number(zheng) + Number(xiao)
				}

			},


			// 简历弹出层
			openCVita() {
				this.cvitaVisible = true
				this.cvitaForm.cv = ''
			},

			// 删除简历
			deletCVita(e) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete the CV.?', 'Tip', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Ucenter/delUserCv', e)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Delete successful!');
									this.getDate()
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},


			// 个人信息修改
			handleMessage() {
				// this.$router.push({
				// 	path: 'partyRoleEdit',
				// 	query: {
				// 		id: this.userMessage.user_id
				// 	}
				// });

				this.MessForm = JSON.parse(JSON.stringify(this.userMessage))
				this.MessForm.major = 1
				this.MessForm.major_a = ''
				this.MessForm.major_b = ''
				this.MessForm.major_c = ''
				this.MessForm.majorList = []

				if (this.MessForm.majorshu != 0) {
					if (typeof(this.MessForm.majorshu) == 'number') {
						this.MessForm.majorList.push(this.MessForm.majorshu)
					} else {
						this.MessForm.majorList = this.MessForm.majorshu.split(",")
					}
				}

				this.$nextTick(() => {
					this.jiLInaoan()
					this.messageVisible = true
				})
			},

			// 保存个人信息
			saveMessage() {
				this.$api
					.post('api/Ucenter/updateUserInfo', this.MessForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Successfully modified personal information');
							this.messageVisible = false
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 刷新H指数
			freshIndex() {
				this.$api
					.post('api/User/googleGetIndex', this.userMessage)
					.then(res => {
						if (res.code == 0) {
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 个人指数修改
			handleIndex(e) {
				this.IndexForm = JSON.parse(JSON.stringify(this.userMessage))
				this.IndexForm.number = e
				if (e == 3) {
					this.loading = true
					this.$api
						.post('api/User/googleGetAuthor', this.IndexForm)
						.then(res => {
							if (res.code == 0) {
								this.geogleList = res.data.authors
								this.bankVisible = true
								this.loading = false
							} else {
								this.$message.error(res.msg);
								this.loading = false
							}
						})
						.catch(err => {
							this.$message.error(err);
							this.loading = false
						});
				} else {
					this.indexVisible = true
				}
			},

			// 保存个人信息
			saveIndex() {
				let link_geo = ''
				if (this.IndexForm.number == 3) {
					if (this.IndexForm.g_author == '') {
						this.$message.error('Please select one!');
						return
					}
					link_geo = 'api/User/googleBindAuthor'
				} else {
					link_geo = 'api/User/editUserMsg'
				}
				this.$api
					.post(link_geo, this.IndexForm)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Successfully modified personal index');
							this.indexVisible = false;
							this.bankVisible = false;
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 选择填写方式
			checkAddType(e) {
				if (e == 1) {
					this.geogleList = []
				}
				this.$forceUpdate()
			},

			// 选择谷歌账号
			choseGego(e) {
				this.IndexForm.g_author = e.author_id
				this.IndexForm.g_website = e.link
			},

			// 指数颜色
			colorIndex(num, time) {
				if (time != 0) {
					let date = new Date(parseInt(time * 1000));
					let Y = date.getFullYear() + '-';
					let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
					let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
					let H = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
					let U = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
					time = Y + M + D;
				}

				let str = '';
				if (num < 10) {
					str = '<b style="color:#cb160a">' + num +
						'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				} else if (num < 15) {
					str = '<b style="color:#cbb504">' + num +
						'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				} else {
					str = '<b style="color:#0cbc15">' + num +
						'</b><span style="color:#aaa;font-size:14px;margin-left:5px;"> (' + time +
						')</span>'
				}
				if (time == 0) {
					str =
						'<b style="color:#aaa;">0 </b><span style="color:#aaa;font-size:14px;margin-left:5px;">(No time)</span>'
				}
				return str;
			},

			// 下拉身份
			chan_role(e) {
				this.addRoleForm.journal_id = ''
				this.addRoleForm.yboardMark = 0
				if (e == 'reviewer') {
					// 申请审稿人期刊列表
					if (this.role_reviewer == 1) {
						this.$api
							.post('api/Journal/getJournalsForReviewerInEditor', {
								'editor_id': localStorage.getItem('U_id'),
								'reviewer_id': this.userMessage.reviewer_id,
							})
							.then(res => {
								if (res.code == 0) {
									this.df_jour_reviewer = res.data.journals
								} else {
									this.$message.error(res.msg);
								}

							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$api
							.post('api/Chief/getJournalsByEditor', {
								'user_id': localStorage.getItem('U_id')
							})
							.then(res => {
								if (res.code == 0) {
									this.df_jour_reviewer = res.data.journals;
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					}

				} else if (e == 'board') {
					// 申请编委期刊列表
					this.$api
						.post('api/Chief/getJournalsByEditor', {
							'user_id': localStorage.getItem('U_id')
						})
						.then(res => {
							if (res.code == 0) {
								this.df_jour_board = res.data.journals;
								this.addRoleForm.journal_id = this.df_jour_board[0].journal_id
								this.changeJourboard();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else if (e == 'yboard') {
					// 申请青年科学家期刊列表
					this.$api
						.post('api/Chief/getJournalsByEditor', {
							'user_id': localStorage.getItem('U_id')
						})
						.then(res => {
							if (res.code == 0) {
								this.df_jour_yboard = res.data.journals;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else if (e == 'special') {
					// 申请客座期刊列表
					this.$api
						.post('api/Chief/getJournalsByEditor', {
							'user_id': localStorage.getItem('U_id')
						})
						.then(res => {
							if (res.code == 0) {
								this.df_jour_special = res.data.journals;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},

			// 改变编委分组
			changeJourboard() {
				this.$api
					.post('api/Board/getBoardGroupList', {
						journal_id: this.addRoleForm.journal_id
					})
					.then(res => {
						if (res.code == 0) {
							this.df_group_board = res.data.groups;
							this.df_group_board.unshift({
								'board_group_id': 0,
								'group_name': 'No Group'
							})
							this.addRoleForm.board_group_id = 0
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 更改青年科学家期刊
			changeJourYboard(e) {
				this.addRoleForm.yboardMark = 0
				for (let i = 0; i < this.youth_journal.length; i++) {
					if (e == this.youth_journal[i].journal_id) {
						this.addRoleForm.yboardMark = 1
					}
				}
			},

			// 下拉期刊客座
			chan_jour() {
				this.addRoleForm.special_id = ''
				this.$api
					.post('api/Special/getSpecialByIssn', {
						'journal_issn': this.addRoleForm.issn_id
					})
					.then(res => {
						if (res.code == 0) {
							this.df_guest = res.data.specials;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 客座弹出框
			handleAddGuest() {
				this.guestVisible = true
			},

			// 添加身份
			saveApply() {
				let urlApply = ''
				// 审稿人身份
				if (this.addRoleForm.role_type == 'reviewer') {
					urlApply = 'api/Reviewer/addReviewerBee'
				}

				// 编委身份
				if (this.addRoleForm.role_type == 'board') {
					urlApply = 'api/Board/addBoard'
				}

				// 青年科学家身份
				if (this.addRoleForm.role_type == 'yboard') {
					urlApply = 'api/User/addYboard'
				}

				// 客座身份
				if (this.addRoleForm.role_type == 'special') {
					if (this.addRoleForm.yboardMark == 1) {
						urlApply = 'api/User/addYboardContinue' //续约
					} else {
						urlApply = 'api/User/addUserRole'
					}
				}

				// console.log(this.addRoleForm)
				// return

				this.$refs.applyTab.validate((valid) => {
					if (valid) {
						this.$api
							.post(urlApply, this.addRoleForm)
							.then(res => {
								if (res.code == 0) {
									this.guestVisible = false
									this.getDate()
									this.$refs.guestTab.resetFields()
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},


			// 修改选择领域
			jiLInaoan() {
				this.majors_a = []
				this.majors_b = []
				this.majors_c = []
				this.$api
					.post('api/Ucenter/getMajor', {
						major_id: 1
					}).then((res) => {
						this.majors_a = res.data.major.children;
						if (this.MessForm.majorList[0] != undefined) {
							this.MessForm.major_a = Number(this.MessForm.majorList[0])
							this.$api
								.post('api/Ucenter/getMajor', {
									major_id: this.MessForm.major_a
								}).then((res) => {
									this.majors_b = res.data.major.children;
									this.majors_c = []
									this.MessForm.major_b = ''
									this.MessForm.major_c = ''
									this.majorChange_panduan()
									if (this.MessForm.majorList[1] != undefined) {
										this.MessForm.major_b = Number(this.MessForm.majorList[1])
										this.$api
											.post('api/Ucenter/getMajor', {
												major_id: this.MessForm.major_b
											})
											.then((ref) => {
												if (ref.data.major.children.length != 0) {
													this.majors_c = ref.data.major.children;
													this.majorChange_panduan()
													if (this.MessForm.majorList[2] != undefined) {
														this.MessForm.major_c = Number(this.MessForm.majorList[
															2])
														this.majorChange_panduan()
													}
												}
											});
									}
								});
						}
					});
			},

			majorChange(e) {
				if (e == 1) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.MessForm.major_a
						}).then((res) => {
							this.majors_b = res.data.major.children;
							this.majors_c = []
							this.MessForm.major_b = ''
							this.MessForm.major_c = ''
							this.majorChange_panduan()
						});
				} else if (e == 2 && this.MessForm.major_b != 0) {
					this.$api
						.post('api/Ucenter/getMajor', {
							major_id: this.MessForm.major_b
						}).then((res) => {
							this.majors_c = res.data.major.children;
							this.MessForm.major_c = ''
							this.majorChange_panduan()
						});
				} else {
					this.majorChange_panduan()
				}
			},

			majorChange_panduan() {
				if (this.MessForm.major_c != '' || this.MessForm.major_c != 0) {
					this.MessForm.major = this.MessForm.major_c
				} else if (this.MessForm.major_b != '' || this.MessForm.major_b != 0) {
					this.MessForm.major = this.MessForm.major_b
				} else {
					this.MessForm.major = this.MessForm.major_a
				}
			},



			// 证书弹出层
			cerFicte(e) {
				this.IMG_Url = this.Common.mediaUrl + 'cert/' + e
				this.cerVisible = true;
			},

			// 证书折叠
			arrowBtnChange(index, e) {
				this.youth_journal[index].arrowMark = e
				this.$forceUpdate()
			},

			// 证书下载
			down_pic() {
				const a_b = document.createElement('a');
				a_b.href = this.IMG_Url;
				a_b.download = 'certificate.png';
				a_b.click()
			},

			// 时间格式
			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;
			},

			formatYear(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);
				return Y + M;
			},


// 上传头像
			unplIcon() {
				this.$refs["upIconIMg"].$refs["upload-inner"].handleClick();
			},
			
			
			//上传头像
			handleAvatarSuccess2(res, file) {
				if (res.code == 0) {
					this.$api
						.post('api/Ucenter/updateIncon', {
							user_id: this.role_id,
							icon: res.upurl
						})
						.then(res => {
							if (res.code == 0) {
								this.$message.success('Successfully uploaded the avatar!');
								this.pictureUrl = URL.createObjectURL(file.raw);
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$message.error(res.msg);
				}
			},
			handleAvatarError2(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload2(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('Picture size cannot exceed 1M!');
				}
				return isLt2M;
			},

			// 上传文件
			handleChange1(file, fileList) {
				if (fileList.length > 0) {
					this.fileL_pdf1 = [fileList[fileList.length - 1]]
				}
			},
			handleFileSuccess1(res, file) {
				this.$refs.uploadRef1.clearFiles();
				if (res.code == 0) {
					this.cvitaForm.cv = res.upurl;
					this.$api
						.post('api/Ucenter/addUserCv', this.cvitaForm)
						.then(res => {
							if (res.code == 0) {
								this.$message.success('Upload succeeded!');
								this.getDate()
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$message.error(res.msg);
				}
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`Remove ${ file.name }？`)
			},
			handleFileError(res, file) {

			},

			handleRemove(file, fileList) {

			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("The current limit is 1 file. Please delete the current file first！");
			},

			changeShow() {
				this.$forceUpdate()
			},
		},
		computed: {

		},
		watch: {

		},
	};
</script>

<style scoped>
	.container {
		padding: 0;
		background: #fafafa;
	}

	.top_dao:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.portrait {
		width: 83px;
		height: 83px;
		border-radius: 110px;
		border: 1.5px solid #EEE;
		cursor: pointer;
		position: relative;
		display: inline-block;
	}

	.portrait>img {
		width: 80px;
		height: 80px;
		border-radius: 110px;
	}


	.portrait .ptmark {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #00000033;
		color: #fff;
		border-radius: 110px;
		font-size: 16px;
		line-height: 22px;
		display: none;
		padding: 22px 0 0 0;
		text-align: center;
	}

	.portrait:hover .ptmark {
		display: block;
	}
	

	.s_rol {
		margin: 0 0 20px 0;
		/* border: 2px solid rgba(0, 102, 153, 0.15); */
		padding: 20px 20px 20px 20px;
		border-radius: 10px;
		background-color: rgb(255, 255, 255);

	}

	.s_rol:nth-child(2n) {
		/* background-color: #f7fcff; */

	}

	.s_rol>h3 {
		margin: 0 0 10px 0;
		letter-spacing: -0.5px;
		font-size: 16px;
		border-bottom: 2px solid rgba(0, 102, 153, 0.15);
		padding: 0px 0px 15px 6px;
	}

	.s_rol>h3>button {
		margin: 0 0 0 25px;
		padding: 5px 12px;
	}

	.s_rol>h3>button:hover {
		text-decoration: underline;
	}

	.s_rol>div.rol_mess {
		/* margin-bottom: 10px; */

		font-size: 15px;
	}

	.s_rol>div.rol_mess:nth-child(2n) {
		padding: 14px 10px 14px 10px;
	}

	.s_rol>div.rol_mess:nth-child(2n+1) {
		padding: 10px 10px 10px 10px;
		background-color: #f9fdff;
	}

	.s_rol>div.rol_mess>font {
		color: #666;
		margin-right: 15px;
		display: inline-block;
		width: 150px;
		text-align: right;
		vertical-align: top;
		margin-top: 2px;
	}

	.s_rol>div.rol_mess>.pencil {
		color: #006699;
		margin-left: 15px;
		font-weight: bold;
		cursor: pointer;
	}

	.s_rol>div.rol_mess>.rm_huid {
		display: inline-block;
		width: 75%;
		line-height: 22px;
	}

	.s_rol>div.rol_art {
		padding: 1px 10px 10px 10px;
	}

	.s_rol>div.rol_art>b {
		display: block;
		font-size: 16px;
		color: #006699;
		letter-spacing: -0.5px;
		margin-bottom: 20px;
	}

	.s_rol>div.rol_art>font {
		display: block;
		margin: 15px 0 0 0;
		font-size: 14px;
		font-weight: bold;
		color: #333;
	}

	.s_rol>div.rol_art>font:nth-child(2) {
		margin-top: 25px;
	}

	.s_rol>div.rol_art>span {
		display: block;
		color: #666;
		font-size: 16px;
		margin: 15px 0 0 10px;
	}

	.s_rol>div.rol_art>p {
		font-size: 14px;
		margin-top: 15px;
		color: #333;
	}

	.rol_art .colNUmber {
		color: #069;
		font-size: 20px;
		margin-right: 5px;
	}

	.rol_art .certBtn {
		margin: 0 0 0 20px;
		color: #006699;

	}

	.rol_art .certBtn:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.rol_art .arrowBtn {
		color: #006699;
		cursor: pointer;
		font-weight: bold;
		margin: 0 0 0 10px;
	}


	.webLink {
		color: #2a9916;
		margin-left: 10px;
		cursor: pointer;
	}

	.webLink:hover {
		text-decoration: underline;
	}

	.gugeList {
		font-size: 14px;
		border: 2px dashed #eee;
		cursor: pointer;
		margin-bottom: 20px;
		padding: 10px 30px 10px 15px;
		position: relative;
	}

	.gugeList:hover {
		background-color: #fdfdfd;
	}

	.gugeList>p {
		margin-bottom: 5px;
		line-height: 20px;
	}

	.gugeList>p>font {
		margin-right: 5px;
		color: #999;
	}

	.gugeList>p>a {
		color: #006699;
	}

	.gugeList>p>a:hover {
		text-decoration: underline;
	}

	.gugeList>b {
		display: none;
	}

	.gugeList>.kuangGeo {
		display: block;
		position: absolute;
		width: 15px;
		height: 15px;
		border: 2px solid #eee;
		top: 10px;
		right: 10px;
	}

	.gugeList.gu_col {
		border: 2px solid #006699;
		background-color: #ebf4f9;
		position: relative;
	}

	.gugeList.gu_col>b {
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		color: #069;
		font-weight: 700;
		font-size: 25px;
	}

	.zhujie_name {
		font-size: 12px;
		line-height: 20px;
		margin-top: 6px;
		color: #999;
	}

	.zhujie_name a {
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.zhujie_name a:hover {
		text-decoration: underline;
	}

	.starSty {
		width: 18px;
		margin-right: 4px;
		vertical-align: text-top;
	}

	.starSty:nth-last-child(1) {
		margin-right: 0;
	}

	.txt_pdf {
		margin: 0 0 20px 10px;
		display: inline-block;
		color: #333;
	}


	.txt_pdf>i {
		color: #66a9f0;
		font-weight: bold;
		margin-left: 10px;
	}
</style>
