<template>
  <div class="process-design" :style="'display: flex; height:' + data.height">
    <bpmn-process-designer
      v-model="data.xmlString"
      v-bind="data.controlForm"
      keyboard
      ref="processDesigner"
      :events="[
        'element.click',
        'connection.added',
        'connection.removed',
        'shape.removed',
        'selection.changed',
      ]"
      @connection-added="connectionAdded"
      @connection-removed="connectionRemoved"
      @shape-removed="shapeRemoved"
      @element-click="elementClick"
      @init-finished="initModeler"
      @save="onSaveProcess"
      :schemeCode="data.schemeCode"
      :pageFlow="data.pageFlow"
      :pageType="data.pageType"
    />
    <!-- 属性面板 -->
    <bmpn-process-penal
      :bpmn-modeler="data.modeler"
      :prefix="data.controlForm.prefix"
      class="process-panel"
      ref="processPanel"
      :schemeCode="data.schemeCode"
      :pageView="data.pageView"
      :pageType="data.pageType"
    />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, defineProps, defineEmits, ref, watch } from 'vue';
  import './package/theme/index.scss';
  // 流程面板和属性面板
  import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
  import 'highlight.js/styles/atom-one-dark-reasonable.css';
  import { flowStore } from '@/store/modules/flow';

  const flowWfDataStore = flowStore();
  const emit = defineEmits(['save']);
  // Vue.use(vuePlugin);
  const props = defineProps({
    // 编辑模板，code供详情接口使用
    schemeCode: {
      type: String,
    },
    // 预览历史版本wfData
    pageView: String,
    // 分辨是不是预览历史版本detial
    pageType: String,
    // 流程图
    pageFlow: String,
    bpmnXml: String,
  });
  const data = reactive({
    height: document.documentElement.clientHeight - 144.5 + 'px;',
    xmlString: props.bpmnXml,
    modeler: null,
    controlForm: {
      prefix: 'flowable',
    },
    element: null,
    schemeCode: props.schemeCode,
    pageView: props.pageView,
    pageType: props.pageType,
    pageFlow: props.pageFlow,
  });
  watch(
    () => props.pageView,
    (newVal) => {
      data.pageView = newVal;
    },
  );
  watch(
    () => props.pageFlow,
    (newVal) => {
      data.pageFlow = newVal;
    },
  );
  if (props.pageType == 'detail') {
    data.height = document.documentElement.clientHeight - 294.5 + 'px;';
  }
  const processPanel = ref<any>();
  const processDesigner = ref<any>();
  async function getFlow() {
    let panel = await processPanel.value.getPanel();
    let flow = await processDesigner.value.getFlow();
    panel.scheme.flowContent = flow;
    return panel;
    // return {
    //   panel:panel,
    //   flowContent:flow
    // };
  }
  async function validateFlow() {
    let res = await processPanel.value.validatePanel();
    return res;
  }
  defineExpose({
    getFlow,
    validateFlow,
  });
  function connectionAdded(node) {
    console.log('connectionAdded');
    data.element = node;
    if (node.type == 'bpmn:SequenceFlow') {
      const element = {
        id: node.id,
        type: node.type,
        lineConditions: '',
        from: node.source.id,
        isInit: true,
        to: node.target.id,
      };
      flowWfDataStore.setWfDataNode(element);
    }
  }
  function connectionRemoved(node) {
    flowWfDataStore.deleteWfData(node);
  }
  function shapeRemoved(node) {
    flowWfDataStore.deleteWfData(node);
  }
  function elementClick(element) {
    data.element = element;
  }
  function initModeler(modeler) {
    setTimeout(() => {
      data.modeler = modeler;
    }, 10);
  }
  function onSaveProcess(saveData) {
    emit('save', saveData);
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: auto !important;
    margin: 0;
    box-sizing: border-box;
  }

  body,
  body * {
    /* 滚动条 */
    &::-webkit-scrollbar-track-piece {
      background-color: #fff;
      /*滚动条的背景颜色*/
      -webkit-border-radius: 0;
      /*滚动条的圆角宽度*/
    }

    &::-webkit-scrollbar {
      width: 10px;
      /*滚动条的宽度*/
      height: 8px;
      /*滚动条的高度*/
    }

    &::-webkit-scrollbar-thumb:vertical {
      /*垂直滚动条的样式*/
      height: 50px;
      background-color: rgba(153, 153, 153, 0.5);
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.3);
      -webkit-border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.5);
      -webkit-border-radius: 4px;
    }
  }

  .process-panel {
    height: 100%;
  }
</style>
