<template>
  <div class="koi-flex">
    <KoiCard>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form ref="formRef" :model="form" label-width="80px" status-icon>
            <el-form-item label="关键字" prop="roleName">
              <el-input v-model="form.zsk_name" size="large" placeholder="请输入类型名称" clearable/>
            </el-form-item>
            <el-form-item label="解释" prop="roleName">
              <el-card shadow="hover">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"/>
                <Editor style="height: 300px; overflow-y: hidden;" v-model="form.zsk_explain" :defaultConfig="editorConfig"
                        @onCreated="handleCreated"/>
              </el-card>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" @click="onSubmit" size="large">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

    </KoiCard>
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {
  koiMsgSuccess,
  koiNoticeSuccess,
  koiNoticeError,
  koiMsgError,
  koiMsgWarning,
  koiMsgBox,
  koiMsgInfo
} from "@/utils/koi.ts";
// @ts-ignore
import {knowledgeAdd} from "@/api/system/post/index.ts";
import {onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick} from 'vue'
import {useRoute, useRouter} from "vue-router";
import useTabsStore from "@/stores/modules/tabs.ts";
const route = useRoute();
const router = useRouter();
const tabsStore = useTabsStore();
const form = reactive({
  zsk_explain: '',
  zsk_name: '',
});
const onSubmit = async () => {
  if (form.zsk_name == '') {
    koiNoticeError("请输入关键字！");
    return;
  }
  if (form.zsk_explain == '') {
    koiNoticeError("请输入关键字解释！");
    return;
  }
  try {
    await knowledgeAdd(form);
    koiNoticeSuccess("添加成功！");
    tabsStore.removeTab(route.fullPath);
    router.push('/knowledge/list');
  } catch (error) {
    console.log(error);
    koiNoticeError("添加失败，请刷新重试！");
  }
}

const toolbarConfig = {
  showLinkImg: false,
  uploadImgShowBase64: true,
  excludeKeys: [
    'insertVideo', // 删除视频
    'uploadVideo',
    'group-video',
    'insertImage',// 删除网络图片上传
    'insertLink',// 删除链接
    'insertTable',// 删除表格
    'codeBlock',// 删除代码块
  ]
}
const editorConfig = {
  placeholder: '',
  readOnly: false, // 是否只允许阅读，不可编辑
  autoFocus: true,
  MENU_CONF: {
    uploadImage: {
      maxFileSize: 1 * 1024 * 1024,
      server: import.meta.env.VITE_WEB_BASE_API + '/api/common/upload',
      fieldName: 'file',
      meta: {
        association_id: 0,
      },
      customInsert(res, insertFn) {  // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        console.log(res);
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(res.data.fullurl, '', '')
      }, onError:(file, err, res)=>{
        if(err.message.indexOf('exceeds maximum allowed size') !== -1){
          koiNoticeError('图片限制为1M，请调整好再上传！');
        }
      },
    }
  }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>

<style lang="scss" scoped></style>
