<template>
  <div class="w-[100%] h-[100%] relative">
    <div class="mb-6">
      <n-input v-model:value="info.title" type="text" placeholder="请输入标题..." size="medium" clearable>
        <template #prefix>
          <n-button type="primary" size="mini" text>标题</n-button>
        </template>
      </n-input>
    </div>
    <div class=" mb-6">
      <n-input v-model:value="info.pro" type="text" placeholder="请输入简介..." size="medium" clearable>
        <template #prefix>
          <n-button type="primary" size="mini" text>简介</n-button>
        </template>
      </n-input>
    </div>
    <div class="" style="border:1px solid #ccc;border-radius: 4px;overflow: hidden;">
      <Toolbar style="border-bottom: 1px solid #ccc;font-size: 12px;" :editor="editorRef" :defaultConfig="toolbarConfig"
        :mode="mode" />
      <Editor style="min-height: 300px; overflow-y: hidden;" v-model="info.cont" :defaultConfig="editorConfig" :mode="mode"
        @onCreated="handleCreated" />
    </div>
    <div class="btns mt-8 w-[100%]">
      <n-button type="primary" @click="handleSubmit">提交</n-button>
    </div>
  </div>
</template>

<script setup>
//mark import
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted, watchEffect } from "vue";
import cookie from "vue-cookies";
//mark data
const props = defineProps({
  id: {
    type: [String, Number],
    default: -1
  }
})
const info = reactive({
  cont: "",
  title: "",
  pro: ""
})
const mode = 'simple' // 或 'simple','default'
const toolbarConfig = {}
const editorRef = shallowRef()
const editorConfig = ref({ MENU_CONF: {} })
const emit = defineEmits(['close'])


//mark method




const handleCreated = (editor) => {
  editorRef.value = editor

}
//mark 周期、内置函数等
editorConfig.value.placeholder = '请输入内容...'
toolbarConfig.excludeKeys = ['fullScreen',  'emoji',  'line-height', 'headings', 'list-ul', 'list-ol',  'line', 'hr', 'link', '|', 'image', 'code', 'code-theme',  'insertVideo']
editorConfig.value.MENU_CONF['uploadImage'] = {
  server: "https://www.hxyouzi.com/api/art/upimg",
  fieldName: 'file',
  headers: {
    Authorization: cookie.get("token"),
  },
  maxNumberOfFiles: 1,
  // 单个文件上传成功之后
  customInsert(res, insertFn) {
    console.log(res);
    if (res.code == 1) {
      const url = res.completePath
      const alt = ""
      const href = res.completePath
      insertFn(url, alt, href)
    }

  },

}
watchEffect(async () => {
  console.log(props.id);
  if (props.id != -1) {
    const res = await $http.art.queryArtInfo(props.id)
    console.log(res);
    info.cont = res.data[0].cont
    info.title = res.data[0].title
    info.pro = res.data[0].pro
  } else {
    info.cont = ''
    info.title = ''
    info.pro = ''
  }
})


async function handleSubmit() {
  if (info.title == '') {
    $msg.error("标题不能为空");
    return
  }
  if (info.pro == '') {
    $msg.error("简介不能为空");
    return
  }
  console.log(info.cont);
  if (info.cont == '' || info.cont == '<p><br></p>') {
    $msg.error("内容不能为空");
    return
  }
  if (parseInt(props.id) < 0) {
    const res = await $http.art.addArt(info)
    if (res.code == 1) {
      $msg.success(res.msg)
      emit('close')
    }
    else $msg.error(res.msg)
  } else {
    const res = await $http.art.updArt({
      id: props.id,
      ...info
    })
    if (res.code == 1) {
      $msg.success(res.msg)
      emit('close')
    }
    else $msg.error(res.msg)
  }
}
onMounted(() => {
  // console.log(editorRef.value);

})

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

</script>

<style scoped lang="less">
:deep(.w-e-bar-item button) {
  padding: 0 3px;
  font-size: 12px;
}

:deep(.n-button) {
  width: 100%;
}
</style>