<template>
  <div>
    <div style="width: 250px; height: 100%; display: inline-block; vertical-align: top; border-right: 1px solid #999">
      <div class="title">预定义字段(点击插入光标位置)</div>
      <div class="fieldList">
        <div class="fieldItem" v-for="i in fieldList">
          <div class="btn" @click="insertText(i)">
            {{ i.varLabel }}
          </div>
        </div>
      </div>
    </div>
    <div style="width: calc(100% - 251px); display: inline-block; vertical-align: top; height: calc(100vh - 50px - 34px)">
      <umo-editor v-bind="options" ref="editorRef" />
    </div>
  </div>
</template>

<script setup>
import { UmoEditor } from '@umoteam/editor';
import { getPrintTemplate, updatePrintTemplate } from '@/api/oa/base/printTemplate';
import { useRoute } from 'vue-router';
import { getBaseTemplateVariableList } from '@/api/oa/base/templateVariable/index.js';

const route = useRoute();

const template = ref({});

const editorRef = ref();

const fieldList = ref([]);

const options = ref({
  document: {
    title: '',
    content: {
      type: 'doc',
      content: []
    },
    placeholder: {
      en_US: 'Please enter the document content...',
      zh_CN: '请输入文档内容...'
    },
    enableSpellcheck: true,
    enableMarkdown: false,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    typographyRules: {
      emDash: false
    },
    editorProps: {},
    parseOptions: {
      preserveWhitespace: 'full'
    },
    autoSave: {
      enabled: true,
      interval: 1000 * 60 * 5
    }
  },
  dicts: {
    symbols: [
      {
        label: {
          en_US: 'Plain Text',
          zh_CN: '普通文本'
        },
        items: '‹›«»‘’“”‚„¡¿‥…‡‰‱‼⁈⁉⁇©®™§¶⁋'
      },
      {
        label: {
          en_US: 'Currency Symbols',
          zh_CN: '货币符号'
        },
        items: '$€¥£¢₠₡₢₣₤¤₿₥₦₧₨₩₪₫₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽'
      },
      {
        label: {
          en_US: 'Mathematical Symbols',
          zh_CN: '数学符号'
        },
        items: '<>≤≥–—¯‾°−±÷⁄×ƒ∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠¼½¾'
      },
      {
        label: { en_US: 'Arrows', zh_CN: '箭头' },
        items: '←→↑↓⇐⇒⇑⇓⇠⇢⇡⇣⇤⇥⤒⤓↨'
      },
      {
        label: {
          en_US: 'Latin Script',
          zh_CN: '拉丁语'
        },
        items: 'ĀāĂăĄąĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıĲĳĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňŉŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ'
      },
      {
        label: {
          en_US: 'Common Characters',
          zh_CN: '特殊字符'
        },
        items: '☐☑'
      }
    ]
  },
  page: {
    showBreakMarks: false,
    defaultMargin: { left: 2.1, right: 2.1, top: 2.2, bottom: 2.2 }
  },
  onSave: async (e) => {
    template.value.templateData = JSON.stringify(e.json);
    template.value.pageConfig = JSON.stringify({
      pageMargin: editorRef.value.getPage()?.margin || { left: 3.18, right: 3.18, top: 2.54, bottom: 2.54 }
    });
    const res = await updatePrintTemplate(template.value);
    ElMessage.success(res.msg);
    if (res.code === 200) {
      return true;
    }
  }
});

// 填充占位符
const insertText = (e) => {
  const editor = editorRef.value;
  editor.insertContent(
    {
      type: 'text',
      text: e.varName
    },
    {
      updateSelection: false
    }
  );
};
onMounted(async () => {
  getPrintTemplate(route.query.templateId).then((e) => {
    template.value = e.data;
    const editor = editorRef.value;
    editor.setContent(JSON.parse(e.data.templateData || '{}'));
    let margin = JSON.parse(e.data.pageConfig || '{}').pageMargin || {
      left: 3.18,
      right: 3.18,
      top: 2.54,
      bottom: 2.54
    };
    delete margin.layout;
    options.value.page.defaultMargin =margin

  });
  const select = {
    templateType: route.query.templateType
  };
  getBaseTemplateVariableList(select).then((e) => {
    fieldList.value = e.data;
  });
});
</script>

<style scoped>
.title {
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.fieldList {
  width: 100%;
  height: calc(100vh - 50px - 34px - 40px);
  overflow-y: auto;

  .fieldItem {
    width: 80%;
    font-size: 12px;
    padding-left: 15px;
    color: #333;
    cursor: pointer;

    .btn {
      padding: 10px;

      &:hover {
        background-color: #eee;
        border-radius: 10px;
      }
    }
  }
}
</style>
<style>
.umo-footer {
  position: sticky;
  bottom: 0px;
}
</style>
