<!--
@ 作者: 秦东
@ 时间: 2023-07-19 08:39:34
@ 备注: 抽屉
-->
<script lang='ts' setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
import { aceEdit } from '@/api/DesignForm/utils'

const props = withDefaults(
    defineProps<{
		modelValue: boolean
		// eslint-disable-next-line vue/require-default-prop
		title?: string
		direction?: 'rtl' | 'ltr'
		content: string
		id?: string
		// eslint-disable-next-line vue/require-default-prop
		codeType?: string
    }>(),
    {
		id: 'editJson',
		content: '',
		direction: 'ltr'
    }
)
 const emits = defineEmits<{
    (e: 'beforeClose'): void
    (e: 'confirm', content: string): void
    (e: 'update:modelValue', val: boolean): void
}>()
const editor = ref<any>({})
 const visible = ref(false)
watch(
    () => props.modelValue,
    (val: boolean) => {
		visible.value = val
		if (val) {
			initEditor()
		}
    }
)
const initEditor = () => {
    nextTick(() => {
      	editor.value = aceEdit(props.content, props.id, props.codeType)
    })
}
const dialogConfirm = () => {
    const editVal = editor.value.getValue()
    emits('confirm', editVal)
}
const drawerBeforeClose = () => {
    emits('update:modelValue', false)
    emits('beforeClose')
}
onMounted(() => {})
onUnmounted(() => {
    if (Object.keys(editor.value).length !== 0) {
		editor.value.destroy()
		editor.value.container.remove()
    }
})
</script>
<template>
	<el-drawer
		v-model="visible"
		size="60%"
		:title="title"
		:direction="direction as any"
		class="ace-dialog"
		:append-to-body="true"
		:before-close="drawerBeforeClose"
	>
		<template #header>
			<div v-html="title"></div>
		</template>
		<div v-if="visible" :id="id"></div>
		<div class="dialog-footer">
			<el-button type="primary" size="small" @click="dialogConfirm">
				确定
			</el-button>
		</div>
	</el-drawer>
</template>
<style  lang='scss' scoped>
#editJson, #editJsonCopy {
    width: 100%;
    height: calc(100vh - 90px);
}
</style>
