<template>
  <div class="panel-tab__content">
    <el-form size="mini" label-width="100px" @submit.native.prevent>
      <el-form-item label="节点表单路由">
        <el-input v-model="formKey" clearable @change="updateElementFormKey" type="textarea" rows="3"/>
      </el-form-item>
    </el-form>
    友情提示：<br/>
    1、若需要为每个节点设置自定义表单，可以在此设置, 格式： <br/>{"pcHandle":"PC端处理路由", "pcView":"PC端查看路由", "miniHandle":"小程序端处理路由", "miniView":"小程序端查看路由"}<br/>
    2、若要为整个流程设置统一表单，可以在流程模型修改页面设置业务表单，格式一致。
  </div>
</template>

<script>
export default {
  name: 'ElementForm',
  props: {
    id: String,
    type: String
  },
  inject: {
    prefix: 'prefix',
    width: 'width'
  },
  data() {
    return {
      formKey: ''
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetFormList())
      }
    }
  },
  methods: {
    resetFormList() {
      this.bpmnELement = window.bpmnInstances.bpmnElement;
      this.formKey = this.bpmnELement.businessObject.formKey;
      // 更新元素扩展属性，避免后续报错
      // this.updateElementExtensions()
    },
    updateElementFormKey() {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey })
    }
  }
}
</script>
