<template>
    <el-drawer v-model="editorVisible" :show-close="false" class="customer-drawer" size="960px">
        <template #header="{ close, titleId, titleClass }">
            <div class="card-h2">{{ title }}</div>
        </template>
        <div class="full-height column">
            <el-divider class="q-ma-none" />
            <div class="draw-close" @click="closeHandle">
                <IconCloseSmall></IconCloseSmall>
            </div>
            <div class="col full-width row">
                <div class="col">
                    <Editor />
                </div>
                <el-divider class="q-ma-none" style="height: 100%;" direction="vertical" />
                <div class="col q-pa-lg"></div>
            </div>
        </div>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Editor from './Editor.vue'

const props = withDefaults(defineProps<{
  value: string
  title: string,
  visible: boolean
}>(), {
    title: ''
})


const emit = defineEmits<{
  (event: 'update:value', payload: string): void,
  (event: 'update:visible', payload: boolean):void
}>()
const editorVisible = ref(props.visible)
const content = ref(props.value)

const closeHandle = ()=>{
    emit('update:visible',false)
}
const getContent = (val:any) => {
  console.log(val)
}

watch(()=>props.visible,()=>{
    editorVisible.value = props.visible
})
watch(()=>props.value,()=>{
    content.value = props.value
})
</script>