<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      :exps="exps"
      :is-view="false"
      @save="save"

    />
<!--    @showXML="showXML"-->
  </div>
</template>
<script>
import 'highlight.js/styles/atelier-savanna-dark.css'
import bpmnModeler from '@/components/Process/index'
import vkBeautify from 'vkbeautify'
import hljs from 'highlight.js'
import { saveFlow ,readXml,getUserList} from '@/api/flow/definition'

export default {
  name: 'ProcessDesign',
  components: {
    bpmnModeler,
    vkBeautify
  },
  // 自定义指令
  directives: {
    deep: true,
    highlight: {
      deep: true,
      bind: function bind(el, binding) {
        const targets = el.querySelectorAll('code')
        let target
        let i
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i]
          if (typeof binding.value === 'string') {
            target.textContent = binding.value
          }
          hljs.highlightBlock(target)
        }
      },
      componentUpdated: function componentUpdated(el, binding) {
        const targets = el.querySelectorAll('code')
        let target
        let i
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i]
          if (typeof binding.value === 'string') {
            target.textContent = binding.value
            hljs.highlightBlock(target)
          }
        }
      }
    }
  },
  data() {
    return {
      xml: undefined, // 后端查询到的xml
      modeler: '',
      xmlOpen: false,
      xmlTitle: '',
      xmlData: '',
      users: [],
      groups: [],
      categorys: [],
      exps: [],
      paramsData: {},

    }
  },
  created() {
    const params = this.$route.params && this.$route.params.data
    this.paramsData = JSON.parse(params)
    console.log(this.paramsData);
    //  查询流程xml
    if (this.paramsData.deployId != 0) {
      this.getUserList()
      this.getXmlData(this.paramsData.deployId);
    }
  },
  methods: {
    /** 保存xml */
    save(data) {
      const params = {
        name: data.process.name,
        category: data.process.category,
        xml: data.xml,
        ...this.paramsData
      }
      console.log(params);
      saveFlow(params).then(res => {
        this.$modal.msgSuccess(res.msg)
        // 关闭当前标签页并返回上个页面
        this.$tab.closePage()
      })
    },
    getXmlData(deployId) {
      // 发送请求，获取xml
      readXml(deployId).then(res =>{
        this.xml = res.data;
        this.modeler = res.data
      })
    },
    getUserList(){
      getUserList().then(res => {
        this.users = res.data
      })
    }
  }
}
</script>
