<template>
	<div id="addreport">
		<div 
			id="leftfroala" 
			v-loading="importChartNum>0" 
			element-loading-text="图表批量插入中..."
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>
			<froala
				id="froala-editor"
				ref="froalaEditor"
				:tag="'textarea'"
				:config="froalaConfig"
				v-model="aeForm.content"
			></froala>
		</div>
		<div id="rightitems">
			<div
				style="
					text-align: right;
					padding: 0px 0 15px 0;
					box-sizing: border-box;
				"
			>
				<div v-show="lastsavetime" style="color: #666; margin-bottom: 15px">
					最近保存时间：{{ lastsavetime }}
				</div>
				<el-button
					type="primary"
					size="medium"
					plain
					@click.native="refreshReport"
				>
					一键刷新
				</el-button>
				<el-button
					type="primary"
					size="medium"
					plain
					@click.native="clickreportadd('yl')"
					>预览</el-button
				>
				<el-button
					type="primary"
					size="medium"
					plain
					@click.native="clickreportadd('cg')"
					>存草稿</el-button
				>
				<el-button
					type="primary"
					size="medium"
					@click.native="clickreportadd('fb')"
					:loading="isPublishloading"
					>发布</el-button
				>
			</div>
			<div
				style="
					margin: 0px 0 0 20px;
					padding: 10px 20px;
					box-sizing: border-box;
					background: #fff;
					border: 1px solid #3464e0;
				"
			>
				<el-tabs v-model="tabsactive">
					<el-tab-pane :label="tab" :name="tab" v-for="tab in panelTabs" :key="tab"></el-tab-pane>
				</el-tabs>
				<div
					v-if="tabsactive == '基础信息'"
					style="height: calc(100vh - 280px); overflow-y: auto"
				>
					<el-form
						:model="aeForm"
						:rules="aerules"
						ref="aeForm"
						label-position="right"
						label-width="90px"
						class="demo-aeForm"
						id="login-container"
						@submit.native.prevent
					>
						<el-form-item prop="add_type" label="新增方式">
							<el-select
								v-model="aeForm.add_type"
								@change="userclassidreportdetail"
								placeholder="请选择"
								size="medium"
								style="width: 270px"
							>
								<el-option label="新增报告" :value="1"></el-option>
								<el-option label="继承报告" :value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="classifynameArr" label="分类">
							<el-cascader
								@change="userclassidreportdetail"
								ref="cascader"
								:options="optionsArr"
								v-model="aeForm.classifynameArr"
								placeholder="类型筛选"
								size="medium"
								style="width: 270px"
							></el-cascader>
						</el-form-item>
						<el-form-item prop="title" label="标题">
							<el-input
								type="textarea"
								:rows="2"
								placeholder="请输入"
								v-model="aeForm.title"
								size="medium"
							></el-input>
						</el-form-item>
						<el-form-item label="摘要">
							<el-input
								type="textarea"
								:rows="2"
								placeholder="请输入"
								v-model="aeForm.abstract"
								size="medium"
							></el-input>
						</el-form-item>
						<el-form-item label="作者">
							<el-select
								v-model="aeForm.author"
								multiple
								placeholder="请选择"
								size="medium"
								style="width: 270px"
							>
								<el-option
									v-for="(item, i) in authorlist"
									:key="i"
									:label="item.ReportAuthor"
									:value="item.ReportAuthor"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="频度">
							<el-select
								v-model="aeForm.frequency"
								placeholder="请选择"
								size="medium"
								style="width: 270px"
							>
								<el-option label="年度" value="年度"></el-option>
								<el-option label="半年度" value="半年度"></el-option>
								<el-option label="季度" value="季度"></el-option>
								<el-option label="月度" value="月度"></el-option>
								<el-option label="双周度" value="双周度"></el-option>
								<el-option label="周度" value="周度"></el-option>
								<el-option label="日度" value="日度"></el-option>
								<el-option label="不定时" value="不定时"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="创建时间">
							<el-date-picker
								v-model="aeForm.create_time"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期"
								size="medium"
								:clearable="false"
								style="width: 270px"
							></el-date-picker>
						</el-form-item>
					</el-form>
				</div>
				<div v-if="tabsactive == '图表插入'">
					<el-input
						placeholder="图表名称"
						v-model="key_word"
						size="medium"
						prefix-icon="el-icon-search"
						@input="() => {search_page=1;$refs.chartListRef.scrollTop = 0;getreportlist(key_word)}"
					>
					</el-input>
					<el-radio-group v-model="chart_source" @change="() => {search_page=1;$refs.chartListRef.scrollTop = 0;getreportlist()}" style="margin-top: 10px;">
						<el-radio :label="1">ETA图库</el-radio>
						<el-radio :label="2">商品价格曲线</el-radio> 
						<el-radio :label="3">相关性图表</el-radio>
						<el-radio :label="6">拟合方程曲线</el-radio>
						<el-radio :label="7">统计特征</el-radio>
					</el-radio-group>
					<div style="margin: 10px 0">
						<el-checkbox v-model="isShowMe" @change="() => {search_page=1;$refs.chartListRef.scrollTop = 0;getreportlist(key_word)}">只看我的</el-checkbox>
					</div>
					<div
						id="reportwin"
						ref="chartListRef"
						style="
							height: calc(100vh - 370px);
							overflow-x: hidden;
							overflow-y: auto;
						"
						v-infinite-scroll="loadReportHandle"
						:infinite-scroll-immediate="false"
					>
						<template v-if="newreportlist.length">
							<div
								v-for="(item, index) in newreportlist"
								:key="item.ChartInfoId"
								:style="item.Disabled && 'cursor: not-allowed;'"
								class="liststy"
							>
								<p class="color_primary">{{ item.ChartName }}</p>
								<img
									:src="item.ChartImage"
									:id="'listnode' + index"
									@click="insertHtml(item)"
								/>
							</div>
						</template>

						<tableNoData text="暂无图表" size="mini" v-else/>
					</div>

				</div>
				<div v-if="tabsactive == '沙盘插入'">
					<el-input
						placeholder="沙盘名称/品种"
						v-model="sandTabelQuery.Keyword"
						size="medium"
						prefix-icon="el-icon-search"
					>
					</el-input>
					<div
						id="sandTable-container"
						ref="sandTable"
						style="
							height: calc(100vh - 370px);
							overflow-x: hidden;
							overflow-y: auto;
						"
						@scroll="sandTableHandleScroll"
					>
						<template v-if="sandTableList.length">
							<div
								v-for="(item, index) in sandTableList"
								:key="item.SandboxId"
								class="liststy"
							>
								<p class="color_primary">{{ item.Name }}</p>
								<img
									:src="item.PicUrl"
									:id="'sandTable' + index"
									@click="insertHtml(item,'image')"
								/>
								<p class="source-identification">来源：弘则研究</p>
							</div>
						</template>
						<tableNoData text="暂无数据" size="mini" v-else/>
					</div>
				</div>
				<div v-if="tabsactive == '表格插入'">
					<el-input
						placeholder="表格名称"
						v-model="sheetSearchObj.Keyword"
						size="medium"
						prefix-icon="el-icon-search"
						@input="getSheetList"
					>
					</el-input>
					<div
						style="
							height: calc(100vh - 370px);
							overflow-x: hidden;
							overflow-y: auto;
						"
					>
						<template v-if="sheetSearchList.length">
							<div
								v-for="item in sheetSearchList"
								:key="item.ExcelInfoId"
								class="liststy"
							>
								<p class="color_primary">{{ item.ExcelName }}</p>
								<img
									:src="item.ExcelImage"
									:id="'sheet' + item.ExcelInfoId"
									style="object-fit: contain;height: 250px;"
									@click="insertHtml(item,'sheet')"
								/>
							</div>
						</template>

						<tableNoData text="暂无数据" size="mini" v-else/>
					</div>
				</div>
				<div v-if="tabsactive == 'MyETA批量插入'">
					<importMyChart @handleImportMyChart="handleImportMyChart"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	autosave,
	reportadd,
	reportedit,
	classifylist,
	classifyIdDetail,
	reportpublish,
	reportauthor,
	getDraft,
	dataBaseInterface,
	sandInterface
} from '@/api/api.js';
import http from '@/api/http.js';
import VueFroala from 'vue-froala-wysiwyg';
import urlSlug from 'url-slug';
import mixinMsg from './mixins/messagePush'
import reportMixin from './mixins/reportMixin';
import importMyChart from './components/importMyChart.vue'
export default {
	mixins:[mixinMsg,reportMixin],
	data() {
		var that = this;
		return {
			//批量导入图表
			importChartNum:0,//批量导入图表的数量 如果大于0则说明在加载
			tabsactive: '基础信息',
			optionsArr: [],
			key_word: '',
			// 沙盘插入 ----------start
			sandTabelQuery:{
				PageSize: 13,
				CurrentIndex: 1,
				Keyword: '',
			}, // 沙盘图查询参数
			sandTableLoading:false,
			sandTableTotal:0,//沙盘总共条数
			sandTableList:[],
			isRequesting:false,
			loadedText:'', // 全部加载完的文字提示
			// 沙盘插入 ------------- end
			originreportlist: [],
			newreportlist: [], //图表列表
			authorlist: [],
			aeForm: {
				add_type: 1,
				classify_name: 1,
				classifynameArr: [],
				title: '',
				abstract: '',
				author: ['FICC团队'],
				frequency: '日度',
				create_time: http.dateFormatter(new Date(), false).replace(/\./g,'-'),
				content: '',
			},
			aerules: {
				add_type: [
					{
						required: true,
						message: '',
						trigger: 'blur',
					},
				],
				classifynameArr: [
					{
						required: true,
						message: '',
						trigger: 'blur',
					},
				],
				title: [
					{
						required: true,
						message: '请输入',
						trigger: 'blur',
					},
				],
			},
			lastEditRange: null,
			report_draft_id: 0,
		};
	},
	mounted() {
		this.getclassifylist();
		this.getreportlist('');
		this.getreportauthor();
		this.getSandTable();
		this.getSheetList();
		this.timer = setInterval(() => {
			this.autoSave();
		}, 6000);

		window.addEventListener('message',this.reInitIframe)
	},
	destroyed() {
		window.removeEventListener('message',this.reInitIframe)
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	updated() {
		$('#leftfroala').find('p').css({ fontSize: '16px' });
		$('#leftfroala').find('p strong span').css({ fontSize: '16px' });
		$('#leftfroala')
			.find('.fr-placeholder')
			.css({ fontSize: '16px', lineHeight: '25.6px' });
	},
	methods: {
		// 每十秒自动保存
		autoSave() {
			console.log(this.ischange,this.autoSaveFlag);
			if (this.report_draft_id&&this.autoSaveFlag) {
				//如果富文本中有未上传完成的图片,去除这个dom
				$('.fr-element').find('img.fr-uploading').length&&$('.fr-element').find('img.fr-uploading').remove()
				autosave({
					ReportId: Number(this.report_draft_id),
					Content: $('.fr-element').html(),
					NoChange:this.ischange?0:1
				}).then((res) => {
					if (res.Ret === 200) {
						this.report_id = res.Data.ReportId;
						this.lastsavetime = http.dateFormatter(new Date(), true);
					}
				});
				this.ischange = false;
			}
		},
		getDrafts() {
			getDraft({}).then((res) => {
				if (res.Ret == 200) {
					this.report_draft_id = res.Data.Id;
					this.aeForm = {
						classifynameArr:
							res.Data.ClassifyIdSecond && res.Data.ClassifyNameSecond
								? [
										JSON.stringify({
											l: res.Data.ClassifyNameFirst,
											v: parseInt(res.Data.ClassifyIdFirst),
										}),
										JSON.stringify({
											l: res.Data.ClassifyNameSecond,
											v: parseInt(res.Data.ClassifyIdSecond),
										}),
									]
								: [
										JSON.stringify({
											l: res.Data.ClassifyNameFirst,
											v: parseInt(res.Data.ClassifyIdFirst),
										}),
								  ],
						title: res.Data.Title,
						abstract: res.Data.Abstract,
						author: res.Data.Author ? res.Data.Author.split(',') : '',
						frequency: res.Data.Frequency,
						content: res.Data.Content,
					};
				}
			});
		},
		getreportauthor() {
			reportauthor({}).then((res) => {
				if (res.Ret == 200) {
					this.authorlist = res.Data.List || [];
				}
			});
		},
		userclassidreportdetail() {
			if (this.aeForm.add_type == 1) {
				if (this.aeForm.classifynameArr.length == 2) {
					this.aeForm.title = JSON.parse(this.aeForm.classifynameArr[1]).l;
				}
				return false;
			}
			if (this.aeForm.classifynameArr.length == 0) {
				return false;
			}
			let params = {
				ClassifyIdFirst: JSON.parse(this.aeForm.classifynameArr[0]).v,
			};
			if (this.aeForm.classifynameArr.length == 2) {
				params.ClassifyIdSecond = JSON.parse(
					this.aeForm.classifynameArr[1]
				).v;
			} else {
				params.ClassifyIdSecond = 0;
			}
			classifyIdDetail(params).then((res) => {
				if (res.Ret == 200) {
					if (res.Data == null) {
						this.$message.error('此分类暂无报告');
						return false;
					}
					let obj=JSON.parse(JSON.stringify(this.aeForm.classifynameArr))
					this.aeForm = {
						add_type: 2,
						classify_name: 1,
						classifynameArr:obj,
						title: res.Data.Title,
						abstract: res.Data.Abstract,
						author: res.Data.Author ? res.Data.Author.split(',') : '',
						frequency: res.Data.Frequency,
						create_time:
							this.aeForm.add_type == 2
								? http.dateFormatter(new Date(), false)
								: res.Data.CreateTime,
						content: res.Data.Content,
					};
				}
			});
		},
		clickreportadd(tp) {
			console.log(this.aeForm.classifynameArr);
			if (
				!this.aeForm.classifynameArr ||
				this.aeForm.classifynameArr.length == 0
			) {
				this.$message.error('请选择分类');
				return false;
			}
			if (!this.aeForm.title) {
				this.$message.error('请输入标题');
				return false;
			}
			if(!this.autoSaveFlag){
				this.$message.error('有图片未上传完成,请稍等')
				return false
			}
			//如果富文本中有未上传完成的图片,去除这个dom
			$('.fr-element').find('img.fr-uploading').length&&$('.fr-element').find('img.fr-uploading').remove()
			let params = {
				AddType: this.aeForm.add_type,
				ClassifyIdFirst: JSON.parse(this.aeForm.classifynameArr[0]).v,
				ClassifyNameFirst: JSON.parse(this.aeForm.classifynameArr[0]).l,
				Title: this.aeForm.title,
				Abstract: this.aeForm.abstract,
				Author:
					this.aeForm.author.length > 0
						? this.aeForm.author.join(',')
						: '',
				Frequency: this.aeForm.frequency,
				// content:this.aeForm.content,create_time:this.aeForm.create_time
				Content: $('.fr-element').html(),
				CreateTime: this.aeForm.create_time,
				ReportVersion: 2
			};

			if (this.aeForm.classifynameArr.length == 2) {
				params.ClassifyIdSecond = JSON.parse(
					this.aeForm.classifynameArr[1]
				).v;
				params.ClassifyNameSecond = JSON.parse(
					this.aeForm.classifynameArr[1]
				).l;
			}
			params.State = 1;
			if (tp == 'yl') {
				sessionStorage.setItem('reportdtl', JSON.stringify(params));
				let { href } = this.$router.resolve({ name: '预览报告' });
				window.open(href, '_blank');
				return false;
			}
			if (tp == 'fb') {
				this.isPublishloading = true;
			}
			// 如果已经添加过就修改 否则新增
			if (this.isAddEnter) {
				let params2 = {
					ReportId: Number(this.report_draft_id),
					State: 1,
					AddType: this.aeForm.add_type,
					ClassifyIdFirst: JSON.parse(this.aeForm.classifynameArr[0]).v,
					ClassifyNameFirst: JSON.parse(this.aeForm.classifynameArr[0]).l,
					Title: this.aeForm.title,
					Abstract: this.aeForm.abstract,
					Author:
						this.aeForm.author.length > 0
							? this.aeForm.author.join(',')
							: '',
					Frequency: this.aeForm.frequency,
					// content:this.aeForm.content,
					Content: $('.fr-element').html(),
					CreateTime: this.aeForm.create_time,
				};
				if (this.aeForm.classifynameArr.length == 2) {
					params2.ClassifyIdSecond = JSON.parse(
						this.aeForm.classifynameArr[1]
					).v;
					params2.ClassifyNameSecond = JSON.parse(
						this.aeForm.classifynameArr[1]
					).l;
				}
				if(tp=='fb') {   
					const hasTel=this.aeForm.classifynameArr.length == 2?JSON.parse(this.aeForm.classifynameArr[1]).HasTeleconference:JSON.parse(this.aeForm.classifynameArr[0]).HasTeleconference
					if(hasTel==1){
						this.isMessagePost = false; 
						this.reporteditMsg(params2,tp)
					}else{
						this.$confirm('发布后，是否推送模板消息和客户群？', '发布提示', {
								confirmButtonText: '推送',
								cancelButtonText: '不推送',
								type: 'warning',
								distinguishCancelAndClose:true,
								beforeClose:(action, instance,done)=>{
									if(action=='close') {
										//右上角
										this.isPublishloading = false;
									} else if(action=='cancel') {
										//cancelButton
										this.isMessagePost = false; 
										this.reporteditMsg(params2,tp)
									}else {
										//confirmButton
										this.isMessagePost = true; 
										this.reporteditMsg(params2,tp)
									}
									done()
								}
						})
					}
					
				}else {
					this.reporteditMsg(params2,tp)
				}
				
			} else {
				if(tp=='fb') {
					const hasTel=this.aeForm.classifynameArr.length == 2?JSON.parse(this.aeForm.classifynameArr[1]).HasTeleconference:JSON.parse(this.aeForm.classifynameArr[0]).HasTeleconference
					if(hasTel==1){
						this.isMessagePost = false; 
						this.reportaddMsg(params,tp)
					}else{
						this.$confirm('发布后，是否推送模板消息和客户群？', '发布提示', {
								confirmButtonText: '推送',
								cancelButtonText: '不推送',
								type: 'warning',
								distinguishCancelAndClose:true,
								beforeClose:(action, instance,done)=>{
									console.log(action, instance);
									if(action==='close') {
										//右上角
										this.isPublishloading = false;
									} else if(action==='cancel') {
										//cancelButton
										this.isMessagePost = false; 
										this.reportaddMsg(params,tp)
									}else {
									//confirmButton
										this.isMessagePost = true; 
										this.reportaddMsg(params,tp)
									}
									done()
								}
						})
					}
						
				}else {
					this.reportaddMsg(params,tp)
				}
			}
		},
		publishreport(id) {
			//发布报告
			reportpublish({ ReportIds: String(id) }).then((res) => {
				if (res.Ret == 200) {
					this.isPublishloading = false;
					this.$router.push({ path: '/reportlist' });
				}
			});
		},
		//批量插入我的图表
		handleImportMyChart(data){
			//设置编辑器获取焦点
			this.editor.events.focus();
			// 获取选定对象
			const selection = getSelection();
			// 判断是否有最后光标对象存在
			if (this.lastEditRange) {
				// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
				selection.removeAllRanges();
				selection.addRange(this.lastEditRange);
			}
			//插入内容
			let htmlStr=''
			const LINK_CHART_URL = process.env.CHART_LINK;
			
			data.forEach(item=>{
				const t=new Date().getTime()
				item.domId=item.UniqueCode+t //避免多次添加同一图表 id相同
				htmlStr=htmlStr+`<p style='text-align:left; margin-top:10px;'>
							<iframe id='${item.domId}' src='${LINK_CHART_URL}?code=${item.UniqueCode}' width='100%' height='350' style='border-width:0px; min-height:350px;'></iframe>
						</p>`
			})
			this.$nextTick(()=>{
				console.log('import start',data);
				this.importChartNum=data.length
				this.editor.html.insert(htmlStr)
				this.handleListenIframeLoad(data)
			})
			
			this.lastEditRange = selection.getRangeAt(0);
		},
		// 监听批量导入的iframe是否加载完
		handleListenIframeLoad(list){
			list.forEach(item=>{
				let ifm=document.getElementById(item.domId)
				ifm.onload=(e)=>{
					this.importChartNum--
					console.log('一个iframe加载了',e.path[0]);
				}
			})
		},

		// 获取沙盘图列表 分页
		getSandTable(){
			this.sandTableLoading = true
			this.isRequesting = true
			sandInterface.sandlistByQuote(this.sandTabelQuery).then(({Data:{List,Paging}})=>{
				if(this.sandTabelQuery.CurrentIndex>1){
					this.sandTableList = [...this.sandTableList,...List]
				}else{
					this.sandTableList = List
					this.sandTableTotal = Paging.Totals
					if(this.sandTableList.length ==0){
						this.loadedText = '暂无数据'
					}else if(this.sandTableList.length>=this.sandTableTotal){
						this.loadedText='已全部加载完'
					}else{

					}
				}		
			})
			.finally(()=>{
				this.sandTableLoading = false
				this.isRequesting = false
			})
		},
		// 沙盘列表滚动事件，触底加载下一页数据 防抖
		sandTableHandleScroll:_.debounce(function (e) {
			if(this.sandTableList.length>=this.sandTableTotal){
				this.loadedText = '已全部加载完'
				return
			}
			if(e.target.scrollHeight-e.target.clientHeight-e.target.scrollTop<10 && !this.isRequesting){
				this.sandTabelQuery.CurrentIndex++
				this.getSandTable()
			}
		},100),
		getclassifylist() {
			//获取分类列表
			let params = { CurrentIndex: 0, PageSize: 1000, KeyWord: '',HideDayWeek:1,/*不显示晨报/周报*/ };
			classifylist(params).then((res) => {
				if (res.Ret == 200 && Array.isArray(res.Data.List)) {
					this.optionsArr = [];
					res.Data.List.forEach((item, index) => {
						let newitem = {
							label: item.ClassifyName,
							value: JSON.stringify({
								l: item.ClassifyName,
								v: parseInt(item.Id),
								HasTeleconference:item.HasTeleconference
							}),
						};
						if (item.Child && item.Child.length > 0) {
							let childnode = [];
							item.Child.forEach((itemchild, i) => {
								childnode.push({
									label: itemchild.ClassifyName,
									value: JSON.stringify({
										l: itemchild.ClassifyName,
										v: parseInt(itemchild.Id),
										HasTeleconference:itemchild.HasTeleconference
									}),
								});
							});
							newitem.children = childnode;
						} else {
							newitem.children = undefined;
							newitem.disabled=true
						}
						this.optionsArr.push(newitem);
					});
					console.log(this.optionsArr);
				}
			});
		},
	},
	components: {importMyChart},
	watch: {
		'aeForm.add_type'(to, from) {
			if (from == 2 && to == 1) {
				this.aeForm = {
					add_type: 1,
					classify_name: 1,
					classifynameArr: [],
					title: '',
					abstract: '',
					author: ['FICC团队'],
					frequency: '日度',
					create_time: http.dateFormatter(new Date(), false),
					content: '',
				};
			}
		},
		'sandTabelQuery.Keyword'(newval,oldval){
			this.$refs.sandTable.scrollTop=0
			this.sandTabelQuery.CurrentIndex = 1
			this.getSandTable()
		}
	},
};
</script>

<style scoped lang="scss">
#addreport {
	display: flex;
	overflow: hidden;
	#leftfroala {
		flex: 1;
		max-width: calc(100vw - 750px);
	}
	#rightitems {
		width: 500px;
		flex: 500px 0 0;
		overflow: hidden;
		position: fixed;
		right: 30px;
		#tabs {
			padding: 0px 20px;
			box-sizing: border-box;
			margin-bottom: 15px;
			overflow: hidden;
			> p {
				/* display: inline-block; */
				float: left;
				// width: 50%;
				width: 25%;
				font-size: 18px;
				cursor: pointer;
				color: #1f2e4d;
				padding: 10px 0;
				text-align: center;
			}
			> p.active {
				border-bottom: 2px solid #3464e0;
				color: #3464e0;
			}
		}
		.liststy {
			width: 100%;
			margin: 20px 0;
			padding: 20px;
			box-sizing: border-box;
			border: 1px solid #eaeaea;
			border-radius: 10px;
			position: relative;
			overflow: hidden;
			> p {
				text-align: center;
				font-size: 16px;
				margin-bottom: 10px;
			}
			> img {
				width: 100%;
				height: auto;
			}
			.source-identification{
				text-align: left;
			}
		}
		.loaded-text{
			height: 20px;
			text-align: center;
			color: #666;
			font-size: 14px;
		}
	}
}
</style>
<style lang="scss">
#addreport {
	.el-tabs__nav-wrap::after {
		height: 0;
	}
	.el-tabs__item { font-size: 16px; }
}	
</style>
