<h3>{{ labels.TitleForInline }}</h3>
<el-form ref="form"
         :model="FormData"
         class="WorkflowDesignerWindowForm"
         label-position="left"
         label-width="150px">
  <el-form-item :label="labels.Name" :readonly="readonly" :rules="getFieldRules('Name')" prop="Name">
    <el-input v-model="FormData.Name"></el-input>
  </el-form-item>
  <el-form-item :label="labels.Scheme" :rules="getFieldRules('SchemeCode')" prop="SchemeCode">
    <el-select v-model="FormData.SchemeCode" :disabled="readonly" filterable placeholder="" style="width: 100%;">
      <el-option
        v-for="scheme in schemes"
        :key="scheme"
        :label="scheme"
        :value="scheme">
      </el-option>
    </el-select>
  </el-form-item>

  <el-button v-if="!readonly && !itemHasComment" circle icon="el-icon-s-comment" @click="showUserComment()"></el-button>
  <el-form-item v-if="itemHasComment" :label="labels.UserComment">
    <el-input
      v-if="itemHasComment"
      v-model="FormData.UserComment"
      :placeholder="labels.UserComment"
      rows="5"
      type="textarea"
    >
    </el-input>
  </el-form-item>
</el-form>

<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 activityinline_Init(me) {
    me.VueConfig.methods.UpdateLanguage = function () {
      me.VueConfig.data = Object.assign(me.VueConfig.data, {
        labels: WorkflowDesignerConstants.ActivityFormLabel,
        ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
      });
    }

    me.VueConfig.methods.UpdateLanguage();
    me.VueConfig.data = Object.assign(me.VueConfig.data, {
      readonly: false,
      itemHasComment: false,
      schemes: [],
      FormData: {}
    });

    me.VueConfig.methods.onUpdate = function (item) {
      me.VueConfig.data.originalItem = item;
      me.VueConfig.data.FormData.Name = item.Name;
      me.VueConfig.data.FormData.SchemeCode = item.SchemeCode;
      me.VueConfig.data.schemes = me.graph.data.AdditionalParams.InlinedSchemeCodes;
      me.VueConfig.data.itemHasComment = item.UserComment != null && item.UserComment.length > 0;

      me.VueConfig.data.readonly = me.graph.Settings.readonly;
    };

    me.VueConfig.methods.getFieldRules = function (field) {
      var res = [{required: true, message: WorkflowDesignerConstants.FieldIsRequired, trigger: 'blur'}];

      if (field == 'Name') {
        var validator = function (rule, value, callback) {
          var originalItem = me.VueConfig.data.originalItem;
          var isValid = true;
          me.graph.data.Activities.forEach(function (a) {
            if (a != originalItem && a.Name == value) {
              isValid = false;
            }
          });

          if (isValid) {
            callback();
          } else {
            callback(new Error(rule.message));
          }
        };
        res.push({validator: validator, message: WorkflowDesignerConstants.FieldMustBeUnique});
      }
      return res;
    };

    me.VueConfig.methods.onSave = function () {
      if (this.$refs && this.$refs.form) {
        this.$refs.form.validate(function (valid) {
          if (valid) {
            me.onSuccess(me.VueConfig.data.FormData);
            me.onClose(true);
          }
        });

      }
    };

    me.VueConfig.methods.onClose = function () {
      if (me.VueConfig.data.readonly) {
        me.onClose(true);
        return;
      }

      var originalItem = me.VueConfig.data.originalItem;
      var item = me.VueConfig.data.FormData;

      if (originalItem.Name === item.Name && originalItem.SchemeCode === item.SchemeCode) {
        me.onClose(true);
      } else {
        me.showConfirm();
      }
    };

    me.VueConfig.methods.showUserComment = function () {
      me.VueConfig.data.itemHasComment = 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>
