<template>
	<div>
		<QuillEditor
			ref="myQuillEditor"
			theme="snow"
			v-model:content="content"
			:options="data.editorOption"
			contentType="html"
			@update:content="setValue()"
		/>
		<input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
	</div>
</template>

<script setup name="DELCOPY">
	import { QuillEditor } from '@vueup/vue-quill'
	import '@vueup/vue-quill/dist/vue-quill.snow.css'
	import { reactive, onMounted, ref, toRaw, watch } from 'vue'
	import global from '@/api/home/global.js'
	const props = defineProps(['value'])
	const emit = defineEmits(['updateValue'])
	const content = ref('')
	const myQuillEditor = ref()
	watch(
		() => props.value,
		(val) => {
			toRaw(myQuillEditor.value).setHTML(val)
		},
		{ deep: true }
	)
	const fileBtn = ref()
	const data = reactive({
		content: '',
		editorOption: {
			modules: {
				toolbar: [
					['bold', 'italic', 'underline', 'strike'],
					[{ size: ['small', false, 'large', 'huge'] }],
					[{ font: [] }],
					[{ align: [] }],
					[{ list: 'ordered' }, { list: 'bullet' }],
					[{ indent: '-1' }, { indent: '+1' }],
					[{ header: 1 }, { header: 2 }],
					['image'],
					[{ direction: 'rtl' }],
					[{ color: [] }, { background: [] }]
				]
			},
			placeholder: '请输入内容...'
		}
	})
	const imgHandler = (state) => {
		console.log(456434434)
		if (state) {
			fileBtn.value.click()
		}
	}
	const setValue = () => {
		const text = toRaw(myQuillEditor.value).getHTML()
		emit('updateValue', text)
	}
	const handleUpload = (e) => {
		console.log(e)
		const files = Array.prototype.slice.call(e.target.files)
		if (!files) {
			return
		}
		const formdata = new FormData()
		formdata.append('file', files[0])
		global.uploadFile(formdata).then((res) => {
			if (res) {
				const quill = toRaw(myQuillEditor.value).getQuill()
				const length = quill.getSelection().index
				quill.insertEmbed(length, 'image', res)
				quill.setSelection(length + 1)
				fileBtn.value.value = ''
			}
		})
	}
	// 初始化编辑器
	onMounted(() => {
		const quill = toRaw(myQuillEditor.value).getQuill()
		if (myQuillEditor.value) {
			quill.getModule('toolbar').addHandler('image', imgHandler)
		}
	})
</script>
<style scoped lang="less">
	// 调整样式
	:deep(.ql-editor) {
		min-height: 180px;
	}
	:deep(.ql-formats) {
		height: 21px;
		line-height: 21px;
	}
</style>
