<template>
	<div class="sheet-wrap animated fadeIn">
		<!-- <Spin v-if="isLoading" fix>
			 <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			 <div>{{ $t('answerSheet.loading') }}</div>
		</Spin> -->
		<div class="sheet-left">
			<div class="sheet-container" id="pdfDom" v-if="isRender">
				<!-- <router-view  v-if="isRouterAlive"/> -->
				<BaseSvgBg v-for="(page, pageIndex) in pages" :key="pageIndex" :ids="'svg' + pageIndex"
					:total="pages.length" :sheetId="sheetId"></BaseSvgBg>
				<SheetBaseInfo></SheetBaseInfo>
				<!-- 绘制主区域 -->
				<div class="sheet-groups">
					<div v-for="(group,groupIndex) in groups" :key="groupIndex" class="sheet-group-item">
						<div v-if="group.type === 'objective'">
							<BaseTitleEditor :ids="'titleEditor' + groupIndex" :content="titleContent(groupIndex,group)"
								ref="objectiveTitleRef"></BaseTitleEditor>
							<SheetObjective :items="items" v-show="groupItems.objectiveItems.length"
								@onRendered="onRendered"></SheetObjective>
						</div>
						<div v-else-if="group.type === 'complete'">
							<BaseTitleEditor :ids="'titleEditor' + groupIndex" :content="titleContent(groupIndex,group)"
								ref="completeTitleRef"></BaseTitleEditor>
							<SheetComplete :items="items" v-if="groupItems.completeItems.length"></SheetComplete>
						</div>
						<div v-else>
							<BaseTitleEditor :ids="'titleEditor' + groupIndex" :content="titleContent(groupIndex,group)"
								ref="subjectiveTitleRef"></BaseTitleEditor>
							<SheetSubjective :items="groupItems.subjectiveItems"
								v-show="groupItems.subjectiveItems.length"></SheetSubjective>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="sheet-right">
			<Button @click="goBack">{{ $t('answerSheet.back') }}</Button>
			<Button @click="doDownload" class="btn-download"
				:loading="isLoading">{{ !isLoading ? $t('answerSheet.print') : $t('answerSheet.loading') }}</Button>
			<div>
				<!-- <p class="sheet-right-title">基础设置</p>
				<div>
					<Checkbox v-model="isColumn">客观题竖向排列</Checkbox>
					<Checkbox v-model="isShowErCode">添加二维码</Checkbox>
					<Checkbox v-model="isShowLines">密封线</Checkbox>
				</div> -->
				<p class="sheet-right-title" v-if="!isAutoCreate">{{ $t('answerSheet.addType') }}</p>
				<div style="display: flex;flex-wrap: wrap;" v-if="!isAutoCreate">
					<span class="add-block-item" @click="onAddType('0')"> + {{ $t('answerSheet.objective') }}</span>
					<span class="add-block-item" @click="onAddType('1')"> + {{ $t('answerSheet.complete') }}</span>
					<span class="add-block-item" @click="onAddType('2')"> + {{ $t('answerSheet.subjective') }}</span>
					<span class="add-block-item" @click="onAddType('3')"> + {{ $t('answerSheet.compositionZh') }}</span>
					<span class="add-block-item" @click="onAddType('4')"> + {{ $t('answerSheet.compositionEn') }}</span>
				</div>
			</div>
		</div>

		<Modal v-model="isShowAdd" class-name="add-type-modal" width="650" :title="$t('answerSheet.addType')">
			<Tabs :value="activeTab" @on-click="onTabClick">
				<TabPane :label="$t('answerSheet.objective')" name="0"></TabPane>
				<TabPane :label="$t('answerSheet.complete')" name="1"></TabPane>
				<TabPane :label="$t('answerSheet.subjective')" name="2"></TabPane>
				<TabPane :label="$t('answerSheet.compositionZh')" name="3"></TabPane>
				<TabPane :label="$t('answerSheet.compositionEn')" name="4"></TabPane>
			</Tabs>
			<div>
				<div class="add-type-section">
					<p class="add-type-title">{{ $t('answerSheet.tip1') }}</p>
					<div>
						<span style="margin: 0 10px;">{{ $t('answerSheet.tip2') }}</span>
						<InputNumber :max="100" :min="1" v-model="addType.startIndex" @on-change="onStartChange">
						</InputNumber>
						<span style="margin: 0 10px;">{{ $t('answerSheet.tip3') }}</span>
						<InputNumber :max="100" :min="1" v-model="addType.endIndex" @on-change="onEndChange">
						</InputNumber>
						<span style="margin: 0 10px;">{{ $t('answerSheet.tip4') }}</span>
						<InputNumber :max="100" :min="0" v-model="addType.everyScore" @on-change="renderAddItem">
						</InputNumber>
						<span style="margin: 0 10px;">{{ $t('answerSheet.tip5') }}</span>
						<span v-if="activeTab === '0' || activeTab === '1'">
							<span>{{ $t('answerSheet.tip6') }} </span>
							<InputNumber :max="8" :min="0" v-model="addType.everyOpts" @on-change="renderAddItem">
							</InputNumber>
							<span
								style="margin: 0 10px;">{{ $t('answerSheet.tip19') }}{{ activeTab === '0' ? $t('answerSheet.tip7') : $t('answerSheet.tip8') }}</span>
						</span>
						<span v-if="activeTab === '3'">
							<span>，{{ $t('answerSheet.tip9') }} </span>
							<InputNumber :max="2000" :min="100" v-model="addType.maxWords" :active-change="false">
							</InputNumber>
							<span> {{ $t('answerSheet.tip10') }} </span>
						</span>
						<span v-if="activeTab === '4'">
							<span> {{ $t('answerSheet.tip9') }} </span>
							<InputNumber :max="30" :min="1" v-model="addType.maxLines" :active-change="false">
							</InputNumber>
							<span> {{ $t('answerSheet.tip11') }}</span>
						</span>

					</div>
				</div>
				<p v-show="indexErr" style="color: red;">* {{ $t('answerSheet.tip12') }}</p>
				<div class="add-type-section" v-if="addItems.length && isAddInfoComplete">
					<p class="add-type-title">{{ $t('answerSheet.tip13') }}</p>
					<div class="score-box">
						<div v-for="(item,index) in addItems" class="score-item">
							<span>{{ $t('answerSheet.tip2') }} {{ item.order }} {{ $t('answerSheet.tip14') }}</span>
							<div>
								<InputNumber :max="100" :min="0" v-model="item.score"></InputNumber>
								<span> {{ $t('answerSheet.tip5') }} </span>
								<span v-if="activeTab === '0' || activeTab === '1'" style="margin-left: 10px;">
									<InputNumber :max="100" :min="0" v-model="item.opts"></InputNumber>
									<span>
										个{{ activeTab === '0' ? $t('answerSheet.tip7') : $t('answerSheet.tip8') }}</span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer">
				<Button type="primary" @click="doAddType">{{ $t('answerSheet.confirm') }}</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import BaseTitleEditor from './BaseTitleEditor'
	import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
	import SheetObjective from "./SheetObjective";
	import SheetBaseInfo from "./SheetBaseInfo";
	import SheetComplete from "./SheetComplete";
	import SheetSubjective from "./SheetSubjective";
	import BaseSvgBg from "./BaseSvgBg";
	import blobTool from '@/utils/blobTool.js'
	import {
		PAPER_W,
		PAPER_H,
		ANCHORPROP,
		INFO_H,
		SVG_BORDER_MB
	} from "@/utils/sheetConfig.js";
	export default {
		props: {
			ids: {
				type: String,
				default: "",
			},
			paper: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			SheetObjective,
			SheetBaseInfo,
			SheetComplete,
			SheetSubjective,
			BaseSvgBg,
			BaseTitleEditor
		},
		data(vm) {
			return {
				curPaper: {
					id: null
				},
				indexErr: false,
				sheetId: null,
				addItems: [],
				addType: {
					startIndex: null,
					endIndex: null,
					everyScore: null,
					everyOpts: null,
					maxWords: 800,
					maxLines: 10
				},
				isShowAdd: false,
				isShowErCode: false,
				isShowLines: false,
				activeTab: '0',
				groups: [],
				isLoading: false,
				isColumn: false,
				isRouterAlive: true,
				isRender: true,
				isFromExam: false,
				pages: [],
				items: [],
				groupItems: {
					objectiveItems: [],
					completeItems: [],
					subjectiveItems: [],
				},
				subjectiveTop: 0,
				fromRouter: '',
				typeList: {
					objective: vm.$t('answerSheet.objective'),
					complete: vm.$t('answerSheet.complete'),
					subjective: vm.$t('answerSheet.subjective')
				},
				hasModify:false,
				examId:null
			};
		},
		created() {
			let routerPaper = this.$route.params.paper || this.paper
			console.log('答题卡路由数据：', routerPaper)
			this.sheetId = routerPaper.sheetNo || null
			this.curPaper = routerPaper
			this.isFromExam = Boolean(routerPaper && routerPaper.examId)
			this.examId = routerPaper.examId
			this.$store.commit('clearAllConfig')
			if (routerPaper) {
				this.$store.commit('clearFixArr')
				this.$store.commit('clearIsNewPage')
				this.$store.commit('setPaper', routerPaper)
				routerPaper.sheet && this.setSheetConfig(routerPaper)
				if (routerPaper.item === null) {
					this.$store.commit('setCreateModal', 'diy')
				} else {
					this.items = routerPaper.item
					this.$store.commit('setCreateModal', 'auto')
				}
				localStorage.setItem('scrollDis', 0)
			} else {
				this.goBack()
			}

		},
		methods: {
			
			async setSheetConfig(routerPaper){
				let sheetConfig = await this.getSheetConfigById(routerPaper.sheet,routerPaper.code,routerPaper.scope)
				console.log(sheetConfig)
			},

			getSheetConfigById(id,code,scope) {
				return new Promise((r, j) => {
					this.$api.evaluation.findSheet({
						"id": id,
						"code": code.replace('Paper-',''),
						"scope": scope
					}).then(res => {
						r(res.config)
					})
				})
			},

			onTabClick(type) {
				this.activeTab = type
			},
			onAddType(type) {
				this.isShowAdd = true
				this.activeTab = type
				this.addType = {
					startIndex: null,
					endIndex: null,
					everyScore: null,
					everyOpts: (type === '0' || type === '1') ? null : 1,
					maxWords: 800,
					maxLines: 10
				}
			},

			onStartChange(val) {
				this.indexErr = val > this.addType.endIndex || (!val && !this.addType.endIndex)
				this.renderAddItem()
			},

			onEndChange(val) {
				this.indexErr = val < this.addType.startIndex || (!val && !this.addType.startIndex)
				this.renderAddItem()
			},

			/* 点击添加题型 */
			doAddType() {
				if (this.isAddInfoComplete) {
					console.log(this.addItems)
					this.addItems.forEach(i => {
						i.option = new Array(i.opts).fill('0')
						i.blankCount = i.opts
						i.id = this.$tools.guid()
					})
					this.isShowAdd = false
					this.items = this.items.concat(this.addItems)
					this.$store.commit('setPaperItems', this.items)
					this.doRender()
				} else {
					this.$Message.warning(this.$t('answerSheet.tip15'))
				}
			},
			/* 打印答题卡 */
			doDownload() {
				if(this.curPaper.sheet && this.hasModify){
					this.$Modal.confirm({
						title: this.$t('answerSheet.tip22'),
						content: this.$t('answerSheet.tip23'),
						onOk: () => {
							this.isLoading = true
							this.$EventBus.$emit('onCreateSheet')
							this.doSaveSheet(false).then(async res => {
								let paperInfo = this.$store.state.answerSheet.paperItem
								this.sheetId = res.config.no
								if (this.isFromExam) {
									this.$EventBus.$emit('createSheetId', res.config.no)
								}
								this.getPdf().then(async r => {
									await this.doUploadPDF(r)
									this.isLoading = false
									this.hasModify = false
								})
							}).catch(err => {
								console.log(err)
								this.isLoading = false
							})
						}
					})
				}else{
					this.isLoading = true
					this.$EventBus.$emit('onCreateSheet')
					// 有答题卡ID但是没有修改
					if(this.sheetId){
						// 快速从BLOB进行下载
						// this.downloadSheet()
						this.getPdf().then(async r => {
							await this.doUploadPDF(r)
							this.isLoading = false
						})
					}else{
						// 没有答题卡ID 也无修改 就是新增答题卡
						this.doSaveSheet(false).then(async res => {
							let paperInfo = this.$store.state.answerSheet.paperItem
							this.sheetId = res.config.no
							if (this.isFromExam) {
								this.$EventBus.$emit('createSheetId', res.config.no)
							}
							this.getPdf().then(async r => {
								await this.doUploadPDF(r)
								this.isLoading = false
							})
						}).catch(err => {
							console.log(err)
							this.isLoading = false
						})
					}
				}
			},
			
			/* 下载Blob答题卡 */
			async downloadSheet() {
				let paperInfo = this.$store.state.answerSheet.paperItem
				let examId = paperInfo.examId
				let pdfName = `${paperInfo.name}-${paperInfo.sheet}.pdf`
				let path = examId ? `exam/${examId}/paper/${paperInfo.name}/` : `paper/${paperInfo.name}/`
				let curScope = examId ?paperInfo.examScope : paperInfo.scope
				let cntr = curScope === 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId
				let sasData = curScope === 'school' ? await this.$tools.getSchoolSas() : await this.$tools.getPrivateSas()
				let blobHost = this.$evTools.getBlobHost()
				let fullPath = blobHost + '/' + cntr + '/' + path + pdfName + sasData.sas
				const downloadRes = async () => {
				  let response = await fetch(fullPath); // 内容转变成blob地址
				  let blob = await response.blob();  // 创建隐藏的可下载链接
				  let objectUrl = window.URL.createObjectURL(blob);
				  let a = document.createElement('a');
				  a.href = objectUrl;
				  a.download = pdfName;
				  a.click()
				  a.remove(); 
				  this.isLoading = true
			    }
				downloadRes();
			},
			
			/* 上传答题卡PDF文件 */
			doUploadPDF(blob){
				return new Promise(async (r,j) => {
					let paperInfo = this.$store.state.answerSheet.paperItem
					let file = new File([blob],`${paperInfo.name}-${this.sheetId}.pdf`,{type:'application/pdf'})
					let curScope = this.examId ? paperInfo.examScope : paperInfo.scope
					let sasData = curScope === 'school' ? await this.$tools.getSchoolSas() : await this.$tools.getPrivateSas()
					let containerClient = new blobTool(sasData.url, sasData.name, sasData.sas, curScope)
					let path = this.examId ? `exam/${this.examId}/paper/${paperInfo.name}` : `paper/${paperInfo.name}`
					try {
						// 等待上传blob的返回结果
						let blobFile = await containerClient.upload(file, path)
						if (blobFile.blob) {
							r(200)
						} else {
							j(500)
						}
					}catch(e){
						j(e)
					}
				})
			},
			
			/* 保存答题卡模板数据 */
			doSaveSheet(withId) {
				return new Promise((r, j) => {
					let paperInfo = this.$store.state.answerSheet.paperItem
					let configParams = this.$store.state.answerSheet.config
					console.log(configParams.infoPos)
					let curCode = paperInfo.examCode || paperInfo.code
					let curScope = paperInfo.examScope || paperInfo.scope
					if (paperInfo.sheet && withId) {
						configParams.id = paperInfo.sheet
					}
					configParams.pageHeight = Number(configParams.pageHeight.toFixed())
					configParams.pageWidth = Number(configParams.pageWidth.toFixed())
					configParams.pageCount = this.$store.state.answerSheet.pages
					configParams.itemCount = this.$store.state.answerSheet.paperItem.item.length
					// configParams.code = curCode.replace('Paper-','')
					configParams.code = curCode.replace('Paper-', '').replace('Exam-', '') //如果是评测修改code会有问题
					configParams.school = curScope === 'school' ? this.$store.state.userInfo.schoolCode : ''
					configParams.scope = curScope
					configParams.creatorId = this.$store.state.userInfo.TEAMModelId
					console.log('答题卡数据参数', configParams)
					// r(configParams)
					/**
					 * 这里有参数调整 liqk
					 */
					this.$api.evaluation.upsertSheet({
						examId: paperInfo.examId || undefined,
						paperId: paperInfo.id,
						owner: paperInfo.owner,
						sheet: configParams
					}).then(res => {
						if (!res.error) {
							r(res)
						} else {
							j(res.error)
						}
					}).catch(err => j(err))
				})
			},
			/* 返回上级 */
			goBack() {
				let params = {}
				let curEditPaper = localStorage.getItem('c_edit_paper')
				// 如果是从新建试卷或者编辑试卷 跳转过来的 则返回过去的时候带上编辑的信息
				if (this.$route.params.paper && (this.fromRouter === 'newSchoolPaper' || this.fromRouter ===
						'newPrivatePaper') && curEditPaper) {
					params = {
						paper: JSON.parse(curEditPaper)
					}
				}
				// 如果是从试卷库预览试卷跳转过来的 就返回试卷库
				if (this.$route.params.paper && (this.fromRouter === 'schoolBank' || this.fromRouter === 'personalBank')) {
					params = {
						tabName: 'paper'
					}
				}
				this.$router.push({
					name: this.fromRouter || 'schoolBank',
					params: params
				})
				// this.$router.go(-1)
			},
			reload() {
				this.isRouterAlive = false;
				this.$nextTick(function() {
					this.isRouterAlive = true
				})
			},
			// 客观题渲染完 来决定主观题的TOP值高度
			onRendered(val) {
				this.subjectiveTop = val + INFO_H + 200;
			},

			doRender() {
				this.groupItems = {
					objectiveItems: [],
					completeItems: [],
					subjectiveItems: [],
				}
				this.groups = []
				let objectiveTypes = ["single", "multiple", "judge"];
				this.items.forEach((i) => {
					if (objectiveTypes.includes(i.type)) {
						this.groupItems.objectiveItems.push(i);
					} else if (i.type === "complete") {
						this.groupItems.completeItems.push(i);
					} else {
						this.groupItems.subjectiveItems.push(i);
					}
				});

				if (this.groupItems.objectiveItems.length) {
					this.groups.push({
						type: 'objective',
						items: this.groupItems.objectiveItems
					})
				}
				if (this.groupItems.completeItems.length) {
					this.groups.push({
						type: 'complete',
						items: this.groupItems.completeItems
					})
				}
				if (this.groupItems.subjectiveItems.length) {
					this.groups.push({
						type: 'subjective',
						items: this.groupItems.subjectiveItems
					})
				}
			},
			/**
			 * 数字与中文转换
			 * @param num
			 */
			numberConvertToUppercase(num) {
				num = Number(num)
				var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
				var length = String(num).length
				if (length === 1) {
					return upperCaseNumber[num]
				} else if (length === 2) {
					if (num === 10) {
						return upperCaseNumber[num]
					} else if (num > 10 && num < 20) {
						return '十' + upperCaseNumber[String(num).charAt(1)]
					} else {
						return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)]
							.replace('零', '')
					}
				}
			},

			renderAddItem() {
				let addItems = []
				let addInfo = this.addType
				let len = addInfo.endIndex - addInfo.startIndex + 1
				for (let i = 0; i < len; i++) {
					addItems.push({
						id: this.$tools.guid(),
						order: addInfo.startIndex + i,
						score: addInfo.everyScore,
						opts: addInfo.everyOpts,
						blankCount: 1,
						maxWords: this.activeTab === '3' ? addInfo.maxWords : null,
						maxLines: this.activeTab === '4' ? addInfo.maxLines : null,
						type: this.activeTab === '0' ? 'single' : this.activeTab === '1' ? 'complete' :
							'subjective'
					})
				}
				this.addItems = addItems
			}
		},
		mounted: function() {
			this.doRender()
			this.$EventBus.$off('deleteItem')
			this.$EventBus.$on('deleteItem', val => {
				console.log(val)
				if (val === '0') {
					this.groups = this.groups.filter(i => i.type !== 'complete')
					this.items = this.items.filter(i => i.type !== 'complete')
				} else if (val === 'objective') {
					let objectiveTypes = ["single", "multiple", "judge"];
					this.groups = this.groups.filter(i => i.type !== 'objective')
					this.items = this.items.filter(i => !objectiveTypes.includes(i.type))
				} else {
					this.groups = this.groups.filter(i => i.items.length)
				}
				this.$EventBus.$emit('doRefresh')
				this.hasModify = true
			})
			this.$EventBus.$off('titleMovePage')
			this.$EventBus.$on('titleMovePage', val => {
				this.$nextTick(() => {
					console.log('有标题跨页', val)
					if (val.type === 'subjective') {
						this.$refs.subjectiveTitleRef[0].$el.style.marginTop = SVG_BORDER_MB * 2 + val
							.height + 40 + 'px'
					} else {
						this.$refs.completeTitleRef[0].$el.style.marginTop = SVG_BORDER_MB * 2 + val
							.height + 40 + 'px'
					}
				})
			})
			this.$EventBus.$off("hasDrag")
			this.$EventBus.$on("hasDrag", () => {
			  this.hasModify = true
			});
			
			this.$EventBus.$off("baseInfoModify")
			this.$EventBus.$on("baseInfoModify", () => {
			  this.hasModify = true
			});
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.fromRouter = from.name
			})
		},
		beforeRouteLeave(to, from, next) {
			if (to.name === 'schoolBank' || to.name ===
				'personalBank') {
				// 设置下一个路由的 meta
				to.meta.isKeep = true; // 让 A 缓存，即不刷新
			}
			next();
		},
		computed: {
			getPage() {
				return this.$store.state.answerSheet.pages;
			},

			isAddInfoComplete() {
				for (let key in this.addType) {
					if (this.addType[key] === null) {
						return false;
					}
				}
				return true
			},

			// 是否为根据试卷自动生成的答题卡
			isAutoCreate() {
				return this.$store.state.answerSheet.isAutoCreate
			},

			titleContent() {
				return (groupIndex, group) => {
					let totalScore = group.items.length ? group.items.map(i => i.score).reduce((a, b) => a + b) : 0
					let type = this.typeList[group.type]
					return this.numberConvertToUppercase(groupIndex + 1) + '、' + type + this.$t('answerSheet.tip16') +
						group.items.length +
						this.$t('answerSheet.tip17') + totalScore + this.$t('answerSheet.tip18')
				}
			}
		},
		watch: {
			getPage: {
				handler(n, o) {
					this.pages = new Array(n).fill(0);
				},
				immediate: true
			},
			isAddInfoComplete: {
				handler(n, o) {
					if (n) {
						this.renderAddItem()
					} else {
						this.addItems = []
					}
				}
			}
		},
	};
