<h3>{{ title }}</h3>
<div :id="designer_container" style="width: 100%; height: calc(100% - 100px);"></div>

<div class="WorkflowDesignerButtons">
  <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>

<script type="application/javascript">
  function activitygroup_Init(me) {
    me.VueConfig.data = Object.assign(me.VueConfig.data, {
      designer_container: me.id + '_designer',
      labels: WorkflowDesignerConstants.EditExpressionLabel,
      ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
      title: me.options.title
    });

    me.VueConfig.methods.onUpdate = function (value) {
      setTimeout(function () {
        me.VueConfig.methods.renderDesigner(value);
      }, 1);
    };

    me.VueConfig.methods.renderDesigner = function (value) {
      if (me.designer != undefined)
        me.designer.destroy();

      var containerName = me.VueConfig.data.designer_container;
      var container = $('#' + containerName);

      me.designer = new WorkflowDesigner({
        name: containerName,
        renderTo: containerName,
        templatefolder: me.graph.Settings.templatefolder,
        apiurl: me.graph.Settings.apiurl,
        graphwidth: container.width(),
        graphheight: container.height(),
        readonly: true,
        group: me.options.group,
        hideElementsToolbar: true,
        hideLegend: true,
        hideInfoBlock: true,
      });

      me.designer.data = value;
      me.designer.render();
    };

    me.VueConfig.methods.onClose = function () {
      me.onClose(true);
    };

    me.VueConfig.methods.onHideEvent = function () {
      if (me.designer) {
        me.designer.destroy();
        delete me.designer;
      }
    }

    me.VueConfig.methods.resize = function () {
      var containerName = me.VueConfig.data.designer_container;
      var container = $('#' + containerName);
      if (me.designer && container.length > 0) {
        me.designer.resize(container.width(), container.height());
      }
    };
  }
</script>
