
<template>
<div id="addreport">
	<div id="leftfroala">
	<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="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;
		"
	>
		<div id="tabs">
			<p
			@click="tabsactive = '基础信息'"
			:class="{ active: tabsactive == '基础信息' ? true : false }"
			>
			基础信息
			</p>
			<p
			@click="tabsactive = '图表插入'"
			:class="{ active: tabsactive == '图表插入' ? true : false }"
			>
			图表插入
			</p>
		</div>
		<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="getreportlist(key_word)"
			>
			</el-input>
			<div
			id="reportwin"
			style="
				height: calc(100vh - 320px);
				overflow-x: hidden;
				overflow-y: auto;
			"
			>
			<div
				v-for="(item, index) in newreportlist"
				:key="index"
				class="liststy"
			>
				<p class="color_primary">{{ item.element__title }}</p>
				<img
					:src="item.image"
					:id="'listnode' + index"
					@click="insertHtml(item)"
				/>
			</div>
			</div>
		</div>
	</div>
	</div>
</div>
</template>

<script>
import {
autosave,
reportadd,
reportedit,
classifylist,
classifyIdDetail,
reportpublish,
reportauthor,
getDraft,
} 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'

export default {
mixins:[mixinMsg],
data() {
	var that = this;
	return {
	tabsactive: "基础信息",
	optionsArr: [],
	key_word: "",
	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",
			},
		],
	},
	editor: null,
	lastEditRange: null,
	report_draft_id: 0,
	froalaConfig: {
		//More -> https://www.froala.com/wysiwyg-editor/docs/options
		// toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline','strikeThrough','|', 'fontFamily', 'fontSize', 'color', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'],//['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项
		toolbarButtons: [
			"insertImage",
			"insertVideo",
			"embedly",
			"insertFile",
			"textColor",
			"bold",
			"italic",
			"underline",
			"strikeThrough",
			"subscript",
			"superscript",
			"fontFamily",
			"fontSize",
			"color",
			"inlineClass",
			"inlineStyle",
			"paragraphStyle",
			"lineHeight",
			"paragraphFormat",
			"align",
			"formatOL",
			"formatUL",
			"outdent",
			"indent",
			"quote",
			"insertTable",
			"emoticons",
			"fontAwesome",
			"specialCharacters",
			"insertHR",
			"selectAll",
			"clearFormatting",
			"html",
			"undo",
			"redo",
		],
		height: screen.height - 390,
		fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
		fontSizeDefaultSelection: "16",
		theme: "dark", //主题
		placeholderText: "请输入内容",
		language: "zh_cn", //国际化
		imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
		videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
		fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
		imageDefaultWidth: false,
		// imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
		quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
		toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
		// disableRightClick:true,//是否屏蔽右击
		// colorsHEXInput:false,//关闭16进制色值
		toolbarSticky: false, //操作栏是否自动吸顶
		// zIndex:99999,
		saveInterval: 0,
		/* 				saveParam: 'content',
			saveURL: process.env.API_ROOT+'/report/saveReportContent',
			saveMethod: 'POST',
			saveParams: {}, */
		events: {
			// 'froalaEditor.initialized':function(){
			//   console.log('initialized', this);
			// },
			//this.editor 定义在vue data 中
			initialized: function () {
			// this.editor = editor;
			that.editor = this;
			// that.editor.html.set(that.value);
			// that.setHtml()
			},
			keyup: function (e, editor) {
			//添加事件，在每次按键按下时，都记录一下最后停留位置
			that.$nextTick(function () {
				that.lastEditRange = getSelection().getRangeAt(0);
			});
			},
			click: function (e, editor) {
			//添加事件，在每次鼠标点击时，都记录一下最后停留位置
			that.$nextTick(function () {
				that.lastEditRange = getSelection().getRangeAt(0);
			});
			},
			/* 					'save.before': function () {
					// that.froalaConfig.saveParams.report_draft_id=that.report_draft_id;
					// that.froalaConfig.saveParams.state=1;
					// that.froalaConfig.saveParams.classify_id_first=that.aeForm.classifynameArr.length>0?JSON.parse(that.aeForm.classifynameArr[0]).v:'';
					// that.froalaConfig.saveParams.classify_name_first=that.aeForm.classifynameArr.length>0?JSON.parse(that.aeForm.classifynameArr[0]).l:'';
					// that.froalaConfig.saveParams.classify_id_second=that.aeForm.classifynameArr.length==2?JSON.parse(that.aeForm.classifynameArr[1]).v:'';
					// that.froalaConfig.saveParams.classify_name_second=that.aeForm.classifynameArr.length==2?JSON.parse(that.aeForm.classifynameArr[1]).l:'';
					// that.froalaConfig.saveParams.title=that.aeForm.title;
					// that.froalaConfig.saveParams.abstract=that.aeForm.abstract;
					// that.froalaConfig.saveParams.author=that.aeForm.author.length>0?that.aeForm.author.join(','):'';
					// that.froalaConfig.saveParams.frequency=that.aeForm.frequency;
					that.froalaConfig.saveParams.ReportId=that.report_draft_id;
					console.log( that.froalaConfig.saveParams );
					
					// $('iframe').each(function(k,i){
					// 	var h = '',elementID;
					// 	// let tableheight;
					// 	try {
					// 		h = $(i)[0].contentWindow.location.href;
					// 		// tableheight =$(i)[0].contentWindow.raw[0].table.length *30 +100;
					// 		console.log("start get location_href")
					// 		console.log(h)
					// 		console.log("end get location_href")
					// 	} catch (err) {
					// 		h = $(i).attr('src');
					// 		// tableheight = 350;
					// 		console.log("start get location_href fail ");
					// 		console.log(h);
					// 		console.log("end get location_href fail ");
					// 	}
					// 	elementID = h.split('/')[4];
					// 	// $(i).attr('height', tableheight);
					// 	if($(i).attr('src') !== h && h!==''){
					// 		$(i).unbind('load');
					// 		$(i).on('load', function(e){
					// 			console.log(1);
					// 		});
					// 		let newSrc=$(i)[0].contentWindow.location.href;
					// 		console.log("start newSrc ");
					// 		console.log(newSrc);
					// 		console.log("end newSrc ");
					// 		$(i).attr('src', newSrc);
					// 	}
					// });
				},
				'save.after': function (res) {
					res=JSON.parse(res);
					if( res.Ret==200 ){
						that.report_id=res.Data.ReportId;
						that.lastsavetime=http.dateFormatter(new Date(),true);
					}
				} */
			},
			charCounterCount:false,
			reportloadding:false,
			lastsavetime:'',
			isAddEnter:false,//是否已经添加过
			timer:null,
			ischange:false,
			isPublishloading:false,
		},
	}
},
mounted(){
	// this.getDrafts();
	this.getclassifylist();
	this.getreportlist('');
	this.getreportauthor();
	// $("#rightitems").css({minHeight:screen.height});
	this.timer = setInterval(() => {
		this.autoSave();
	}, 6000)
},
destroyed() {
	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);
		if(this.report_draft_id) {
			$('iframe').each(function(k,i){
				var h = '',elementID;
				try {
					h = $(i)[0].contentWindow.location.href;
					console.log(h)
				} catch (err) {
					h = $(i).attr('src');
					console.log(h);
				}
				elementID = h.split('/')[4];
				if($(i).attr('src') !== h && elementID){
					$(i).unbind('load');
					$(i).on('load', function(e){
						console.log(1);
					});
					let newSrc=$(i)[0].contentWindow.location.href;
					// console.log(newSrc);
					$(i).attr('src', newSrc);
				}
			});
			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.title)&&this.aeForm.classifynameArr.length==2 ){
			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;
				}
				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){
		if( (!this.aeForm.classifynameArr)||this.aeForm.classifynameArr.length==0 ){
			this.$message.error('请选择分类');
			return false;
		}
		if( !this.aeForm.title ){
			this.$message.error('请输入标题');
			return false;
		}
		$('iframe').each(function(k,i){
			var h = '',elementID;
			try {
				h = $(i)[0].contentWindow.location.href;
				// console.log("start get location_href")
				console.log(h)
				// console.log("end get location_href")
			} catch (err) {
				h = $(i).attr('src');
				// console.log("start get location_href fail ");
				console.log(h);
				// console.log("end get location_href fail ");
			}
			elementID = h.split('/')[4];
			if($(i).attr('src') !== h && elementID){
				$(i).unbind('load');
				$(i).on('load', function(e){
					console.log(1);
				});
				let newSrc=$(i)[0].contentWindow.location.href;
				// console.log("start newSrc ");
				// console.log(newSrc);
				// console.log("end newSrc ");
				$(i).attr('src', newSrc);
			}
		});
		// console.log("content end");
		// console.log(this.aeForm.content)
		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: 1
		};

		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 hasTel=JSON.parse(this.aeForm.classifynameArr[0]).HasTeleconference //是否是电话会 0没有 1有
			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;
				hasTel=JSON.parse(this.aeForm.classifynameArr[1]).HasTeleconference;
			}
			if(tp=='fb') {
					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)
			}
			// reportedit(params2).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'});
			// 		}
			// 	}
			// });
		}else {
			let hasTel=this.aeForm.classifynameArr.length==2?JSON.parse(this.aeForm.classifynameArr[1]).HasTeleconference:JSON.parse(this.aeForm.classifynameArr[0]).HasTeleconference
			
			if(tp=='fb') {
				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)
			}
			// reportadd(params).then((res) => {
			// 	if( res.Ret==200 ){
			// 		this.$message.success( res.Msg );
			// 		this.report_draft_id=res.Data.ReportId;
			// 		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'});
			// 		}
			// 		//已经添加过报告
			// 		this.isAddEnter = true;
			// 	}
			// });
		}
	},
	publishreport(id){  //发布报告
		reportpublish({ReportIds:String(id)}).then((res) => {
			if( res.Ret==200 ){
				this.isPublishloading = false;
				this.$router.push({path:'/reportlist'});
			}
		});
	},
	insertHtml(item){
		//设置编辑器获取焦点
		this.editor.events.focus();
		// 获取选定对象
		const selection = getSelection();
		// 判断是否有最后光标对象存在
		if (this.lastEditRange) {
			// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
			selection.removeAllRanges()
			selection.addRange(this.lastEditRange)
		}
		//插入内容
		// this.editor.html.insert( `<img src=${emoji} >` );
		this.$nextTick(function(){
		// this.editor.html.insert( `<iframe src="http://vmp.hzinsights.com/element/${item.element_id}/${urlSlug(item.element__title_en, { separator: '_' })}/|||||/" key="${item.element_id}" width="100%" display="initial" position="relative" style="border-width:0px;height:400px;"></iframe>` );
		let url=`https://vmp.hzinsights.com/element/${item.element_id}/${urlSlug(item.element__title_en, { separator: '_' })}/|||||/`;
		this.editor.html.insert( "<p style='text-align:left; margin-top:10px;'><iframe src='"+url+"' key='"+item.element_id+"' width='100%' height='350' display='initial' position='relative' border='none' style='border-width:0px; min-height:350px;'></iframe></p>" );
		// this.editor.html.insert( "<iframe src='"+url+"' key='"+item.element_id+"' width='100%' height='300' display='initial' position='relative' border='none' style='border-width:0px; height:400px;'></iframe>" );
		});
		this.lastEditRange = selection.getRangeAt(0)
	},
	getreportlist(word){
		let that=this;
		if( that.reportloadding ){
			return false;
		}
		that.reportloadding=true;
		that.newreportlist=[];
		$.ajax({
				url:'https://vmp.hzinsights.com/api/v1/flow/images',
				type:'get',
			data:{search_keywords:word,size:100},
				dataType:'json',
				xhrFields:{withCredentials:false},
				success:function(res){
				that.newreportlist=res.results || [];
				that.reportloadding=false;
				},error:function(error){}
		});
	},
	getclassifylist(){  //获取分类列表
		let params={CurrentIndex:0,PageSize:1000,KeyWord:'',HideDayWeek:1,/*不显示晨报/周报*/};
		classifylist(params).then((res) => {
			if( res.Ret==200&&Array.isArray(res.Data.List) ){
				console.info("line 455");
				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;
					}
					this.optionsArr.push(newitem);
				});
				console.log( this.optionsArr );
			}
		});
	},
	
},
components:{},
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:''
			};
		}
	},
}
}
</script>

<style scoped lang="scss">
#addreport {
display: flex;
overflow: hidden;
#leftfroala {
	flex: 1;
}
#rightitems {
	width: 500px;
	flex: 500px 0 0;
	overflow: hidden;
	#tabs {
	padding: 0px 40px;
	box-sizing: border-box;
	margin-bottom: 15px;
	overflow: hidden;
	> p {
		display: inline-block;
		float: left;
		width: 50%;
		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;
	}
	}
}
}
</style>