</script>
<style scoped lang="less">
	.sheet-wrap {
		display: flex;
		justify-content: space-between;
		position: relative;
		width: 100%;

		.ivu-spin {
			background-color: #ffffffd1 !important;
		}
	}

	.add-type-modal {
		.add-type-section {
			margin: 20px 10px;
		}

		.add-type-title {
			margin: 10px 0;

			&::before {
				content: '';
				display: inline-block;
				border: 4px solid #267ce6;
				border-radius: 50%;
				margin-right: 10px;
			}
		}

		.score-box {
			padding: 5px 10px;
			background-color: #0000000d;
			border-radius: 5px;
			max-height: 300px;
			overflow-y: auto;

			.score-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px 0;
				border-bottom: 1px dashed #e4e4e4;
			}
		}

		.ivu-input-number {
			width: 50px;
		}
	}

	.sheet-groups {
		position: absolute;
		top: 280px;
		left: 0;
		width: 100%;
	}

	.sheet-right {
		width: 16%;
		margin-top: 20px;
		background-color: #fff;
		box-shadow: 0 0 5px #000000;
		position: fixed;
		top: 70px;
		right: 10px;
		height: 88vh;
		padding: 20px;

		.ivu-btn {
			width: 100%;
			height: 40px;
			background-color: #00b29a;
			color: #fff;
			border: none;
		}

		.btn-download {
			margin-top: 10px;
			background-color: #00a7ee;
		}

		.add-block-item {
			display: inline-block;
			margin: 5px;
			background: #009de8;
			color: #fff;
			padding: 6px 15px;
			border-radius: 4px;
			cursor: pointer;
		}

		&-title {
			font-size: 14px;
			font-weight: bold;
			margin: 15px 5px;

			&::before {
				content: '';
				width: 5px;
				height: 10px;
				background-color: #2181ff;
				display: inline-block;
				margin-right: 10px;
			}
		}

		.ivu-checkbox-wrapper {
			margin: 10px;
		}



	}

	.sheet-left {
		width: 70%;
	}

	.sheet-container {
		position: relative;
		width: 826px;
		height: 1165px;
		background: #fff;
		margin: 20px auto;
	}

	.sheet-subjective-wrap {
		position: absolute;
		top: 580px;
		left: 0;
		width: 100%;
	}
</style>
