<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_Data(me) {
    return {
      designer_container: me.id + '_designer',
    }
  }

  function activitygroup_Init(me) {
    const {VueConfig} = me;
    const {state: data, methods} = VueConfig;

    methods.UpdateLanguage = function () {
      Object.assign(data,{
        labels: WorkflowDesignerConstants.EditExpressionLabel,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
        title: me.options.title
      })
    }

    methods.UpdateLanguage();

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

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

      var containerName = 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();
    };

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

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

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