<template>
	<div class="pi-editor" :style="{width: width}">
		<Toolbar style="border: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
		<Editor style="border: 1px solid #ccc; border-top: 0;" :style="{height: height}" v-model="html"
				:defaultConfig="editorConfig" @onCreated="handleCreated"/>
		<pi-asset-picker ref="pickerRef1" v-if="pickerVisible1" @success="saveSuccess1" @closed="pickerVisible1=false"
						 type="image" :max="10" :multiple="true"></pi-asset-picker>
		<pi-asset-picker ref="pickerRef2" v-if="pickerVisible2" @success="saveSuccess2" @closed="pickerVisible2=false"
						 type="video" :max="1"></pi-asset-picker>
	</div>
</template>

<script setup>
import piAssetPicker from '@/components/piAsset/picker'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import './ext/extImage'
import './ext/extVideo'
import config from "@/config"
import {ref, onUnmounted, watch, nextTick, shallowRef, computed} from "vue"

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
	modelValue: {type: String, default: ''},
	width: {type: String, default: '100%'},
	height: {type: String, default: '360px'},
	placeholder: {type: String, default: '请输入内容...'},
	toolbar: {
		type: Array,
		default: ['undo', 'redo', '|', 'color', 'bgColor', 'bold', 'italic', 'underline', 'through', 'insertLink', '|',
			'headerSelect', 'fontSize', 'fontFamily', '|', 'justifyLeft', 'justifyCenter', 'justifyRight',
			'justifyJustify', '|', 'indent', 'delIndent', '|', 'bulletedList', 'numberedList', '|', 'code', 'codeBlock',
			'|', 'blockquote', 'divider', 'clearStyle', '|', 'insertTable', 'extImage', 'extVideo']
	},
})

const editorRef = shallowRef()
const pickerRef1 = ref(null)
const pickerRef2 = ref(null)
const pickerVisible1 = ref(false)
const pickerVisible2 = ref(false)

const toolbarConfig = {
	toolbarKeys: props.toolbar
}

const editorConfig = {
	placeholder: props.placeholder,
	readOnly: false,
	autoFocus: true,
	scroll: true,
	MENU_CONF: {
		fontSize: {
			fontSizeList: ['12px', '14px', '16px', '18px', '22px', '24px', '36px', '72px']
		},
		extImage: {
			callback: showPicker1
		},
		extVideo: {
			callback: showPicker2
		}
	}
}

const html = computed({
	get: () => props.modelValue,
	set: (val) => emit("update:modelValue", val)
})

onUnmounted(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})

const handleCreated = (editor) => {
	editorRef.value = editor
	if (html.value) {
		editor.setHtml(html.value)
	}
}

function showPicker1() {
	pickerVisible1.value = true
	nextTick(() => {
		pickerRef1.value.open()
	})
}

function showPicker2() {
	pickerVisible2.value = true
	nextTick(() => {
		pickerRef2.value.open()
	})
}

function saveSuccess1(val) {
	val.forEach(src => {
		editorRef.value.insertNode({
			type: 'image',
			src: config.API_URL + '/' + src,
			alt: '图片描述',
			style: {},
			children: [{text: ''}]
		})
	})
}

function saveSuccess2(val) {
	editorRef.value.insertNode({
		type: 'video',
		src: config.API_URL + '/' + val,
		style: {
			width: '100%',
			height: 'auto'
		},
		children: [{text: ''}]
	})
}
</script>

<style lang="scss" scoped>

</style>
