<h3 class="WorkflowDesignerTitleWithCreate">
  {{ parentItem.Name }} {{labels.Title}}
  <a v-if="!readonly" @click="add()">{{ButtonTextCreate}}</a>
</h3>
<div id="WorkflowDesignerCodeActionsParametersList" class="WorkflowDesignerWindowForm">
    <table class="WorkflowDesignerTable">
        <tr>
            <th></th>
            <th>{{labels.InputParametersParameter}}</th>
            <th>{{labels.InputParametersName}}</th>
            <th>{{labels.InputParametersIsRequired}}</th>
            <th>{{labels.InputParametersDefaultValue}}</th>
        </tr>
        <tr v-for="(item, index) in items" :key="index">
            <td></td>
            <td>
                <el-select
                    v-model="item.Parameter.Name"
          :class="validateField('Parameter', item) ? 'WorkflowDesignerInputError' : ''"
          :disabled="readonly"
          :title="validateField('Parameter', item)"
                    filterable placeholder=""
          style="width: 100%;"
          @change="parameterOnChange(item)">
                    <el-option v-for="p in parameters" :key="p.Name" :label="p.Name" :value="p.Name"></el-option>
                </el-select>
            </td>
            <td>
                <el-input
                    v-model="item.Name"
          :class="validateField('Name', item) ? 'WorkflowDesignerInputError' : ''"
          :readonly="readonly"
          :title="validateField('Name', item)"
                ></el-input>
            </td>
            <td>
                <el-checkbox
                    v-model="item.IsRequired"
                    :disabled="readonly"
                ></el-checkbox>
            </td>
            <td>
                <el-input
                    v-model="item.DefaultValue"
                    :readonly="readonly"
                ></el-input>
            </td>
            <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Triple">
                <el-button-group>
          <el-button :class="'WorkflowDesignerTableCodeActionsButton ' + (editItem == item ? 'is-active' : '')"
                     @click="showjson('DefaultValue', 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 commandParameters_Init(me){
         me.VueConfig.data = Object.assign(me.VueConfig.data, {
            readonly: false,
            labels: WorkflowDesignerConstants.CommandParametersFormLabel,
            editItem: undefined,
            ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
            ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
            ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
            ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
            parametersStore: me.graph.data.Parameters,
        });

        me.VueConfig.watch = {
            parametersStore:function(val) {
                me.VueConfig.data.parameters = me.graph.getNonSystemParameters();
            },
        }

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

        me.VueConfig.methods.typeOnChange = function(item){
            item.DefaultValue = undefined;
        }

        me.VueConfig.methods.onUpdate = function(item){
            me.VueConfig.data.parameters = me.graph.getNonSystemParameters();
            me.VueConfig.data.parentItem = item;
            me.VueConfig.data.items = WorkflowDesignerCommon.clone(item.InputParameters);
            me.VueConfig.data.readonly = me.graph.Settings.readonly;
        };

    me.VueConfig.methods.add = function () {
      if (!Array.isArray(me.VueConfig.data.items))
        me.VueConfig.data.items = [];

      me.VueConfig.data.items.push({Parameter: {}, Name: '', IsRequired: false, DefaultValue: ''});
    };

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

        me.VueConfig.methods.parameterOnChange = function(ip){
            if(!ip.Name)
                ip.Name = ip.Parameter.Name;
        };

    me.VueConfig.methods.showjson = function (name, item) {
      me.VueConfig.data.editItem = item;
      me.editItem = item;

      var onSuccess = function (value) {
        if (me.editItem) {
          me.editItem[name] = value;
          me.VueConfig.data.editItem = undefined;
          delete me.editItem;
        }
      };

      var onClose = function (value) {
        me.VueConfig.data.editItem = undefined;
      };

      var params = {
        name: item['Rule'],
        type: ['RuleCheck', 'RuleGet']
      };
      me.VueConfig.data.jsonform = me.showjson(item[name], params, onSuccess, onClose);
    };

    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.validateField = function (name, item) {
      if (name !== 'Name' && name !== 'Parameter')
        return;

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

      if (name === 'Parameter' && !item['Parameter']['Name']) {
                return WorkflowDesignerConstants.FieldIsRequired;
            }
        };

    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;

        if (Array.isArray(items)) {
          for (var j = 0; j < items.length; j++) {
            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.VueConfig.data.parentItem.InputParameters, 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.VueConfig.data.parentItem.InputParameters,
                me.VueConfig.data.items,
        ['Name', 'IsRequired', 'DefaultValue', '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>
