<template>
  <div id="app">
    <a-button class="ml-2" title="撤销" :icon="h(RedoOutlined)" @click="handleUndo"> </a-button>
    <a-button title="复原" :icon="h(UndoOutlined)"  @click="handleRedo"> </a-button>
    <a-button class="ml-2" title=" 重做" :icon="h(StopOutlined)"> </a-button>
    <a-button title="放大" :icon="h(PlusCircleOutlined)"> </a-button>
    <a-button title="缩小" :icon="h(MinusCircleOutlined)"> </a-button>
    <a-button title="下载" :icon="h(SearchOutlined)" @click="handleDownload"> </a-button>
    
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, onMounted, reactive } from 'vue';
  import { RedoOutlined, UndoOutlined, StopOutlined, PlusCircleOutlined, MinusCircleOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import { Button } from 'ant-design-vue';

  import BpmnModeler from 'bpmn-js/lib/Modeler';
  import camundaExtension from './js/camunda.json'; //定义各个元素拥有的属性配置
  import customTranslate from "./js/customTranslate.js";//汉化
  import EventEmitter from './utils/EventEmitter'
  const state = reactive({
    containerEl: null,
    bpmnModeler: null,
    fileList: [],
  });
  EventEmitter.instance.on('modeler-init', (modeler) => {
        modeler.on('element.click', (element) => {
          console.log(element)
          currentElement.value = element
        })
      })
  function create() {
    state.bpmnModeler.createDiagram(() => {
      state.bpmnModeler.get('canvas').zoom('fit-viewport');
    });
  }
  function handleRemove(file) {
    for (let i = 0; i < state.fileList.length; i++) {
      if (file.name === state.fileList[i].name) {
        state.fileList.splice(i, 1);
      }
    }
  }
  function beforeRemove(file) {
    return this.$confirm(`确定移除 ${file.name}？`);
  }
  // 后退
  function handleUndo() {
    state.bpmnModeler.get('commandStack').undo();
  }
  // 前进
  function handleRedo() {
    state.bpmnModeler.get('commandStack').redo();
  }
  function handleDownload() {
    console.log(state.bpmnModeler)

    state.bpmnModeler.saveXML({ format: true }, (err, data) => {
      console.log(data)
      // const dataTrack = 'bpmn';
      // const a = document.createElement('a');
      // const name = `diagram.${dataTrack}`;
      // a.setAttribute(
      //     'href',
      //     `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
      // );
      // a.setAttribute('target', '_blank');
      // a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
      // a.setAttribute('download', name);
      // document.body.appendChild(a);
      // a.click();
      // document.body.removeChild(a);
    });
  }
  function handleOnchangeFile(file) {
    const reader = new FileReader();
    let data = '';
    reader.readAsText(file.raw);
    reader.onload = (event) => {
      data = event.target.result;
      state.bpmnModeler.importXML(data, (err) => {
        if (err) {
          this.$message.info('导入失败');
        } else {
          this.$message.success('导入成功');
        }
      });
    };
  }

  onMounted(() => {
    let customTranslateModule = {
      translate: ["value", customTranslate]
    };
    state.containerEl = document.querySelector('#container');
    state.bpmnModeler = new BpmnModeler({
      container: state.containerEl,
      moddleExtensions: { camunda: camundaExtension },
      additionalModules: [
        // 汉化
        customTranslateModule,
      ],
    });
    create();
  })
</script>

<style>
  #app {
    width: 100%;
    height: 100%;
  }

  body,
  html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }

  #container {
    height: calc(100% - 50px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px), linear-gradient(to bottom, #dfdfdf 1px, transparent 1px), linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
    background-position: left -1px top -1px, left -1px top -1px, left -1px top -1px, left -1px top -1px;
  }
</style>