<template>
  <view class="d-flex flex-column h-100vh">
    <sp-editor
      :toolbar-config="{
        excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
        iconSize: '18px'
      }"
      @init="initEditor"
      @input="inputOver"
      @upinImage="upinImage"
      @overMax="overMax"
    ></sp-editor>
    
    <view class="d-flex flex-row align-center gap-s p-3">
      <u-button @click="cancel">取消</u-button>
      <u-button type="primary" @click="save">保存</u-button>
    </view>
    <u-safe-bottom />
  </view>
</template>

<script setup lang="ts">
import { showError } from '@/common/composeabe/ErrorDisplay';
import { confirm } from '@/common/utils/DialogAction';
import { back, backAndCallOnPageBack } from '@/common/utils/PageAction';
import spEditor from '@/uni_modules/sp-editor/components/sp-editor/sp-editor.vue';

function cancel() {
  confirm({
    title: '提示',
    content: '是否放弃编辑？',
  }).then((res) => {
    if (res)
      back();
  })
}
function save() {
  console.log('save', currentContent);
  
  uni.setStorage({
    key: 'editorContent',
    data: currentContent,
    success: () => backAndCallOnPageBack('editor', {}),
    fail: (e) => showError(e),
  })
}

let currentContent = '';

/**
* 获取输入内容
*/
function inputOver(e: { html: string; text: string; }) {
  // 可以在此处获取到编辑器已编辑的内容
  currentContent = e.html;
}
/**
 * 超出最大内容限制
 * @param {Object} e {html,text} 内容的html文本，和text文本
 */
function overMax(e: { html: string; text: string; }) {
  // 若设置了最大字数限制，可在此处触发超出限制的回调
  console.log('==== overMax :', e)
}
function initEditor(editor: any) {
  uni.getStorage({
    key: 'editorContent',
    success: (success) => {
      editor.setContents({
        html: success.data
      })
    },
  })
}
/**
 * 直接运行示例工程插入图片无法正常显示的看这里
 * 因为插件默认采用云端存储图片的方式
 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
 * @param {Object} tempFiles
 * @param {Object} editorCtx
 */
function upinImage(tempFiles: any, editorCtx: any) {
  /**
   * 本地临时插入图片预览
   * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
   * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
   * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
   */
  // #ifdef MP-WEIXIN
  // 注意微信小程序的图片路径是在tempFilePath字段中
  editorCtx.insertImage({
    src: tempFiles[0].tempFilePath,
    width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {}
  })
  // #endif

  // #ifndef MP-WEIXIN
  editorCtx.insertImage({
    src: tempFiles[0].path,
    width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {}
  })
  // #endif
}
</script>