<template>
  <div>
    {{ options }}
    <umo-editor v-bind="options" ref="editorRef" />
  </div>
</template>

<script setup>
import { AlignmentType, Document, Footer, Packer, Paragraph, TextRun } from 'docx';
import { UmoEditor } from '@umoteam/editor';

const editorRef = ref();
const docData = {
  '甲方': '青岛xxx科技有限公司',
  '合同表格表头': ['序号', '产品名称', '规格描述', '数量', '单位', '单价', '小记']
};
const createContractTable = () => {
  const rows = 3;
  const cols = docData['合同表格表头'].length;
  const head = docData['合同表格表头'];
  return {
    type: 'table',
    attrs: { id: 'contractTable', style: 'width:100%;border-collapse:collapse;' },
    content: [
      ...Array.from({ length: rows }).map((_, k) => ({
        type: 'tableRow',
        content:
          k === 0
            ? head.map((i) => ({
                type: 'tableHeader',
                attrs: { style: 'border:1px solid #ccc;padding:4px;height:40px;' },
                content: [
                  {
                    type: 'paragraph',
                    content: [{ type: 'text', text: i }]
                  }
                ]
              }))
            : Array.from({ length: cols }).map((__, kk) => ({
                type: 'tableCell',
                attrs: { style: 'border:1px solid #ccc;padding:4px;height:40px;' },
                content:
                  kk === 0
                    ? [
                        {
                          type: 'paragraph',
                          content: [{ type: 'text', text: '' + k }]
                        }
                      ]
                    : [
                        {
                          type: 'paragraph',
                          content: [{ type: 'text', text: ' ' }]
                        }
                      ]
              }))
      })),
      {
        type: 'tableRow',
        content: [
          {
            type: 'tableCell',
            attrs: { colspan: 6 },
            content: [
              {
                type: 'paragraph',
                attrs: { textAlign: 'center' },
                content: [{ type: 'text', text: '合计' }]
              }
            ]
          },
          {
            type: 'tableCell',
            attrs: {},
            content: [
              {
                type: 'paragraph',
                content: [{ type: 'text', text: ' ' }]
              }
            ]
          }
        ]
      },
      {
        type: 'tableRow',
        content: [
          {
            type: 'tableCell',
            attrs: { colspan: 7 },
            content: [
              {
                type: 'paragraph',
                attrs: { textAlign: 'center' },
                content: [{ type: 'text', text: '合同总价：  ￥       大写：人民币         整' }]
              }
            ]
          }
        ]
      }
    ]
  };
};
const options = ref({
  document: {
    title: '',
    content: {
      type: 'doc',
      content: [
        {
          type: 'heading',
          attrs: { level: 1, textAlign: 'center' },
          content: [{ type: 'text', text: '合 同' }]
        },
        {
          type: 'paragraph',
          attrs: { textAlign: 'right' },
          content: [{ type: 'text', text: '合同编号：111' }]
        },
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              attrs: { textAlign: 'left' },
              text: `甲方：${docData['甲方']}\t\t乙方：青岛海威物联科技有限公司`
            }
          ]
        },
        {
          type: 'paragraph',
          content: [{ type: 'text', text: '1.产品名称、规格、供货范围和价款   币种：人民币        单位：元' }]
        },
        createContractTable()
      ]
    },
    placeholder: {
      en_US: 'Please enter the document content...',
      zh_CN: '请输入文档内容...'
    },
    enableSpellcheck: true,
    enableMarkdown: true,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    typographyRules: {},
    editorProps: {},
    parseOptions: {
      preserveWhitespace: 'full'
    },
    autoSave: {
      enabled: true,
      interval: 300000
    }
  },
  onSave: async (e) => {
    const editor = editorRef.value;
    const html = editor.getHTML();
    console.log(html);
    // const doc = new Document({
    //   sections: [{ children: parseHTML(editor.getHTML()) }]
    // });
    // await download(doc);
  },
  onChanged: async (e) => {
    const editor = editorRef.value;
    const json = editor.getJSON();
    console.log(json);
    console.log(json.content.find((v) => v.type === 'table' && v.attrs?.id === 'contractTable'));

    // json
    editor.setContent(json, { emitUpdate: false });

    // const doc = new Document({
    //   sections: [{ children: prseHTML(editor.getHTML()) }]
    // });
    // await download(doc);
  }
});

function parseHTML(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  const children = [];

  div.childNodes.forEach((node) => {
    if (node.nodeType === 3) {
      children.push(new Paragraph(node.textContent));
    } else if (node.nodeType === 1) {
      console.log(node);
      console.log(node.tagName);
      if (node.tagName === 'H1') {
        children.push(new Paragraph({ text: node.textContent, heading: 'Heading1' }));
      } else if (node.tagName === 'P') {
        const runs = [];
        node.childNodes.forEach((n) => {
          const props = {};
          if (n.tagName === 'B' || n.tagName === 'STRONG') props.bold = true;
          if (n.tagName === 'I' || n.tagName === 'EM') props.italics = true;
          runs.push(new TextRun({ text: n.textContent, ...props }));
        });
        children.push(new Paragraph({ children: runs }));
      }
    }
  });

  return children;
}

// 创建文档
const doc = new Document({
  sections: [
    {
      properties: {},
      children: [
        new Paragraph({
          text: 'Hello World',
          heading: 'Heading1'
        }),
        new Paragraph({
          text: 'This is a simple DOCX file created using DOCX.js.'
        })
      ]
    }
  ]
});

const download = async (doc) => {
  const blob = await Packer.toBlob(doc);
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'document.docx';

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
// download(doc)
</script>

<style scoped></style>
