<template>
	<div ref="aiEditor" :style="{height: editorHeight, width: '100%'}"></div>
</template>

<script>
import {AiEditor} from "aieditor";
import "aieditor/dist/style.css"

export default {
	name: 'scCkeditor',
	emits: ['update:modelValue'],
	props: {
		modelValue: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入内容……'
		},
		toolbar: {
			type: String,
			default: 'basic'
		},
		height: {
			type: String,
			default: '400px'
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			editor: null,
			defaultValue: '',
			editorHeight: '300px',
			toolbars: {
				full: [
					"undo", "redo", "brush", "eraser",
					"|", "heading", "font-family", "font-size",
					"|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
					"|", "highlight", "font-color",
					"|", "align", "line-height",
					"|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
					"|", "image", "video", "attachment", "quote", "code-block", "table",
					"|", "source-code", "printer", "fullscreen", "ai"
				],
				basic: [
					"undo", "redo", "brush", "eraser",
					"|", "heading", "font-family", "font-size",
					"|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
					"|", "highlight", "font-color",
					"|", "align", "line-height",
					"|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
					"|", "image", "video", "attachment", "quote", "code-block", "table",
				],
				simple: ["undo", "redo",
					"|", "font-family", "font-size",
					"|", "bold", "italic", "underline", "strike", "emoji",
					"|", "highlight", "font-color",
					"|", "image", "link"]
			}
		}
	},
	watch: {
		modelValue(newValue) {
			if (newValue !== this.defaultValue) {
				this.defaultValue = newValue
			}
		},
		height: {
			handler(newValue) {
				if (indexOf(newValue, 'px') === -1){
					this.editorHeight = newValue > 200 ? newValue + 'px' : '200px'
				}else{
					newValue = newValue.replace('px', '')
					this.editorHeight = newValue > 200 ? newValue + 'px' : '200px'
				}
			},
			immediate: true
		}
	},
	mounted() {
		this.editor = new AiEditor({
			element: this.$refs.aiEditor,
			placeholder: this.placeholder,
			content: this.defaultValue,
			toolbarKeys: this.toolbars[this.toolbar],
			onChange: (editor) => {
				this.$emit('update:modelValue', editor.getHtml())
			},
			editable: !this.disabled,
			textSelectionBubbleMenu: {
				enable: true,
				items: ["Bold", "Italic", "Underline", "Strike", "code", "comment"],
			},
			image: {
				uploadUrl: this.$API.common.upload.url,
				uploadHeaders: {
					Authorization: 'Bearer ' + this.$TOOL.data.get('TOKEN')
				},
				uploadFormName: 'file',
				uploader: (file, uploadUrl, headers, formName) => {
					const formData = new FormData();
					formData.append(formName, file);
					formData.append('type', 'images');
					return new Promise((resolve, reject) => {
						fetch(uploadUrl, {
							method: "post",
							headers: {'Accept': 'application/json', ...headers},
							body: formData,
						}).then((resp) => resp.json())
							.then(json => {
								resolve({json});
							}).catch((error) => {
								reject(error);
							})
					});
				},
				uploaderEvent: {
					onSuccess: (file, response) => {
						let res = response.json
						if (res.code === 1) {
							return {errorCode: 0, data: {
								src: res.data.url
							}}
						} else {
							return false
						}
					}
				}
			},
			video: {
				uploadUrl: this.$API.common.upload.url,
				uploadHeaders: {
					Authorization: 'Bearer ' + this.$TOOL.data.get('TOKEN')
				},
				uploadFormName: 'file',
				uploader: (file, uploadUrl, headers, formName) => {
					const formData = new FormData();
					formData.append(formName, file);
					formData.append('type', 'video');
					return new Promise((resolve, reject) => {
						fetch(uploadUrl, {
							method: "post",
							headers: {'Accept': 'application/json', ...headers},
							body: formData,
						}).then((resp) => resp.json())
							.then(json => {
								resolve(json);
							}).catch((error) => {
							reject(error);
						})
					});
				},
				uploaderEvent: {
					onSuccess: (file, response) => {
						let res = response.json
						if (res.code === 1) {
							return {errorCode: 0, data: {
								src: res.data.url
							}}
						} else {
							return false
						}
					}
				}
			},
			attachment: {
				uploadUrl: this.$API.common.upload.url,
				uploadHeaders: {
					Authorization: 'Bearer ' + this.$TOOL.data.get('TOKEN')
				},
				uploadFormName: 'file',
				uploader: (file, uploadUrl, headers, formName) => {
					const formData = new FormData();
					formData.append(formName, file);
					formData.append('type', 'files');
					return new Promise((resolve, reject) => {
						fetch(uploadUrl, {
							method: "post",
							headers: {'Accept': 'application/json', ...headers},
							body: formData,
						}).then((resp) => resp.json())
							.then(json => {
								resolve(json);
							}).catch((error) => {
							reject(error);
						})
					});
				},
				uploaderEvent: {
					onSuccess: (file, response) => {
						let res = response.json
						if (res.code === 1) {
							return {errorCode: 0, data: {
								src: res.data.url
							}}
						} else {
							return false
						}
					}
				}
			},
		})
	}
}
</script>
