<h3 class="WorkflowDesignerTitleWithCreate">
  {{labels.Title}}
  <a v-if="!readonly" @click="add()">{{ButtonTextCreate}}</a>
</h3>
<div id="WorkflowDesignerCommandsList" class="WorkflowDesignerWindowForm">
  <table class="WorkflowDesignerTable">
    <tr>
      <th></th>
      <th>{{ labels.Name }}</th>
    </tr>
    <tr v-for="(item, index) in items" :key="index"
        :class="dragOverIndex == index && dragOverBlock  == item ? 'dragOver' : ''"
        @dragend="dragend($event)" @dragover="dragover(item, index, $event)"
        @dragstart="dragstart(index, $event)">
      <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
        <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
      </td>
            <td>
                <el-input
                    v-model="item.Name"
          :class="validateField('Name', item) ? 'WorkflowDesignerInputError' : ''"
          :readonly="readonly"
          :title="validateField('Name', item)"
        ></el-input>
      </td>
      <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Triple">
        <el-button-group>
          <el-button :class="'WorkflowDesignerTableCodeParametersButton ' + (editParametersItem == item ? 'is-active' : '')"
                     v-on:click="showparameters(item)"></el-button>
          <el-button class="WorkflowDesignerTableCommentButton el-icon-" v-on:click="showComment(item)"></el-button>
          <el-button class="WorkflowDesignerTableDeleteButton" @click="remove(index)"></el-button>
        </el-button-group>
      </td>
    </tr>
  </table>
</div>
<div class="WorkflowDesignerButtons">
  <el-button v-if="!readonly" type="primary" @click="onSave">{{ ButtonTextSave }}</el-button>
  <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>
<script type="application/javascript">
    function commands_Init(me){
      me.VueConfig.methods.UpdateLanguage = function () {
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
          labels: WorkflowDesignerConstants.CommandFormLabel,
          ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
          ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
          ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
          ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
        });
      }

      me.VueConfig.methods.UpdateLanguage();
         me.VueConfig.data = Object.assign(me.VueConfig.data, {
            readonly: false,
            editItem: undefined,
            editParametersItem: undefined
        });

    me.VueConfig.methods.setCurrentItem = function (item) {
      this.currentItem = item;
    };

    me.VueConfig.methods.onUpdate = function () {
      var clonedItems = WorkflowDesignerCommon.clone(me.graph.data.Commands);
      clonedItems.forEach(function (item) {
        if (!Array.isArray(item.InputParameters)) {
          item.InputParameters = [];
        }
        item.InputParameters.forEach(function (parameterItem) {
          if (!parameterItem.Parameter) parameterItem.Parameter = {};
        })
      });
      me.VueConfig.data.items = clonedItems;
      me.VueConfig.data.readonly = me.graph.Settings.readonly;
    };

    me.VueConfig.methods.add = function () {
      me.VueConfig.data.items.push({Name: '', InputParameters: []});

      setTimeout(function () {
        var objDiv = document.getElementById('WorkflowDesignerCommandsList');
        objDiv.scrollTop = objDiv.scrollHeight;
      }, 10);
    };

    me.VueConfig.methods.remove = function (index) {
      me.VueConfig.data.items.splice(index, 1);
    };

    me.VueConfig.methods.showjson = function (name, item) {
      me.VueConfig.data.editItem = item;
      me.editItem = item;
      me.VueConfig.data.jsonform = me.showjson(item[name], {}, function (value) {
        if (me.editItem) {
          me.editItem[name] = value;
          me.VueConfig.data.editItem = undefined;
          delete me.editItem;
        }
      })
    };

    me.VueConfig.methods.validateField = function (name, item) {
      if (name != 'Name')
        return;

      if (!item[name]) {
        return WorkflowDesignerConstants.FieldIsRequired;
      }

      if (name == 'Name') {
        var res = me.VueConfig.data.items.filter(function (i) {
          return i != item && i.Name == item.Name
        });
        if (res.length > 0) {
          return WorkflowDesignerConstants.FieldMustBeUnique;
        }
      }
    };

    me.VueConfig.methods.showparameters = function (item) {
      me.VueConfig.data.editParametersItem = me.editParametersItem = item;

      var windowId = me.id + '_commandParameters';

      var onSuccess = function (res) {
        if (me.editParametersItem) {
          me.editParametersItem.ParameterDefinitions = WorkflowDesignerCommon.clone(res);
          me.VueConfig.data.editParametersItem = undefined;
          delete me.editParametersItem;
        }
      };

      var onClose = function () {
        if (me.editParametersItem) {
          me.VueConfig.data.editParametersItem = undefined;
          delete me.editParametersItem;
        }
      }

            if(!me.parametersform){
                var options = {
                    move: true,
                    resize: true,
                    savePosition: true,
                    class: 'WorkflowDesignerParametersForm',
                    onSuccess: onSuccess,
                    onClose: onClose,
                    parameterDefinition: {}
                };
                me.parametersform = me.graph.CreateWindow(windowId, options);
            }

      me.parametersform.show('commandParameters', item);
    };

    me.VueConfig.methods.showComment = function (item) {
      const name = "Comment";
      const title = "Edit comment";
      const type = WorkflowDesignerConstants.ParameterTypes.TextArea;

      me.editItem = item;

      me.showJsonForm(item[name], {
        customTitle: title,
        parameterDefinition: {type},
        onSuccess: function (value) {
          if (me.editItem) {
            me.editItem[name] = value;
          }
        },
        onClose: function () {
          delete me.editItem;
        }
      });
    };

    me.VueConfig.methods.validate = function () {
      var validateFunc = me.VueConfig.methods.validateField;

      var items = me.VueConfig.data.items;
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (validateFunc('Name', item))
          return false;
      }

      return true;
    };

    me.VueConfig.methods.onSave = function () {
      if (me.VueConfig.methods.validate && me.VueConfig.methods.validate()) {
        me.graph.UpdateData(me.graph.data.Commands, me.VueConfig.data.items);
        me.onClose(true);
      }
    };

    me.VueConfig.methods.onClose = function () {

            if(me.VueConfig.data.readonly){
                me.onClose(true);
                return;
            }
            if (!me.VueConfig.data.readonly && !WorkflowDesignerCommon.compareArray(
                me.graph.data.Commands,
                me.VueConfig.data.items,
        ['Name', 'InputParameters', "Comment"])) {

        me.showConfirm();
        return false;
      } else {
        me.onClose(true);
      }
    };

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

    me.showConfirm = function () {
      me.VueConfig.methods.showConfirm({
        title: WorkflowDesignerConstants.DialogConfirmText,
        message: WorkflowDesignerConstants.CloseWithoutSaving,
        onSuccess: function () {
          me.VueConfig.methods.onCloseSave();
        }
      });
    }
  }
</script>
