<template>
  <div style="width:100%;height:100%;">
    <my-process-designer
      :value="value"
      v-bind="design"
      keyboard
      ref="processDesigner"
      @init-finished="initModeler"
      @elementEvents="elementEvents"
      @save="save"
      @change="xmlChange"
    />
    <MyPropertiesPanel
      :bpmn-modeler="modeler"
      v-bind="penal"
      class="process-panel"
      ref="myPropertiesPanel"
    >
      <template #collection="{collection}">
        <slot v-bind:collection="collection" name="collection"></slot>
      </template>
      <template #assignee="{assignee}">
        <slot v-bind:assignee="assignee" name="assignee"></slot>
      </template>
      <template #candidateUsers="{candidateUsers}">
        <slot v-bind:candidateUsers="candidateUsers" name="candidateUsers"></slot>
      </template>
      <template #candidateGroups="{candidateGroups}">
        <slot v-bind:candidateGroups="candidateGroups" name="candidateGroups"></slot>
      </template>
    </MyPropertiesPanel>
  </div>
</template>

<script>
import MyProcessDesigner from './process-designer'
import MyPropertiesPanel from './refactor'
import './theme/index.less'
export default {
  name: 'BpmnDesignAntd',
  components: {
    MyProcessDesigner,
    MyPropertiesPanel
  },
  props: {
    design: {
      type: Object,
      default: () => {
        return {
          processId: '',
          processName: '',
          simulation: true,
          labelEditing: false,
          labelVisible: false,
          prefix: 'activiti',
          headerButtonSize: 'small'
        }
      }
    },
    penal: {
      type: Object,
      default: () => {
        return {
          prefix: 'activiti',
          width: 480,
          idEditDisabled: false,
          assignee: {
            type: Array,
            default: [{ username: 'admin', realname: '管理员' }]
          },
          candidateUsers: {
            type: Array,
            default: () => []
          },
          candidateGroups: {
            type: Array,
            default: () => []
          }
        }
      }
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      modeler: null,
      reloadIndex: 0
    }
  },
  methods: {
    initModeler(modeler) {
      this.$nextTick(() => {
        this.modeler = modeler
      })
      this.$emit('initModeler', modeler)
    },
    elementClick(element) {
      this.$emit('elementClick', element)
    },
    elementEvents(eventName, element, eventObj) {
      // 转发BpmnEvents
      this.$emit(eventName, element, eventObj)
    },
    save(data) {
      this.$emit('save', data)
    },
    xmlChange(val) {
      this.$emit('value', val)
    },
    updateElementTask(key, val) {
      this.$refs.myPropertiesPanel.updateElementTask(key, val)
    },
    updateLoop(key, val) {
      this.$refs.myPropertiesPanel.updateLoop(key, val)
    }
  }
}
</script>
