<template>
	<a-modal v-model:visible="visible" width="30%" height="70%" title="回复" @ok="handleOk">
		<div style="height: 300px; overflow-y: auto">
			<template v-for="(item,index) in recordList" :key = index>
				<TallItemView  :data="item"   style="margin-top: 10px"></TallItemView>
			</template>

		</div>

		<a-form
			:model="formState"
			:rules="rules"
			ref="formRef"
			layout="horizontal"
			:label-col="{ span: 5 }"
			:wrapper-col="{ span: 18 }"
		>
			<a-form-item label="回复内容" name="info">
				<quill-editor
					ref="quillEditorRef"
					placeholder="请输入教室描述"
					v-model:content="formState.info"
					style="height: 200px"
					contentType="html"
					theme="snow"
				/>
			</a-form-item>
<!--			<a-form-item label="回复内容" name="info">-->
<!--				<a-textarea v-model:value="formState.info" placeholder="输入回复内容"-->
<!--							:auto-size="{ minRows: 2, maxRows: 8 }"/>-->
<!--			</a-form-item>-->

		</a-form>
	</a-modal>
</template>
<script setup>
import {reactive, ref} from 'vue'
import resourceAuditApi from '@/api/resourceAudit.js'
import TallItemView from './TallItemView.vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const recordList = ref([]) //专业
const formRef = ref(null) //专业
const quillEditorRef = ref() // 预览回显
const mode = ref('add') //专业
import {addItem, detail, editItem} from '@/api/answer'

const visible = ref(false)
const emit = defineEmits([ "handleAddItem" ])
const formState = reactive({
	pid : undefined,
	hourId : undefined,
	title: undefined,
	info: undefined,
})
const rules = {
	info: [{required: true, message: '请输入回复内容', trigger: 'blur'}]
}

watch(
	() => visible.value,
	(newVal, oldVal) => {
		if (newVal == false && formRef.value) {
			formRef.value.resetFields()
			formState.info = undefined
		}
	},
	{deep: true, immediate: true}
)
const open = () => {

	visible.value = true
	formState.info = undefined

	// 重置富文本编辑器

	nextTick(()=>{
		let quill = quillEditorRef.value.getQuill()
		console.log('看看',quill)
		quill.root.addEventListener('paste', handlePaste, false);

		// 重置富文本编辑器
		if (quillEditorRef.value) {
			quillEditorRef.value.setHTML('')
		}
	})
	mode.value = 'add'
}
const edit = (item) => {
	visible.value = true
	formState.info = undefined
	formState.info = undefined

	nextTick(()=>{
		let quill = quillEditorRef.value.getQuill()
		console.log('看看',quill)
		quill.root.addEventListener('paste', handlePaste, false);

		// 重置富文本编辑器
		if (quillEditorRef.value) {
			quillEditorRef.value.setHTML('')
		}

		mode.value = 'edit'
		console.log('编辑内容',item)
		detail({id : item.id}).then((res)=>{
			if(res.code == 200){
				console.log('详情呢',' res ',res,' item ',item)
				// toRaw(quillEditorRef.value).setHTML(formState.courseDesc)
				formState.pid = item.id
				formState.hourId = item.hourId
				recordList.value = res.data.recordList
			}
		})
	})







}

const handlePaste = (e) => {
	const clipboardData = e.clipboardData;
	const types = clipboardData.types;
	if (types.includes('Files')) {
// 禁止粘贴图片
		e.preventDefault();
	}
}
const handleOk = (e) => {
	formRef.value.validate().then(() => {
		let json = JSON.parse(JSON.stringify(formState))
		json.info = toRaw(quillEditorRef.value).getHTML()

		if (mode.value == 'add') {
			addItem(json).then((res) => {
					if(res.code == 200){
						emit("handleAddItem")
						visible.value = false
					}
				formRef.value.resetFields()
			})
		}
		if (mode.value == 'edit') {
			addItem(json).then((res) => {
				if(res.code == 200){
					emit("handleAddItem")
					visible.value = false
				}
				formRef.value.resetFields()
			})
		}
	})
	// console.logckPoint.value = false
}
onMounted(() => {

	// getOrgTreeSelector()

})

defineExpose({open,edit})
</script>
