<template>
	<div id="editreport">
		<div 
			id="leftfroala"
			:class="{'full':!isRightFormShow,'block':isRightFormShow}"
			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="CNEditorConfig"
				v-model="aeForm.content"
			></froala>
		</div>
		<div id="rightitems" v-show="isRightFormShow">
			<!-- 通过接口判断是否走审批流,按钮显示的不一致,干脆判断完成再显示所有按钮-->
			<div v-if="!pageLoading"
				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 v-permission="permissionBtn.reportManageBtn.reportManage_reportView"
					type="primary"
					size="medium"
					plain
					@click.native="clickreportadd('yl')"
					>预览</el-button
				>
				<el-button
					type="primary"
					size="medium"
					plain
					@click.native="clickreportadd('cg')"
					>存草稿</el-button
				>
				<!--不走审批流-->
				<template v-if="!isApprove||!hasApproveFlow">
					<el-button v-permission="permissionBtn.reportManageBtn.reportManage_publish"
						type="primary"
						size="medium"
						:disabled="checkLoading"
						@click.native="clickreportadd('dsfb')"
						>定时发布</el-button
					>
					<el-button v-permission="permissionBtn.reportManageBtn.reportManage_publish"
						type="primary"
						size="medium"
						:disabled="checkLoading"
						@click.native="clickreportadd('fb')"
						:loading="isPublishloading"
						>发布</el-button
					>
				</template>
				<template v-if="isApprove&&hasApproveFlow">
					<el-button v-permission="permissionBtn.reportManageBtn.reportManage_publish"
						:disabled="checkLoading"
						type="primary" size="medium" @click="clickreportadd('submit')">提交</el-button>
				</template>
			</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"
								disabled
								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"
								: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 :label="10">跨品种分析</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
						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 v-if="tabsactive == '语义分析插入'">
					<importSemantics @handleImportSemantic="(item)=>insertHtml(item,'image')"/>
				</div>
			</div>
		</div>
		<span
			class="slide-icon"
			:class="{'slide-left':!isRightFormShow,'slide-right':isRightFormShow}"
			@click="isRightFormShow = !isRightFormShow"
		>
			<i :class="{'el-icon-d-arrow-left':!isRightFormShow,'el-icon-d-arrow-right':isRightFormShow}"></i>
		</span>

		<!-- 定时发布弹窗 -->
		<el-dialog 
			v-dialogDrag 
			:append-to-body="true" 
			:visible.sync="showDSFB" 
			width="500px" 
			title="定时发布"
		>
			<div>
				<div>
					<span>发送时间</span>
					<el-date-picker
						v-model="taskTime"
						type="datetime"
						placeholder="选择日期时间"
						value-format="yyyy-MM-dd HH:mm"
						:picker-options="timePickerOpt"
					/>
				</div>
				<p style="margin:15px 0">设置成功之后，研报将定时进行发送。</p>
				<div style="text-align:right;margin:20px 0">
					<el-button type="primary" plain @click="showDSFB=false">取消</el-button>
					<el-button type="primary" @click="handleSetReportPrepublish">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	autosave,
	reportdetail,
	reportedit,
	classifylist,
	reportpublish,
	reportauthor,
	classifyIdDetail,
	dataBaseInterface,
	sandInterface,
	reportSetPrepublish
} from 'api/api.js';
import VueFroala from 'vue-froala-wysiwyg';
import urlSlug from 'url-slug';
import http from '@/api/http.js';
import mixinMsg from './mixins/messagePush'
import reportMixin from './mixins/reportMixin';
import reportApproveConfig from "@/mixins/reportApproveConfig.js"
import importMyChart from './components/importMyChart.vue'
import importSemantics from './components/importSemantics.vue';
export default {
	mixins:[mixinMsg,reportMixin,reportApproveConfig],
	data() {
		var that = this;
		return {
			//批量导入图表
			importChartNum:0,//批量导入图表的数量 如果大于0则说明在加载
			report_id: this.$route.query.id,
			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),
				content: '',
			},
			aerules: {
				add_type: [
					{
						required: true,
						message: '',
						trigger: 'blur',
					},
				],
				classifynameArr: [
					{
						required: true,
						message: '',
						trigger: 'blur',
					},
				],
				title: [
					{
						required: true,
						message: '请输入',
						trigger: 'blur',
					},
				],
			},
			lastEditRange: null,
			reportloadding: false,
			lastsavetime: '',
			timer: null,
			ischange: false,
			isPublishloading: false,
			ThsMsgIsSend:'',//是否推送过客群
		};
	},
	mounted() {
		this.getreportdetail();
		this.getclassifylist();
		this.getreportlist('');
		this.getreportauthor();
		this.getSandTable();
		this.getSheetList();
		this.timer = setInterval(() => {
			this.autoSave();
		}, 6000);

		window.addEventListener('message',this.reInitIframe)
	},
	updated() {
		$('#leftfroala').find('p').css({ fontSize: '16px',width:'100%'});
	},
	destroyed() {
		window.removeEventListener('message',this.reInitIframe)
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	watch: {
		'sandTabelQuery.Keyword'(newval,oldval){
			this.$refs.sandTable.scrollTop=0
			this.sandTabelQuery.CurrentIndex = 1
			this.getSandTable()
		}
	},
	methods: {
		// 每十秒自动保存
		autoSave() {
			console.log(this.ischange);
			// if (this.ischange) {
				if(!this.autoSaveFlag) return
				//如果富文本中有未上传完成的图片,去除这个dom
				$('.fr-element').find('img.fr-uploading').length&&$('.fr-element').find('img.fr-uploading').remove()
				autosave({
					ReportId: Number(this.$route.query.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;
			// }
		},
		userclassidreportdetail() {
			//检查classifynameArr是否有审批流
			let classify = this.aeForm.classifynameArr.map(i=>{
				return JSON.parse(i).v||0
			})
			this.checkClassifyNameArr(1,classify)

			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;
			}
			console.log(this.aeForm.classifynameArr);
			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;
					}
					this.aeForm = {
						add_type: 2,
						classify_name: 1,
						classifynameArr:
							res.Data.ClassifyIdSecond && res.Data.ClassifyNameSecond
								? [
										JSON.stringify({
											l: res.Data.ClassifyNameFirst,
											v: res.Data.ClassifyIdFirst,
										}),
										JSON.stringify({
											l: res.Data.ClassifyNameSecond,
											v: res.Data.ClassifyIdSecond,
										}),
								  ]
								: [
										JSON.stringify({
											l: res.Data.ClassifyNameFirst,
											v: res.Data.ClassifyIdFirst,
										}),
								  ],
						title: res.Data.Title,
						abstract: res.Data.Abstract,
						author: res.Data.Author ? res.Data.Author.split(',') : '',
						frequency: res.Data.Frequency,
						create_time: res.Data.CreateTime,
						content: res.Data.Content,
					};
				}
			});
		},
		getreportauthor() {
			reportauthor({}).then((res) => {
				if (res.Ret == 200) {
					this.authorlist = res.Data.List || [];
				}
			});
		},
		getreportdetail() {
			reportdetail({ ReportId: parseInt(this.report_id) }).then((res) => {
				if (res.Ret == 200) {
					let data = res.Data;
					this.aeForm = {
						add_type: parseInt(data.AddType),
						classify_name: 1,
						classifynameArr:
							data.ClassifyIdSecond && data.ClassifyNameSecond
								? [
										JSON.stringify({
											l: data.ClassifyNameFirst,
											v: parseInt(data.ClassifyIdFirst),
										}),
										JSON.stringify({
											l: data.ClassifyNameSecond,
											v: parseInt(data.ClassifyIdSecond),
										}),
								  ]
								: [
										JSON.stringify({
											l: data.ClassifyNameFirst,
											v: parseInt(data.ClassifyIdFirst),
										}),
								  ],
						title: data.Title,
						abstract: data.Abstract,
						author: data.Author ? data.Author.split(',') : '',
						frequency: data.Frequency,
						create_time: data.CreateTime,
						content: data.Content,
					};
					this.ThsMsgIsSend=data.ThsMsgIsSend
					// 回显定时发布时间
					if(data.PrePublishTime){
						this.taskTime=data.PrePublishTime
					}
					let classify = [data.ClassifyIdFirst,data.ClassifyIdSecond]
					this.checkClassifyNameArr(1,classify)
				}
			});
		},
		clickreportadd(tp) {
			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 = {
				ReportId: parseInt(this.report_id),
				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,
			};
			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'||tp=='submit'){
				this.isPublishloading = true;
			}
			const isPost = this.permissionBtn.checkPermissionBtn(this.permissionBtn.reportManageBtn.reportManage_sendMsg)&&(!this.isApprove)
			if (tp == 'fb') {
				// 判断是否要推送客群
				let hasTel=0
				if(this.aeForm.classifynameArr.length == 2){
					this.optionsArr.forEach(item=>{
						item.children&&item.children.forEach(childItem=>{
							if(JSON.parse(item.value).v==params.ClassifyIdSecond){
								hasTel=childItem.HasTeleconference
							}
						})
					})
				}else{
					this.optionsArr.forEach(item=>{
						if(JSON.parse(item.value).v==params.ClassifyIdFirst){
							hasTel=item.HasTeleconference
						}
					})
				}
				console.log(hasTel);
				if(hasTel==1||this.ThsMsgIsSend==1){
					this.isMessagePost = false; 
					this.reporteditMsg(params,tp)
				}else if(isPost){
					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.reporteditMsg(params,tp)
						        }else {
						           //confirmButton
								   	this.isMessagePost = true; 
									this.reporteditMsg(params,tp)
						        }
						        done()
						    }
					})
				}else{
					this.isMessagePost = false; 
					this.reporteditMsg(params,tp)
				}
			}else {
				this.reporteditMsg(params,tp)
			}
			// reportedit(params).then((res) => {
			// 	if (res.Ret == 200) {
			// 		this.$message.success(res.Msg);
			// 		if (tp == 'yl') {
			// 			// this.$router.push({name:'预览报告',query:{id:res.report_id}});
			// 			let { href } = this.$router.resolve({
			// 				name: '预览报告',
			// 				query: { id: res.Data.ReportId },
			// 			});
			// 			window.open(href, '_blank');
			// 		} else if (tp == 'fb') {
			// 			this.publishreport(res.Data.ReportId);
			// 		} else {
			// 			// this.$router.push({path:'/reportlist'});
			// 		}
			// 	}
			// });
		},
		publishreport(id) {
			//发布报告
			reportpublish({ ReportIds: String(id) }).then((res) => {
				if (res.Ret == 200) {
					this.isPublishloading = false;
					this.$router.push({ path: '/reportlist' });
				}
			});
		},
		// 定时发布报告
		handleSetReportPrepublish(){
			if(!this.taskTime){
				this.$message.warning('请选择定时发布的时间')
				return
			}
			const now=this.$moment().format('YYYY-MM-DD HH:mm:ss')
			console.log(now);
			console.log(this.taskTime);
			if(this.$moment(this.taskTime).isBefore(now,'second')){
				this.$message.warning('定时发布不得早于当前时间')
				return
			}
			console.log('定时去发布了');
			// 如果改报告已经推送过模板消息
			if(this.ThsMsgIsSend==1){
				reportSetPrepublish({
					ReportId:Number(this.report_id),
					PrePublishTime:this.taskTime,
					PreMsgSend:0,
				}).then(res=>{
					if(res.Ret===200){
						this.$message.success('定时发布成功！')
						this.$router.push({ path: '/reportlist' });
					}
				})
				return
			}
			const isPost = this.permissionBtn.checkPermissionBtn(this.permissionBtn.reportManageBtn.reportManage_sendMsg)

			this.$confirm(isPost?'是否发布定时报告，并推送模板消息？':'是否发布定时报告？', '发布提示', {
				confirmButtonText: isPost?'推送':'发布',
				cancelButtonText: isPost?'不推送':'取消',
				type: 'warning',
				distinguishCancelAndClose:true,
				beforeClose:(action, instance,done)=>{
					console.log(action, instance);
					if(action==='close'||action==='cancel') {
						//右上角或者不推送
						if(isPost){
							reportSetPrepublish({
								ReportId:Number(this.report_id),
								PrePublishTime:this.taskTime,
								PreMsgSend:0,
							}).then(res=>{
								if(res.Ret===200){
									this.$message.success('定时发布成功！')
									this.$router.push({ path: '/reportlist' });
								}
							})
						}
					} else {
						//confirmButton
						reportSetPrepublish({
							ReportId:Number(this.report_id),
							PrePublishTime:this.taskTime,
							PreMsgSend:isPost?1:0,
						}).then(res=>{
							if(res.Ret===200){
								this.$message.success('定时发布成功！')
								this.$router.push({ path: '/reportlist' });
							}
						})
					}
					done()
				}
			})

		},
		//批量插入我的图表
		handleImportMyChart(data){
			//设置编辑器获取焦点
			this.editor.events.focus();
			// 获取选定对象
			const selection = getSelection();
			// 判断是否有最后光标对象存在
			if (this.lastEditRange) {
				// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
				selection.removeAllRanges();
				selection.addRange(this.lastEditRange);
			}
			//插入内容
			let htmlStr=''
			const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
			
			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);
					});
				}
			});
		},
	},
	components: {importMyChart,importSemantics},
};
</script>

<style scoped lang="scss">
#editreport {
	display: flex;
	overflow: hidden;
	#leftfroala {
		flex: 1;
		overflow: hidden;
		&.full{
			max-width: calc(100vw - 200px - 60px);
		}
		&.block{
			max-width: calc(100vw - 200px - 60px - 500px);
		}
	}
	#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: 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;
		}
	}
	.slide-icon {
		padding: 20px 0;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
		border-radius: 5px;
		background-color: #fff;
		cursor: pointer;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
		&:hover {
			background-color: #e0e0e0;
		}
		&.slide-left {
			right: 30px;
		}
		&.slide-right {
			right: 500px;
		}
	}
}
</style>
<style lang="scss">
#editreport {
	.el-tabs__nav-wrap::after {
		height: 0;
	}
	.el-tabs__item { font-size: 16px; }
}	
</style>
