<template>
	<div>
		<div style="border: 1px solid #ccc; margin-top: 10px" :key="editorKey">
			<!-- 工具栏 -->
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
			<!-- 编辑器 -->
			<Editor style="height: 40vh; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html" ref="editor" 
				@onChange="onChange" @onCreated="onCreated" />
		</div>
	</div>
</template>

<script>
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		UploadFilesLocal
	} from '@/api/apis/auth.js'
	export default {
		name: "editorVue",
		components: {
			Editor,
			Toolbar
		},
		props: {
			content: {
				type: String,
				default: '',
			},
			htmlContent: {
				type: String,
				default: '',
			},
			readOnlys: { // 只读
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				editorKey:1,
				editor: null,
				html: '',
				toolbarConfig: {
					/* 显示哪些菜单，如何排序、分组 */
					toolbarKeys: [
						'headerSelect',
						// '|',
						'bold',
						'underline',
						'italic',
						'color',
						'bgColor',
						// '|',
						'indent', // 增加缩进
						'delIndent', // 减少缩进
						'justifyLeft', // 左对齐
						'justifyRight', // 右对齐
						'justifyCenter', // 居中
						'justifyJustify', // 两端对齐
						// '|',
						'fontSize',
						'fontFamily',
						'lineHeight',
						// '|',
						'bulletedList',
						'numberedList',
						'todo',
						'insertLink',
						// 'insertTable',
						// '|',
						'codeBlock',
						'divider',
						// 'uploadImage',
						'undo',
						'redo',
					],
					// excludeKeys: [ ], /* 隐藏哪些菜单 */
				},
				editorConfig: {
					placeholder: "请输入内容",
					// autoFocus: false,
					// readOnly: true, // 只读、不可编辑
					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						// 配置上传图片
						uploadImage: {
							customUpload: this.uploaadImg
						},
					},
				},
			};
		},
		watch: {
			readOnlys: {
				handler(newV) {
					if (newV) {
						this.editor.disable() // 只读模式
					}
				}
			},
		},
		methods: {
			changeKey(){
				this.editorKey += 1
			},
			setEditorInnerHTML(content) {
				this.html = content
				// if(content){
					this.changeKey()
				// }
				// this.setKey()
				// this.html= JSON.stringify(content)
				
				// this.html = Object.seal(content);
				// this.editor.dangerouslyInsertHtml(content)
			},
			getbase64(imgfiles) {
				let reader = new FileReader();
				reader.readAsDataURL(imgfiles);
				reader.onload = (e) => {
					let imgSrcbase64 = e.target.result;
				}
			},
			uploaadImg(file, insertFn) {
				// this.getbase64(file)
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = (e) => {
					let url = e.target.result;
					this.$emit('uploadImg', file, insertFn, url)
				}
				return
				let url = ''
				let formData = new FormData();
				formData.append("type", 2)
				formData.append("files", file)
				formData.append("floadname", '消息模板')
				UploadFilesLocal(formData).then(res => {
					if (res.success == 'true') {
						// this.uploadTx(res.data[0])
						url = res.data[1].split('/wwwroot')[1]
						this.$emit('uploadImg', file, insertFn, url)
					}
				})
			},
			onCreated(editor) {
				this.editor = Object.seal(editor);
			},
			onChange(editor) {
				this.$emit('changeData', this.html)
			},
		},
		created() {
			this.html = Object.seal(this.content);
		},
		beforeDestroy() {
			const editor = this.editor;
			if (editor == null) return;
			editor.destroy(); // 组件销毁时，及时销毁 editor
		},
	};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
