<script setup lang="ts">
import { NModal } from 'naive-ui'
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'hide'): void
}>()

const visible = ref(false)

function show() {
  visible.value = true
}
function hide() {
  visible.value = false
  emit('hide')
}

defineExpose({
  show,
  hide,
})
</script>

<template>
  <div>
    <NModal v-model:show="visible" preset="card" title="第三方在线编辑器" style="width: 90vw" @after-leave="hide">
      <div style="height: 80vh; overflow: hidden">
        <iframe src="https://www.processon.com/latex" style="width: 100%; height: calc(100% + 50px); margin-top: -50px; border: none" />
      </div>
    </NModal>
  </div>
</template>
