<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { debounce } from 'lodash-es'
import { queryNote, saveNote } from '@/api/home/main'

const quillEditor = ref()

const cardStyle = {
  'width': '500px',
  '--n-padding-bottom': '17px',
  '--n-padding-left': '24px',
}

const note = ref('<p>sss</p>')

const options = reactive({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
    ],
  },
  theme: 'snow',
  placeholder: '',
})

function initHandler() {
  queryNote().then((res) => {
    if (res.data)
      note.value = res.data.notecontent
  }).catch(e => console.error('Quill file -> Error in initHandler function', e))
}

const saveHandler = debounce(() => {
  const content = quillEditor.value.getHTML()
  saveNote(content)
}, 800)
</script>

<template>
  <div>
    <n-card :style="cardStyle" :bordered="false" class="mt-4 proCard">
      <div class="title">
        备注信息
      </div>
      <QuillEditor
        ref="quillEditor"
        v-model:content="note"
        :options="options"
        style="height: 350px"
        class="quillEditor"
        content-type="html"
        @ready="initHandler"
        @update:content="saveHandler"
      />
    </n-card>
  </div>
</template>

<style lang="less" scoped>
  .title{
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    color: #333333;
    margin-bottom: 24px;
  }

  .ql-toolbar.ql-snow {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-top: -10px;
    background: #f8f8f8;
    border: 1px solid #d8d8d8;
  }

  .ql-container.ql-snow {
    border: 1px solid #d8d8d8;
  }
</style>
