<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import {useInitFroalaEditor} from '@/hooks/useFroalaEditor'

const props = defineProps({
  defaultVal: ''
})
const emit = defineEmits(['close','confirm'])

const {lastFocusPosition,initFroalaEditor,imgUploadFlag,frolaEditorContentChange}=useInitFroalaEditor()

let reportContentEditorIns=null//报告内容编辑器实例


onMounted(() => {
  reportContentEditorIns = initFroalaEditor('#editor',{
    height:400, 
    toolbarButtons: [
      "textColor",
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "subscript",
      "superscript",
      "fontFamily",
      "fontSize",
      "color",
      "inlineClass",
      "inlineStyle",
      "paragraphStyle",
      "lineHeight",
      "paragraphFormat",
      "align",
      "formatOL",
      "formatUL",
      "outdent",
      "indent",
      "quote",
      "specialCharacters",
      "insertHR",
      "selectAll",
      "clearFormatting",
      /* "html", */
      "undo",
      "redo",
    ]
  })

  setTimeout(() => {
    props.defaultVal&&reportContentEditorIns.html.set(props.defaultVal);
  })
})

watch(() => props.defaultVal,
  (nval) => {
    reportContentEditorIns.html.set(nval)
  }
)


function handleCancle() {
  emit('close')
}

function handleConfirm() {
  emit('confirm',$('.fr-element').html())
}
</script>
<template>
<div>
  <div class="top-box">
      <span style="color:#666666" @click="handleCancle">取消</span>
      <span style="font-size:18px;font-weight:bold">编辑文字</span>
      <span style="color:#0052D9" @click="handleConfirm">确定</span>
  </div>
  <div class="editor-box" id="editor"></div>
</div>
</template>
<style scoped lang="scss">
.top-box{
    padding:32px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #DCDFE6;
    .close{
        color:#666666;
    }
    .title{
        font-size: 36px;
    }
    .add-btn{
        color:$theme-color;
    }
}
.editor-box {
  width: 100%;
  height: 100%;
  padding: 10px;
}
@media screen and (min-width:$media-width){
  .top-box{
      padding:16px;
      .title{
          font-size: 18px;
      }
  }
}
</style>