<template>
	<div style="min-width: 1200px;height: 99%;">
		<el-row :gutter="20" style="margin: 0 auto;height: 100%;overflow: hidden;">
			<el-col :span="24" style="height: 100%;padding: 10px 20px;">
				<div class="step_role">
					<el-steps :active="1" class="move_bar">
						<el-step title="Choice">
							<i class="step01" slot="icon"></i>
						</el-step>
						<el-step title="Check" @click.native="handleStep2()">
							<i class="step02" slot="icon"></i>
						</el-step>
						<el-step title="Generate" @click.native="handleStep3()">
							<i class="step03" slot="icon"></i>
						</el-step>
					</el-steps>
				</div>
				<div class="pane_act">
					<h1>
						<img src="../../assets/img/temp-iocn.png" style="vertical-align: middle;margin: 0 5px 0 0;">
						{{this.article_title}}
					</h1>
					<div class="anchor-point" v-loading="loading" element-loading-text="Loading desperately..."
					 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
						<!-- 左侧导航 -->
						<div class="operation-btn">
							<p>STEP : {{speed_num}} / 12</p>
							<div v-for="(item, index) in bar_title" :key="index" @click="jump(index)" :class="{'active':activeStep === index}">
								<el-button :icon="item.icon" circle=""></el-button>{{item.name}}

								<i v-if="item.name=='Title'&&ArtPose.info_title!=''" style="color:#3ba272" class="el-icon-check"></i>
								<span v-if="item.name=='Title'&&ArtPose.info_title!=''">{{checkNumber.info_title}} selections</span>

								<i v-if="item.name=='Author'&&ArtPose.author!=''" style="color:#1869A0" class="el-icon-check"></i>
								<span v-if="item.name=='Author'&&ArtPose.author!=''">{{checkNumber.author}} selections</span>

								<i v-if="item.name=='Department-Affiliation-Address'&&ArtPose.authorAddress!=''" style="color:#fc8452" class="el-icon-check"></i>
								<span v-if="item.name=='Department-Affiliation-Address'&&ArtPose.authorAddress!=''">{{checkNumber.authorAddress}}
									selections</span>

								<i v-if="item.name=='Author Contribution'&&ArtPose.authorContribution!=''" style="color:#e8b034" class="el-icon-check"></i>
								<span v-if="item.name=='Author Contribution'&&ArtPose.authorContribution!=''">{{checkNumber.authorContribution}}
									selections</span>

								<i v-if="item.name=='Acknowledgment'&&ArtPose.acknowledgment!=''" style="color:#73c0de" class="el-icon-check"></i>
								<span v-if="item.name=='Acknowledgment'&&ArtPose.acknowledgment!=''">{{checkNumber.acknowledgment}} selections</span>

								<i v-if="item.name=='Corresponding Author'&&ArtPose.authorCorresponding!=''" style="color:#ea7ccc" class="el-icon-check"></i>
								<span v-if="item.name=='Corresponding Author'&&ArtPose.authorCorresponding!=''">{{checkNumber.authorCorresponding}}
									selections</span>

								<i v-if="item.name=='Author Corresponding Email'&&ArtPose.authorCorrespondingEmail!=''" style="color:#FD9E06"
								 class="el-icon-check"></i>
								<span v-if="item.name=='Author Corresponding Email'&&ArtPose.authorCorrespondingEmail!=''">{{checkNumber.authorCorrespondingEmail}}
									selections</span>

								<i v-if="item.name=='Keywords'&&ArtPose.keywords!=''" style="color:#ee6666" class="el-icon-check"></i>
								<span v-if="item.name=='Keywords'&&ArtPose.keywords!=''">{{checkNumber.keywords}} selections</span>

								<i v-if="item.name=='Traditon'&&ArtPose.traditon!=''" style="color:#9473de" class="el-icon-check"></i>
								<span v-if="item.name=='Traditon'&&ArtPose.traditon!=''">{{checkNumber.traditon}} selections</span>

								<i v-if="item.name=='Abstract Text'&&ArtPose.abstractText!=''" style="color:#02CBF9" class="el-icon-check"></i>
								<span v-if="item.name=='Abstract Text'&&ArtPose.abstractText!=''">{{checkNumber.abstractText}} selections</span>

								<i v-if="item.name=='References'&&ArtPose.references!=''" style="color:#FF9393" class="el-icon-check"></i>
								<span v-if="item.name=='References'&&ArtPose.references!=''">{{checkNumber.references}} selections</span>

								<i v-if="item.name=='MainText'&&ArtPose.mainText!=''" style="color:#91cc75" class="el-icon-check"></i>
								<span v-if="item.name=='MainText'&&ArtPose.mainText!=''">{{checkNumber.mainText}} selections</span>

								<p>{{item.ptext}}</p>
							</div>
							<el-button type="primary" style="width: 100%;margin: 5px 0 30px 0;" @click="saveActicle(ArtPose)">OK</el-button>
						</div>
						<!-- 右侧选框 -->
						<div class="scroll-content">
							<div>
								<el-checkbox-group v-model="check_List">
									<el-checkbox v-for="item in SET_Article" name="actle" :label="item.value" :key="item.value" @change="chooseChange($event,item.value)"
									 :disabled="dataModel[activeStep]!=item.state &&item.state!=''">
										<p v-html="item.name"></p>
										<i class="mark" style="background:#3ba272" v-if="item.state == 'info_title'">{{item.state}}</i>
										<i class="mark" style="background:#1869A0" v-if="item.state == 'author'">{{item.state}}</i>
										<i class="mark" style="background:#fc8452" v-if="item.state == 'authorAddress'">{{item.state}}</i>
										<i class="mark" style="background:#e8b034" v-if="item.state == 'authorContribution'">{{item.state}}</i>
										<i class="mark" style="background:#73c0de" v-if="item.state == 'acknowledgment'">{{item.state}}</i>
										<i class="mark" style="background:#ea7ccc" v-if="item.state == 'authorCorresponding'">{{item.state}}</i>
										<i class="mark" style="background:#FD9E06" v-if="item.state == 'authorCorrespondingEmail'">{{item.state}}</i>
										<i class="mark" style="background:#ee6666" v-if="item.state == 'keywords'">{{item.state}}</i>
										<i class="mark" style="background:#9473de" v-if="item.state == 'traditon'">{{item.state}}</i>
										<i class="mark" style="background:#02CBF9" v-if="item.state == 'abstractText'">{{item.state}}</i>
										<i class="mark" style="background:#FF9393" v-if="item.state == 'references'">{{item.state}}</i>
										<i class="mark" style="background:#91cc75" v-if="item.state == 'mainText'">{{item.state}}</i>
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 询问参考文献弹出框 -->
		<el-dialog title="References Tips" :close-on-click-modal="false" :closeOnClickModal="false" :showClose='false' :visible.sync="tiP_Fen" width="500px">
			<p style="line-height: 1.5;margin-bottom: 15px;">You ONLY NEED: Select the first one and the last one, DO NOT need select every options.</p>
			<el-radio-group v-model="tipForm.Fen">
				<el-radio :label="0" style="margin-bottom: 5px;">Let me try, please remind me again next time.</el-radio>
				<el-radio :label="1">Let me try, please do not need remind me again next time.</el-radio>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tiP_Fen_function()">OK</el-button>
			</span>
		</el-dialog>
		<!-- 询问正文弹出框 -->
		<el-dialog title="Main Text Tips" :close-on-click-modal="false" :closeOnClickModal="false" :showClose='false' :visible.sync="tiP_Man" width="500px">
			<p style="line-height: 1.5;margin-bottom: 15px;">You ONLY NEED: Select the references options first and than when you click the main
				text, all main text options will be selected auto.</p>
			<el-radio-group v-model="tipForm.Man">
				<el-radio :label="0" style="margin-bottom: 5px;">Let me try, please remind me again next time.</el-radio>
				<el-radio :label="1">Let me try, please do not need remind me again next time.</el-radio>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tiP_Man_function()">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				article_id: this.$route.query.esay_id,
				article_title: '',
				article_info: {},
				article_refers: {},
				check_List: [],
				tiP_Fen: false,
				tiP_Man: false,
				tipForm: {
					Fen: 0,
					Man: 0
				},
				loading: false,
				IMGup_Url: this.IMGupURL,
				file_word: [],
				sele_O: false,
				sele_ct: 0,
				activeStep: 0,
				speed_num: 0,
				bar_title: [{
					'name': 'Title',
					'icon': 'el-icon-reading',
					'ptext': '',
					'value': 'info_title'
				}, {
					'name': 'Author',
					'icon': 'el-icon-user',
					'ptext': '',
					'value': 'author'
				}, {
					'name': 'Department-Affiliation-Address',
					'icon': 'el-icon-connection',
					'ptext': '',
					'value': 'authorAddress'
				}, {
					'name': 'Author Contribution',
					'icon': 'el-icon-chat-line-square',
					'ptext': '',
					'value': 'authorContribution'
				}, {
					'name': 'Acknowledgment',
					'icon': 'el-icon-notebook-1',
					'ptext': '',
					'value': 'acknowledgment'
				}, {
					'name': 'Corresponding Author',
					'icon': 'el-icon-notebook-2',
					'ptext': '',
					'value': 'authorCorresponding'
				}, {
					'name': 'Author Corresponding Email',
					'icon': 'el-icon-box',
					'ptext': '',
					'value': 'authorCorrespondingEmail'
				}, {
					'name': 'Keywords',
					'icon': 'el-icon-collection-tag',
					'ptext': '',
					'value': 'keywords'
				}, {
					'name': 'Traditon',
					'icon': 'el-icon-document-copy',
					'ptext': 'NOTE: Is not a necessary option.',
					'value': 'traditon'
				}, {
					'name': 'Abstract Text',
					'icon': 'el-icon-receiving',
					'ptext': '',
					'value': 'abstractText'
				}, {
					'name': 'References',
					'icon': 'el-icon-paperclip',
					'ptext': '',
					'value': 'references'
				}, {
					'name': 'MainText',
					'icon': 'el-icon-discount',
					'ptext': '',
					'value': 'mainText'
				}],
				ArtPose: {
					'typesetId': this.$route.query.esay_id,
					'doi': '',
					'info_state': 0,
					'info_type': '',
					'abbreviation': '',
					'accepted_date': '',
					'online_date': '',
					'received_date': '',
					'topic': '',
					'little_author': '',
					'info_title': [],
					'author': [],
					'authorAddress': [],
					'authorContribution': [],
					'acknowledgment': [],
					'authorCorresponding': [],
					'authorCorrespondingEmail': [],
					'keywords': [],
					'traditon': [],
					'abstractText': [],
					'references': [],
					'mainText': [],
				},
				checkNumber: {
					'info_title': 0,
					'author': 0,
					'authorAddress': 0,
					'authorContribution': 0,
					'acknowledgment': 0,
					'authorCorresponding': 0,
					'authorCorrespondingEmail': 0,
					'keywords': 0,
					'traditon': 0,
					'abstractText': 0,
					'references': 0,
					'mainText': 0,
				},
				dataModel: [
					'info_title',
					'author',
					'authorAddress',
					'authorContribution',
					'acknowledgment',
					'authorCorresponding',
					'authorCorrespondingEmail',
					'keywords',
					'traditon',
					'abstractText',
					'references',
					'mainText',
				],
				first_Flag: false,
				SET_Ar_t: [],
				SET_Article: [],
			};
		},
		mounted() {

		},
		created() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$api
					.post('typeset/gettypesetdetail', {
						'typesetId': this.article_id
					})
					.then(res => {
						if (res.ret == 0) {
							this.article_title = res.data.info.title;
							this.article_info = res.data.info.u_typeset_info;
							this.article_refers = res.data.refers;
							this.ArtPose.doi = res.data.info.u_typeset_info.doi;
							this.ArtPose.info_type = res.data.info.u_typeset_info.info_type;
							this.ArtPose.info_state = res.data.info.u_typeset_info.info_state;
							this.ArtPose.abbreviation = res.data.info.u_typeset_info.abbreviation;
							this.ArtPose.accepted_date = res.data.info.u_typeset_info.accepted_date;
							this.ArtPose.online_date = res.data.info.u_typeset_info.online_date;
							this.ArtPose.received_date = res.data.info.u_typeset_info.received_date;
							this.ArtPose.topic = res.data.info.u_typeset_info.topic;
							this.ArtPose.little_author = res.data.info.u_typeset_info.little_author;
							if (res.data.info.u_typeset_info.mainText == '[]' || res.data.info.u_typeset_info.mainText == '') {
								this.first_Flag = true
							}
							if (res.data.info.articleFile != '') {
								this.loading = true;
								this.$api
									.post('typeset/readdoc', {
										'filename': res.data.info.articleFile
									})
									.then(res => {
										if (res.ret == 0) {
											this.SET_Ar_t = [];
											this.SET_Article = [];
											this.SET_Ar_t = res.data;
											var gov_ern = 0;
											var figure = 0
											for (var i = 0; i < res.data.length; i++) {
												if (res.data[i] == '') {
													res.data.splice(i, 1)
													i = i - 1
													gov_ern = gov_ern + 1
												} else {
													this.SET_Article.push({
														name: res.data[i],
														state: '',
														enter: gov_ern,
														value: figure + 1
													})
													gov_ern = 0;
													figure = figure + 1
												}
											}
											for (let i in this.SET_Article) {
												// 文件选中
												this.article_info.mainText = this.article_info.mainText.replace(/\\/g, "");
												for (let k in this.article_info) {
													if (k == 'info_title' || k == 'author' || k == 'authorAddress' || k == 'authorContribution' || k ==
														'acknowledgment' || k == 'authorCorresponding' || k == 'authorCorrespondingEmail' || k ==
														'keywords' || k == 'traditon' || k == 'abstractText' || k == 'mainText' || k == 'references') {
														if (this.article_info[k].indexOf(this.SET_Article[i].name) != -1) {
															this.SET_Article[i].checked = true
															this.SET_Article[i].state = k
															this.check_List.push(this.SET_Article[i].value)
															this.ArtPose[k].push(this.SET_Article[i].value)
														}
													}
												}
												// 参考文献选中
												for (let m in this.article_refers) {
													if (this.article_refers[m].refer_title == this.SET_Article[i].name) {
														this.SET_Article[i].checked = true
														this.SET_Article[i].state = 'references'
														this.check_List.push(this.SET_Article[i].value)
														this.ArtPose.references.push(this.SET_Article[i].value)
													}
												}
											}
											this.number_math()
											this.loading = false;
										} else {
											this.loading = false;
											this.$message.error(res.error);
										}
									})
									.catch(err => {
										this.loading = false;
										this.$message.error(err);
									});
							}
						} else {
							this.$message.error(res.error);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 提交文章排版
			saveActicle() {
				this.loading = true;
				this.ArtPose.info_title = [];
				this.ArtPose.author = [];
				this.ArtPose.authorAddress = [];
				this.ArtPose.authorContribution = [];
				this.ArtPose.acknowledgment = [];
				this.ArtPose.authorCorresponding = [];
				this.ArtPose.authorCorrespondingEmail = [];
				this.ArtPose.keywords = [];
				this.ArtPose.traditon = [];
				this.ArtPose.abstractText = [];
				this.ArtPose.references = [];
				this.ArtPose.mainText = [];

				// main内容添加换行
				for (let i in this.SET_Article) {
					if (this.SET_Article[i].state != '') {
						if (this.SET_Article[i].state == 'mainText') {
							if (this.SET_Article[i].enter == 0) {
								this.ArtPose[this.SET_Article[i].state].push(this.SET_Article[i].name)
							} else {
								for (var h = 0; h < this.SET_Article[i].enter; h++) {
									this.ArtPose[this.SET_Article[i].state].push('')
								}
								this.ArtPose[this.SET_Article[i].state].push(this.SET_Article[i].name)
							}
						} else {
							this.ArtPose[this.SET_Article[i].state].push(this.SET_Article[i].name)
						}
					}
				}
				
				this.ArtPose.info_title = this.ArtPose.info_title.join('')
				this.ArtPose.author = this.ArtPose.author.join('')
				this.ArtPose.authorAddress = this.ArtPose.authorAddress.join('')
				this.ArtPose.authorContribution = this.ArtPose.authorContribution.join('')
				this.ArtPose.acknowledgment = this.ArtPose.acknowledgment.join('')
				this.ArtPose.authorCorresponding = this.ArtPose.authorCorresponding.join('')
				this.ArtPose.authorCorrespondingEmail = this.ArtPose.authorCorrespondingEmail.join('')
				this.ArtPose.keywords = this.ArtPose.keywords.join('')
				this.ArtPose.traditon = this.ArtPose.traditon.join('')
				this.ArtPose.abstractText = this.ArtPose.abstractText.join('')
				this.ArtPose.mainText = JSON.stringify(this.ArtPose.mainText)
				console.log(this.ArtPose)
				let ref_ence = [];
				for (let i in this.ArtPose.references) {
					ref_ence.push({
						refer_state: 0,
						refer_title: this.ArtPose.references[i],
						typesetId: this.article_id
					})
				}
				
				this.$api
					.post('typeset/edittypesetinfo', this.ArtPose)
					.then(res => {
						if (res.ret == 0) {
							// 参考文献先清空在添加
							this.$api
								.post('typeset/emptyForRefer', {
									'typesetId': this.article_id
								})
								.then(res => {
									if (res.ret == 0) {
										this.$axios({
												method: 'post',
												url: 'typeset/addRederence',
												headers: {
													'contentType': 'application/json;charset=UTF-8'
												},
												data: ref_ence
											})
											.then((flu) => {
												if (flu.data.ret == 0) {
													this.$message.success(`Succeeded!`);
													this.$router.push({
														path: '/checklate',
														query: {
															esay_id: this.article_id
														}
													});
													this.loading = false;
												} else {
													this.loading = false;
													this.$message.error(flu.data.error);
												}
											})
											.catch((flu) => {
												this.loading = false;
												this.$message.error(flu.data.error);
											});
									} else {
										this.loading = false;
										this.$message.error(res.error);
									}
								})
								.catch(err => {
									this.loading = false;
									this.$message.error(err);
								});
						} else {
							this.loading = false;
							this.$message.error(res.error);
						}
					})
					.catch(err => {
						this.loading = false;
						this.$message.error(err);
					});
			},
			// 点击导航
			jump(k) {
				this.activeStep = k
				if (this.first_Flag) {
					if (k == 11) {
						this.check_List = [];
						for (let i in this.SET_Article) {
							this.check_List.push(Number(i) + Number(1))
							if (this.SET_Article[i].state == '') {
								this.SET_Article[i].state = 'mainText';
								this.SET_Article[i].checked = true;
								this.ArtPose.mainText.push(this.SET_Article[i].value)
							}
						}
						this.checkNumber.mainText = this.ArtPose.mainText.length;
						this.first_Flag = false;
					}
					
				}
				
				if (k == 10) {
					if (localStorage.getItem('tiP_Fen') == null || localStorage.getItem('tiP_Fen') == 0) {
						this.tiP_Fen = true
					}
				}
				if (k == 11) {
					if (localStorage.getItem('tiP_Man') == null || localStorage.getItem('tiP_Man') == 0) {
						this.tiP_Man = true
					}
				}
			},
			// 点击所有选框触发的操作
			chooseChange(e, v) {
				// 把数据给导航push进去，判断是选定还是取消
				let mo_ve = this.ArtPose[this.dataModel[this.activeStep]]
				if (e == true) {
					if (this.dataModel[this.activeStep] == 'references') {
						if (this.sele_O == true) {
							if (v > this.sele_ct) {
								for (var p = this.sele_ct + 1; p <= v; p++) {
									if (this.ArtPose.references.indexOf(p) == -1) {
										mo_ve.push(p)
									}
									this.SET_Article[p - 1].checked = true
									this.SET_Article[p - 1].state = 'references'
									this.check_List.push(this.SET_Article[p - 1].value)
								}
							}
							this.sele_O = false;
						} else {
							this.sele_ct = v;
							this.sele_O = true;
							mo_ve.push(v)
							this.SET_Article[v - 1].checked = true
							this.SET_Article[v - 1].state = 'references'
							this.check_List.push(this.SET_Article[v - 1].value)
						}
					} else {
						mo_ve.push(v)
						for (var h = 0; h < this.SET_Article.length; h++) {
							if (this.SET_Article[h].value == v) {
								this.SET_Article[h].state = this.dataModel[this.activeStep]
							}
						}
					}
				} else {
					for (var i = 0; i < mo_ve.length; i++) {
						if (mo_ve[i] == v) {
							mo_ve.splice(i, 1)
							i = i - 1
						}
					}
					for (var h = 0; h < this.SET_Article.length; h++) {
						if (this.SET_Article[h].value == v) {
							this.SET_Article[h].state = ''
						}
					}
					for (var k = 0; k < this.check_List.length; k++) {
						if (this.check_List[k] == v) {
							this.check_List.splice(k, 1)
							k = k - 1
						}
					}
				}

				this.number_math()
			},

			number_math() {
				// 选中数目
				this.checkNumber.info_title = this.ArtPose.info_title.length;
				this.checkNumber.author = this.ArtPose.author.length;
				this.checkNumber.authorAddress = this.ArtPose.authorAddress.length;
				this.checkNumber.authorContribution = this.ArtPose.authorContribution.length;
				this.checkNumber.acknowledgment = this.ArtPose.acknowledgment.length;
				this.checkNumber.authorCorresponding = this.ArtPose.authorCorresponding.length;
				this.checkNumber.authorCorrespondingEmail = this.ArtPose.authorCorrespondingEmail.length;
				this.checkNumber.keywords = this.ArtPose.keywords.length;
				this.checkNumber.traditon = this.ArtPose.traditon.length;
				this.checkNumber.abstractText = this.ArtPose.abstractText.length;
				this.checkNumber.references = this.ArtPose.references.length;
				this.checkNumber.mainText = this.ArtPose.mainText.length;

				this.$nextTick(() => {
					this.speed_num = document.querySelectorAll('.el-icon-check').length
				})
			},
			// 点击步骤条
			handleStep2() {
				this.$router.push({
					path: '/checklate',
					query: {
						esay_id: this.article_id
					}
				});
			},
			handleStep3() {
				this.$router.push({
					path: '/formwork',
					query: {
						esay_id: this.article_id
					}
				});
			},
			// 询问是否提醒
			tiP_Fen_function(){
				this.tiP_Fen = false
				localStorage.setItem('tiP_Fen', this.tipForm.Fen);
			},
			tiP_Man_function(){
				this.tiP_Man = false
				localStorage.setItem('tiP_Man', this.tipForm.Man);
			}
		}
	};
</script>

<style>
	.step_role {
		margin: 0 auto 10px auto;
		width: 800px;
	}

	.step_role .move_bar {
		width: 100%;
		margin: 5px 0 0 0;
	}

	.pane_act {
		background-color: #fff;
		/* padding: 0 0 20px 0; */
		height: 90.5%;
	}

	.pane_act>h1 {
		font-size: 15px;
		margin: 0 0 5px 0;
		padding: 14px 0 10px 20px;
		line-height: 30px;
		border-bottom: 1px solid #dde1eb;
		box-shadow: rgb(134 134 134) 0px 5px 5px -2px;
	}

	.anchor-point {
		flex-basis: 100%;
		display: flex;
		overflow: hidden;
		height: 93%;
		padding: 0 0 0 20px;
	}

	.scroll-content {
		height: 98%;
		width: 72%;
		overflow-y: scroll;
	}

	.operation-btn {
		width: 36%;
		height: 98%;
		padding-right: 30px;
		overflow-y: scroll;
	}

	.operation-btn>p {
		color: #727272;
		font-size: 14px;
		margin: 20px 0 20px 5px;
	}

	.operation-btn>div {
		cursor: pointer;
		margin-bottom: 15px;
		font-weight: 600;
	}

	.operation-btn>div>i {
		font-size: 16px;
		color: red;
		margin: 0 8px;
	}

	.operation-btn>div>span {
		font-size: 12px;
		font-weight: normal;
		color: #727272;
	}

	.operation-btn>div>button {
		margin-right: 8px;
	}

	.operation-btn>div>p {
		font-weight: 200;
		color: #727272;
		font-size: 12px;
		padding: 0 0 0 42px;
		line-height: 16px;
	}

	.operation-btn>div.active {
		color: #006699;
	}

	.operation-btn>div.active>button {
		color: #006699;
		border-color: #006699;
		background-color: #eaf3fe;
	}

	.operation-btn>div.active:nth-child(2) {
		color: #3ba272;
	}

	.operation-btn>div.active:nth-child(2)>button {
		color: #3ba272;
		border-color: #3ba272;
		background-color: #d7f0e5;
	}

	.operation-btn>div.active:nth-child(3) {
		color: #1869A0;
	}

	.operation-btn>div.active:nth-child(3)>button {
		color: #1869A0;
		border-color: #1869A0;
		background-color: #e0f0fb;
	}

	.operation-btn>div.active:nth-child(4) {
		color: #fc8452;
	}

	.operation-btn>div.active:nth-child(4)>button {
		color: #fc8452;
		border-color: #fc8452;
		background-color: #ffefe8;
	}

	.operation-btn>div.active:nth-child(5) {
		color: #e8b034;
	}

	.operation-btn>div.active:nth-child(5)>button {
		color: #e8b034;
		border-color: #e8b034;
		background-color: #fff8e8;
	}

	.operation-btn>div.active:nth-child(6) {
		color: #73c0de;
	}

	.operation-btn>div.active:nth-child(6)>button {
		color: #73c0de;
		border-color: #73c0de;
		background-color: #eff9fe;
	}

	.operation-btn>div.active:nth-child(7) {
		color: #ea7ccc;
	}

	.operation-btn>div.active:nth-child(7)>button {
		color: #ea7ccc;
		border-color: #ea7ccc;
		background-color: #fff3fc;
	}

	.operation-btn>div.active:nth-child(8) {
		color: #FD9E06;
	}

	.operation-btn>div.active:nth-child(8)>button {
		color: #FD9E06;
		border-color: #FD9E06;
		background-color: #fffaf2;
	}


	.operation-btn>div.active:nth-child(9) {
		color: #ee6666;
	}

	.operation-btn>div.active:nth-child(9)>button {
		color: #ee6666;
		border-color: #ee6666;
		background-color: #ffe7e7;
	}

	.operation-btn>div.active:nth-child(10) {
		color: #9473de;
	}

	.operation-btn>div.active:nth-child(10)>button {
		color: #9473de;
		border-color: #9473de;
		background-color: #f5f0ff;
	}

	.operation-btn>div.active:nth-child(11) {
		color: #02CBF9;
	}

	.operation-btn>div.active:nth-child(11)>button {
		color: #02CBF9;
		border-color: #02CBF9;
		background-color: #f1fcff;
	}

	.operation-btn>div.active:nth-child(12) {
		color: #FF9393;
	}

	.operation-btn>div.active:nth-child(12)>button {
		color: #FF9393;
		border-color: #FF9393;
		background-color: #fff2f2;
	}

	.operation-btn>div.active:nth-child(13) {
		color: #91cc75;
	}

	.operation-btn>div.active:nth-child(13)>button {
		color: #91cc75;
		border-color: #91cc75;
		background-color: #f5fff0;
	}

	.el-divider .el-divider__text {
		font-size: 20px;
	}

	.el-checkbox {
		white-space: normal;
		margin: 5px 10px 5px 10px;
		padding: 10px;
		border-radius: 5px;
		border: 2px dashed #fff;
		display: block;
	}

	.el-checkbox:last-of-type {
		margin: 0 10px 10px 10px;
	}


	.el-checkbox:hover {
		background-color: #eaf3fe;
		border: 2px dashed #006699;
	}

	.el-checkbox__label>i.mark {
		position: absolute;
		top: -2px;
		right: -1px;
		border-radius: 5px;
		font-size: 10px;
		background-color: #006699;
		color: #fff;
		display: none;
		font-style: normal
	}

	.is-checked .el-checkbox__label>i.mark {
		display: block;
		padding: 0 3px;
	}

	.el-checkbox__input {
		white-space: normal;
		vertical-align: top;
	}

	.el-checkbox__label {
		width: 94%;

	}


	.el-checkbox.is-checked {
		background-color: #a4daf7;
		border: 2px dashed #a4daf7;
		position: relative;
	}

	.el-checkbox.is-checked .el-checkbox__label {
		color: #000000;
	}

	.el-checkbox.is-checked:hover {
		background-color: #99caff;
	}

	.el-checkbox.is-disabled {
		background-color: #eff0f5;
		border: 2px dashed #e6e6ec;
	}

	.el-checkbox.is-disabled .el-checkbox__label {
		color: #999 !important;
	}

	.el-checkbox__label .el-textarea__inner {
		font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
		line-height: 19px;
		font-size: 14px;
	}
</style>
