<h3 class="WorkflowDesignerTitleWithCreate">
  {{(name || labels.Dropdown) + " " + labels.Values}}
  <a v-if="!readonly" @click="addDropdownValues()">{{ButtonTextCreate}}</a>
</h3>
<div id="WorkflowDesignerDropdownValues" class="WorkflowDesignerWindowForm">
  <table class="WorkflowDesignerTable">
    <tr>
      <th></th>
      <th>{{ labels.Name }}</th>
      <th>{{ labels.Value }}</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' style="cursor:grab;">
        <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
      </td>
            <td>
                <el-input
                    v-model="item.Name"
          :class="validateFieldDD('Name', item) ? 'WorkflowDesignerInputError' : ''"
          :readonly="readonly"
          :title="validateFieldDD('Name', item)">
                </el-input>
            </td>
            <td>
                <el-input v-model="item.Value"
                  :class="validateFieldDD('Name', item) ? 'WorkflowDesignerInputError' : ''"
                  :readonly="readonly"
                  :title="validateFieldDD('Name', item)">
                </el-input>
            </td>

            <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Double">
                <el-button-group>
          <el-button class="WorkflowDesignerTableDeleteButton" @click="removeDropdownValues(item, 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 dropdownValues_Init(me) {
    me.VueConfig.methods.UpdateLanguage = function () {
      me.VueConfig.data = Object.assign(me.VueConfig.data, {
        labels: WorkflowDesignerConstants.DropdownValues,
        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,
      name: undefined,
    });

        me.VueConfig.methods.onUpdate = function(parentItem){
            me.parentItem = parentItem;

            me.VueConfig.data.items = WorkflowDesignerCommon.clone(parentItem.DropdownValues);
            me.VueConfig.data.name = parentItem.Name;
            me.VueConfig.data.readonly = me.graph.Settings.readonly;
        };

    me.VueConfig.methods.addDropdownValues = function () {
      me.VueConfig.data.items.push({value: '', name: ''});
    };

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

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

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

    me.VueConfig.methods.validate = function () {
      var validateFunc = me.VueConfig.methods.validateFieldDD;
      var items = me.VueConfig.data.items;
      for (var i = 0; i < items.length; i++) {
        var item = items[i];

        if (validateFunc('Name', item) || validateFunc('Value', item))
          return false;
      }

      return true;
    };

    me.VueConfig.methods.onSave = function () {
      if (me.VueConfig.methods.validate && me.VueConfig.methods.validate()) {
        me.graph.UpdateData(me.parentItem.DropdownValues, 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.parentItem.DropdownValues,
                me.VueConfig.data.items,
        ['Name', 'Value'])) {

                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>
