<h3>{{ labels.Title }}</h3>
<el-form ref="form"
         :model="FormData"
         class="WorkflowDesignerWindowForm"
         label-position="top"
         label-width="150px">
  <div class="el-form--inline el-form--label-top SettingsWithPadding" style="display: flex;">
    <el-form-item v-if="expertMode" :label="labels.Name" :readonly="readonly" :rules="getFieldRules('Name')" prop="Name"
                  style="flex-grow: 1;">
      <el-input v-model="FormData.Name"></el-input>
    </el-form-item>
    <el-form-item v-if="expertMode" :label="labels.From" :readonly="readonly" :rules="getFieldRules('From')" prop="From">
      <el-select
        v-model="FormData.From"
        :disabled="readonly"
        filterable
        placeholder=""
        style="width: 100%;">
        <el-option v-for="item in activities" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="expertMode && isFromInline()" :label="labels.InlinedFinalActivityName" :readonly="readonly"
                  prop="InlinedFinalActivityName">
      <el-input v-model="FormData.InlinedFinalActivityName"></el-input>
    </el-form-item>

    <el-form-item v-if="expertMode" :label="labels.To" :readonly="readonly" :rules="getFieldRules('To')" prop="To">
      <el-select
        v-model="FormData.To"
        :disabled="readonly"
        filterable
        placeholder=""
        style="width: 100%;">
                <el-option v-for="item in activities" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
            </el-select>
        </el-form-item>

    <el-form-item :label="labels.Classifier" :readonly="readonly" prop="Classifier">
      <el-button-group>
        <el-button v-for="key in Object.keys(labels.ClassifierValues)" :key="key"
                   :disabled="readonly"
                   :style="getClassifierStyle(FormData.Classifier, key)" @click="FormData.Classifier = key">
          {{ labels.ClassifierValues[key] }}
        </el-button>
      </el-button-group>
    </el-form-item>
  </div>

  <h4 class="SettingsHeader">{{ labels.Trigger }}</h4>
  <div class="SettingsWithPadding SpacedRow">
    <el-form-item :label="labels.TriggerType" style="flex-grow: 0;">
      <el-button-group>
        <el-button :disabled="readonly" :type="FormData.Trigger.Type == 'Auto' ? 'info' : ''" @click="triggerClick('Auto')">
          {{ labels.TriggerAuto }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.Trigger.Type == 'Command' ? 'info' : ''" @click="triggerClick('Command')">
          {{ labels.TriggerCommand }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.Trigger.Type == 'Timer' ? 'info' : ''" @click="triggerClick('Timer')">
          {{ labels.TriggerTimer }}
        </el-button>
      </el-button-group>
    </el-form-item>
    <el-form-item v-if="FormData.Trigger.Type == 'Command'" :label="labels.TriggerCommand" :rules="getFieldRules('Trigger.Command.Name')"
                  prop="Trigger.Command.Name">
      <el-select
        v-model="FormData.Trigger.Command.Name"
                    style="width: 100%; margin-inline-end: 10px;"
        :disabled="readonly"
        allow-create
        clearable
        filterable
        placeholder=""
        style="width: 100%; margin-right: 10px;"
        @change="commandsListChange">
        <el-option v-for="item in commands" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-button :disabled="!FormData.Trigger.Command.Name" class="WorkflowDesignerTableCodeParametersButton"
                 @click="commandParameters"></el-button>
    </el-form-item>
    <el-form-item v-if="FormData.Trigger.Type == 'Timer'" :label="labels.TriggerTimer" :rules="getFieldRules('Trigger.Timer.Name')"
                  prop="Trigger.Timer.Name">
      <el-select
        v-model="FormData.Trigger.Timer.Name"
        :disabled="readonly"
        clearable
        filterable
        placeholder=""
        style="width: 100%; margin-right: 10px;">
        <el-option v-for="item in timers" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-button class="WorkflowDesignerTableCodeParametersButton" @click="timersWindow"></el-button>
    </el-form-item>
  </div>


  <div v-if="FormData.Trigger.Type == 'Command'" style="margin-bottom: 10px;">
    <h4 class="WorkflowDesignerTitleWithCreate Underline SettingsHeader">
          {{labels.Restrictions}}
          <a v-if="!readonly"
             @click="addRow(FormData.Restrictions,
                { Actor: {}, Type: 'Allow'})">{{ButtonTextCreate}}</a>
    </h4>
    <table v-if="FormData.Restrictions.length > 0" class="WorkflowDesignerTable">
      <tr>
        <th></th>
        <th>{{ labels.RestrictionsActor }}</th>
        <th>{{ labels.RestrictionsType }}</th>
      </tr>
      <tr v-for="(restriction, index) in FormData.Restrictions" :key="index"
          :class="dragOverIndex == index && dragOverBlock  == restriction ? 'dragOver' : ''"
          @dragend="dragend($event)"
          @dragover="dragover(restriction, index, $event)" @dragstart="dragstart(index, $event, FormData.Restrictions)">
        <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
          <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
        </td>
        <td>
          <el-select
            v-model="restriction.Actor.Name"
            :class="validateField('Actor.Name', restriction) ? 'WorkflowDesignerInputError' : ''"
            :disabled="readonly"
            :title="validateField('Actor.Name', restriction)"
            clearable
            filterable
            placeholder=""
            style="width: 100%;">
                        <el-option v-for="item in actors" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </td>
                <td>
                    <el-select
                    v-model="restriction.Type"
                    :disabled="readonly"
                    filterable
                    placeholder="">
                    <el-option key="Allow" :label="labels.Allow" value="Allow"></el-option>
                    <el-option key="Restrict" :label="labels.Restrict" value="Restrict"></el-option>
                    </el-select>
                </td>
                <td v-if="!readonly" style="width: 42px;">
          <el-button-group>
            <el-button class="WorkflowDesignerTableDeleteButton" @click="removeRow(FormData.Restrictions, index)"></el-button>
          </el-button-group>
      </tr>
    </table>

    <el-button v-if="FormData.Restrictions.length > 1" type="text" @click="restrictionDetails = !restrictionDetails">{{
        restrictionDetails ? labels.HideConcatParameters :
          labels.ShowConcatParameters
      }}
    </el-button>

    <div v-if="restrictionDetails" class="el-form--inline el-form--label-top">
      <el-form-item :label="labels.AllowConcatenationType" :readonly="readonly">
        <el-select v-model="FormData.AllowConcatenationType">
          <el-option key="And" label="And" value="And"></el-option>
          <el-option key="Or" label="Or" value="Or"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="labels.RestrictConcatenationType" :readonly="readonly">
        <el-select v-model="FormData.RestrictConcatenationType">
          <el-option key="And" label="And" value="And"></el-option>
          <el-option key="Or" label="Or" value="Or"></el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>

  <div style="margin-bottom: 10px;">
    <h4 class="WorkflowDesignerTitleWithCreate SettingsHeader">
          <span :style="showconditionerror ? 'color:red' : ''" :title="showconditionerror">{{ labels.Condition}}</span>
          <a v-if="!readonly && FormData.conditionType == 'Conditional'"
             @click="addRow(FormData.Conditions,
               {Action:{ActionParameter:''},Type: 'Expression', Expression:null})">{{ButtonTextCreate}}</a>
    </h4>
    <el-form-item class="SettingsWithPadding" style="width: 380px;">
      <el-button-group>
        <el-button :disabled="readonly" :type="FormData.conditionType == 'Always' ? 'info' : ''" @click="conditionClick('Always')">
          {{ labels.AlwaysLabel }}
        </el-button>
        <el-button :disabled="readonly" :type="FormData.conditionType == 'Conditional' ? 'info' : ''"
                   @click="conditionClick('Conditional')">{{ labels.ConditionalLabel }} <img
          :src="ConditionalImage" style="height: 10px;" /></el-button>
        <el-button :disabled="readonly" :type="FormData.conditionType == 'Otherwise' ? 'info' : ''" @click="conditionClick('Otherwise')">
          {{ labels.OtherwiseLabel }} <img :src="OtherwiseImage"
                                           style="height: 10px;" />
                </el-button>
            </el-button-group>
        </el-form-item>
        <div v-if="FormData.conditionType == 'Conditional'">
            <table v-if="FormData.Conditions.length > 0" class="WorkflowDesignerTable">
                <tr>
                    <th></th>
                    <th>{{labels.ConditionType}}</th>
                    <th>{{labels.ConditionAction}}</th>
                    <th v-if="hasConditionAnyAction()">{{labels.ConditionActionParameter}}</th>
                    <th>{{labels.ConditionInversion}}</th>
                    <th v-if="expertMode">{{labels.ResultOnPreExecution}}</th>
                </tr>
                <tr v-for="(condition, index) in FormData.Conditions" :key="index"
                    :class="dragOverIndex == index && dragOverBlock  == condition ? 'dragOver' : ''"
            @dragend="dragend($event)" @dragover="dragover(condition, index, $event)"
            @dragstart="dragstart(index, $event, FormData.Conditions)">
          <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
            <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
          </td>
          <td>
            <el-select
              v-model="condition.Type"
              :class="validateField('Type', condition) ? 'WorkflowDesignerInputError' : ''"
              :disabled="readonly"
              :title="validateField('Type', condition)"
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option key="Action" :label="labels.ActionLabel" value="Action"></el-option>
              <el-option key="Expression" :label="labels.ExpressionLabel" value="Expression"></el-option>
            </el-select>
          </td>
          <td v-if="condition.Type == 'Action'">
            <el-select
              v-model="condition.Action.ActionName"
              :class="validateField('Action.ActionName', condition) ? 'WorkflowDesignerInputError' : ''"
              :disabled="readonly"
              :title="validateField('Action.ActionName', condition)"
              clearable
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option v-for="item in conditions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
          <td v-if="condition.Type == 'Action'">
            <div style="flex-flow: nowrap; display: flex;align-items: center;">
              <el-autocomplete v-model="condition.Action.ActionParameter" :disabled="readonly" :fetch-suggestions="querySearch"
                               style="margin-right: 5px;"
                               @focus="setCurrentItem(condition)"></el-autocomplete>
            </div>
          </td>
          <td v-if="condition.Type == 'Expression'">
            <div style="flex-flow: nowrap; display: flex;align-items: center;">
              <el-input
                v-model="condition.Expression"
                :class="validateField('Expression', condition) ? 'WorkflowDesignerInputError' : ''"
                :readonly="readonly"
                :title="validateField('Expression', condition)">
              </el-input>
            </div>
          </td>
          <td v-if="condition.Type == 'Expression' && hasConditionAnyAction()"></td>

          <td v-if="condition.Type == 'Action' || condition.Type == 'Expression'">
            <el-checkbox v-model="condition.ConditionInversion" :disabled="readonly"></el-checkbox>
          </td>
          <td v-if="expertMode && (condition.Type == 'Action' || condition.Type == 'Expression')">
            <el-select
              v-model="condition.ResultOnPreExecution"
              :disabled="readonly"
              clearable
              filterable
              placeholder=""
              style="width: 100%;">
              <el-option key="True" :value="true" label="True"></el-option>
              <el-option key="False" :value="false" label="False"></el-option>
            </el-select>
          </td>
          <td :style="!readonly ? 'width: 94px;' : 'width: 42px;'">
            <el-button-group>
              <el-button
                :class="'WorkflowDesignerTableCodeActionsButton ' + (editItem == condition ? 'is-active' : '')"
                @click="condition.Type == 'Action' ? showjson('Action.ActionParameter', condition, {name: condition.Action.ActionName ,type: ['Condition']}) : showjson('Expression', condition, {expression: true})"></el-button>
              <el-button v-if="!readonly" class="WorkflowDesignerTableDeleteButton"
                         @click="removeRow(FormData.Conditions, index)"></el-button>
            </el-button-group>
          </td>
        </tr>
      </table>

      <el-button v-if="FormData.Conditions.length > 1" type="text" @click="conditionDetails = !conditionDetails">{{
          conditionDetails ? labels.HideConcatParameters : labels.ShowConcatParameters
        }}
      </el-button>

      <div v-if="conditionDetails" class="el-form--inline el-form--label-top">
        <el-form-item :label="labels.ConditionsConcatenationType" :readonly="readonly">
          <el-select v-model="FormData.ConditionsConcatenationType">
            <el-option key="And" label="And" value="And"></el-option>
            <el-option key="Or" label="Or" value="Or"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
  </div>

  <div style="margin-bottom: 10px;">
    <h4 class="SettingsHeader">{{ labels.Subprocess }}</h4>
    <el-form-item class="SettingsWithPadding" style="width: 380px;">
      <el-button-group>
        <el-button :disabled="readonly" :style="!FormData.IsFork  ? getSubprocessStyle('None') : ''" @click="subprocessClick('None')">
          {{ labels.SubprocessNone }}
        </el-button>
        <el-button :disabled="readonly"
                   :style="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Start'  ? getSubprocessStyle('Start') : ''" @click="subprocessClick('Start')">{{
            labels.SubprocessStart
          }}
        </el-button>
        <el-button :disabled="readonly"
                   :style="FormData.IsFork && FormData.SubprocessInOutDefinition === 'Finalize'  ? getSubprocessStyle('Finalize') : ''" @click="subprocessClick('Finalize')">{{
            labels.SubprocessFinalize
          }}
        </el-button>
        <el-button v-if="expertMode"
                   :disabled="readonly"
                   :style="FormData.IsFork && (!FormData.SubprocessInOutDefinition || FormData.SubprocessInOutDefinition === 'Auto')   ? getSubprocessStyle('Auto') : ''" @click="subprocessClick('Auto')">{{ labels.SubprocessAuto }}
                </el-button>
            </el-button-group>
        </el-form-item>
    </div>
<!--Subprocess start settings-->
  <h4 v-if="FormData.IsFork && FormData.SubprocessInOutDefinition == 'Auto'" class="SettingsHeader">{{
      labels.SubprocessStartSettings
    }}</h4>
  <div v-if="FormData.IsFork && FormData.SubprocessInOutDefinition !== 'Finalize'" class="SettingsWithPadding" style="margin-bottom: 10px;">
    <div class="SpacedRow">
      <el-form-item v-if="expertMode" :label="labels.SubprocessName" :readonly="readonly" prop="SubprocessName">
        <el-input v-model="FormData.SubprocessName" :placeholder="labels.SubprocessNamePlaceholder"></el-input>
      </el-form-item>
      <el-form-item v-if="expertMode" :label="labels.SubprocessId" :readonly="readonly" prop="SubprocessId">
        <el-input v-model="FormData.SubprocessId" :placeholder="labels.SubprocessIdPlaceholder"></el-input>
      </el-form-item>
    </div>
    <div class="SpacedRow">
      <el-form-item v-if="FormData.Trigger.Type === 'Auto' || FormData.Trigger.Type === 'Command'" :label="labels.SubprocessStartupType"
                    :readonly="readonly">
        <el-select
          v-model="FormData.SubprocessStartupType"
          :disabled="readonly"
          :placeholder="labels.SubprocessStartupTypeSameThread" clearable
          filterable>
          <el-option key="SameThread" :label="labels.SubprocessStartupTypeSameThread" value="SameThread"></el-option>
          <el-option key="AnotherThread" :label="labels.SubprocessStartupTypeAnotherThread" value="AnotherThread"></el-option>
          <el-option key="TimerQueue" :label="labels.SubprocessStartupTypeTimerQueue" value="TimerQueue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="expertMode" :label="labels.SubprocessStartupParameterCopyStrategy" :readonly="readonly">
        <el-select
          v-model="FormData.SubprocessStartupParameterCopyStrategy"
          :disabled="readonly"
          :placeholder="labels.SubprocessStartupParameterCopyStrategyCopyAll" clearable
          filterable>
          <el-option key="CopyAll" :label="labels.SubprocessStartupParameterCopyStrategyCopyAll" value="CopyAll"></el-option>
          <el-option key="IgnoreAll" :label="labels.SubprocessStartupParameterCopyStrategyIgnoreAll" value="IgnoreAll"></el-option>
          <el-option key="CopySpecified" :label="labels.SubprocessStartupParameterCopyStrategyCopySpecified"
                     value="CopySpecified"></el-option>
          <el-option key="IgnoreSpecified" :label="labels.SubprocessStartupParameterCopyStrategyIgnoreSpecified"
                     value="IgnoreSpecified"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="(FormData.SubprocessStartupParameterCopyStrategy === 'CopySpecified' || FormData.SubprocessStartupParameterCopyStrategy === 'IgnoreSpecified') && expertMode"
        :label="labels.SubprocessSpecifiedParameters" :readonly="readonly">
        <el-input v-model="FormData.SubprocessSpecifiedParameters"></el-input>
      </el-form-item>
    </div>

    <el-form-item v-if="expertMode" :readonly="readonly">
      <el-checkbox v-model="FormData.DisableParentStateControl" :disabled="readonly" :label="labels.DisableParentStateControl"
                   name="type"></el-checkbox>
    </el-form-item>
  </div>
  <!--Subprocess finalize settings-->
  <h4 v-if="FormData.IsFork && FormData.SubprocessInOutDefinition == 'Auto'" class="SettingsHeader">{{
      labels.SubprocessFinalizeSettings
    }}</h4>
  <div v-if="FormData.IsFork && FormData.SubprocessInOutDefinition !== 'Start'" class="SettingsWithPadding" style="margin-bottom: 10px;">
    <el-form-item v-if="expertMode" :label="labels.SubprocessFinalizeParameterMergeStrategy" :readonly="readonly">
      <el-select
        v-model="FormData.SubprocessFinalizeParameterMergeStrategy" :disabled="readonly"
        :placeholder="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAllNulls"
        clearable
        dddd filterable
        style="width: 100%;">
        <el-option key="OverwriteAllNulls" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAllNulls"
                   value="OverwriteAllNulls"></el-option>
        <el-option key="OverwriteAll" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteAll" value="OverwriteAll"></el-option>
        <el-option key="OverwriteSpecified" :label="labels.SubprocessFinalizeParameterMergeStrategyOverwriteSpecified"
                   value="OverwriteSpecified"></el-option>
        <el-option key="DontOverwriteSpecified" :label="labels.SubprocessFinalizeParameterMergeStrategyDontOverwriteSpecified"
                   value="DontOverwriteSpecified"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      v-if="(FormData.SubprocessFinalizeParameterMergeStrategy === 'OverwriteSpecified' || FormData.SubprocessFinalizeParameterMergeStrategy === 'DontOverwriteSpecified') && expertMode"
      :label="labels.SubprocessSpecifiedParameters" :readonly="readonly">
      <el-input v-model="FormData.SubprocessSpecifiedParameters"></el-input>
    </el-form-item>
    <el-checkbox v-model="FormData.MergeViaSetState" :disabled="readonly" :label="labels.MergeViaSetState" name="type"></el-checkbox>
    </div>


  <div v-if="expertMode" style="margin-bottom: 10px;">
        <h4 class="WorkflowDesignerTitleWithCreate Underline SettingsHeader">
          {{labels.Annotations}}
          <a v-if="!readonly"
             @click="addRow(FormData.Annotations,{JsonValue:null})">{{ButtonTextCreate}}</a>
    </h4>

    <table v-if="FormData.Annotations.length > 0" class="WorkflowDesignerTable">
      <tr>
        <th></th>
        <th>{{ labels.AnnotationName }}</th>
        <th>{{ labels.AnnotationValue }}</th>
      </tr>
      <tr v-for="(annotation, index) in FormData.Annotations" :key="index"
          :class="dragOverIndex == index && dragOverBlock  == annotation ? 'dragOver' : ''"
          @dragend="dragend($event)" @dragover="dragover(annotation, index, $event)"
          @dragstart="dragstart(index, $event, FormData.Annotations)">
        <td :draggable="!readonly" class='WorkflowDesignerTableMoveCol'>
                    <div v-if="!readonly" class='WorkflowDesignerTableMoveButton'></div>
                </td>
                <td>

          <el-form-item :inline-message="true" :prop="'Annotations.' + index + '.Name'" :rules="annotationNameRules()" class="el-form-item"
                        style="flex-grow: 1;">
                        <el-input
                        v-model="annotation.Name"
              :class="validateField('Name', annotation) ? 'WorkflowDesignerInputError' : ''"
              :title="validateField('Name', annotation)">
            </el-input>
          </el-form-item>
        </td>
        <td>
          <el-input
            v-model="annotation.JsonValue">
          </el-input>
        </td>
        <td v-if="!readonly" class="WorkflowDesignerTableEditButtons Double">
          <el-button-group>
            <el-button :class="'WorkflowDesignerTableCodeActionsButton ' + (editItem == annotation ? 'is-active' : '')"
                       @click="showjson('JsonValue', annotation)"></el-button>
            <el-button class="WorkflowDesignerTableDeleteButton" @click="removeRow(FormData.Annotations, index)"></el-button>
          </el-button-group>
        </td>
      </tr>
    </table>
  </div>
  <div style="margin-bottom: 10px;">
    <el-button v-if="!readonly && !itemHasComment" circle icon="el-icon-s-comment" @click="showUserComment()"></el-button>
    <h4 v-if="itemHasComment" style="padding-bottom: 1px;border-bottom: 1px solid rgba(34,36,38,.15);">{{ labels.UserComment }}</h4>
    <el-input
      v-if="itemHasComment"
      v-model="FormData.UserComment"
      :placeholder="labels.UserComment"
      rows="5"
      type="textarea"
    >
    </el-input>
  </div>
</el-form>

<div class="WorkflowDesignerButtons">
  <el-button type="text" @click="expertMode = !expertMode">{{ expertMode ? SwitchToDefaultMode : SwitchToExpertMode }}</el-button>
  <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 transition_Init(me) {
      me.VueConfig.methods.UpdateLanguage = function () {
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
          labels: WorkflowDesignerConstants.TransitionFormLabel,
          ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
          ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
          ButtonTextCreate: WorkflowDesignerConstants.ButtonTextCreate,
          ButtonTextDelete: WorkflowDesignerConstants.ButtonTextDelete,
          SwitchToDefaultMode: WorkflowDesignerConstants.SwitchToDefaultMode,
          SwitchToExpertMode: WorkflowDesignerConstants.SwitchToExpertMode,
        });
      }

      me.VueConfig.methods.UpdateLanguage();
        me.VueConfig.data = Object.assign(me.VueConfig.data, {
            readonly: false,
            showconditionerror: undefined,
            expertMode: false,
            restrictionDetails: false,
            conditionDetails: false,
            editItem: null,
            itemHasComment:false,
            FormData: {},
            conditions: [],
            commands: [],
            timers: [],
            actors: [],
            activities: [],

            timersStore: me.graph.data.Timers,
            commandsStore: me.graph.data.Commands,
            conditionsStore: me.graph.data.CodeActions,
            activitiesStore: me.graph.data.Activities,
            actorsStore: me.graph.data.Actors,
            ConditionalImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNTg1NjMgMTQuNDAzOEw3LjU5MzA4IDEzLjg5NjVDNy42MDE3MyAxMy4zMDcxIDcuNjI3NzQgMTIuODEzIDcuNjcyOTcgMTIuNDE5QzcuNjcyOTkgMTIuNDE4OCA3LjY3MzAxIDEyLjQxODYgNy42NzMwMyAxMi40MTg0TDguMTY5NzcgMTIuNDc1NUM4LjIxMjQgMTIuMDk2MiA4LjMwMTk0IDExLjc1NzIgOC40MzgzNyAxMS40NTg2TDcuNTg1NjMgMTQuNDAzOFpNNy41ODU2MyAxNC40MDM4SDguMDkzMDJIMTAuNDU5M0gxMC45NTkzVjEzLjkwMzhDMTAuOTU5MyAxMy41OTc2IDEwLjk2NzYgMTMuMzMxMyAxMC45ODM2IDEzLjEwMzdMMTAuOTgzNyAxMy4xMDI2QzEwLjk5ODQgMTIuODg3OCAxMS4wMzQ2IDEyLjY5MjggMTEuMDkgMTIuNTE1OUMxMS4xNDI3IDEyLjM0NzQgMTEuMjIzMiAxMi4xNzY3IDExLjMzNTEgMTIuMDAzNE03LjU4NTYzIDE0LjQwMzhMMTEuMzM1MSAxMi4wMDM0TTExLjMzNTEgMTIuMDAzNEMxMS40NTE0IDExLjgzNjQgMTEuNjIwNCAxMS42NDY2IDExLjg1MTQgMTEuNDM0NUMxMi4yNTgyIDExLjA5MDIgMTIuNjY4MiAxMC43MTgzIDEzLjA4MTYgMTAuMzE5QzEzLjUyMDUgOS45MDM0MiAxMy45MTUzIDkuNDUzNDMgMTQuMjY1NiA4Ljk2OTE4QzE0LjYyMDYgOC40ODY0MiAxNC45MTI4IDcuOTcyMzIgMTUuMTQxMyA3LjQyNzM4TDE1LjE0MjQgNy40MjQ3OUMxNS4zODE2IDYuODQ1NDEgMTUuNSA2LjIzMTU5IDE1LjUgNS41ODc3NkMxNS41IDQuODA0NTYgMTUuMzY2NSA0LjA4ODgxIDE1LjA4NzEgMy40NTA0N0MxNC44MDkzIDIuODE1NzcgMTQuNDA0OCAyLjI3MzMxIDEzLjg3NyAxLjgyODIzQzEzLjM0ODIgMS4zODI0MyAxMi43MDk2IDEuMDU0NTEgMTEuOTczMiAwLjgzNjI3N0MxMS4yNDMgMC42MDkzMTEgMTAuNDI1MSAwLjUgOS41MjU1OCAwLjVDOC43MDY2OSAwLjUgNy45MzM3NCAwLjYwNjQxNyA3LjIwOTU0IDAuODIzMDk1QzYuNDkzNzcgMS4wMzE3MyA1Ljg2MTU4IDEuMzM5NjkgNS4zMjA5MyAxLjc1MjZMNS4zMjA5MyAxLjc1MjZMNS4zMjAxNSAxLjc1MzIxQzQuNzcwMTYgMi4xNzQ5OSA0LjMzMTA0IDIuNjg5MzcgNC4wMDcwMyAzLjI5MzY0QzMuNjc1MjkgMy45MTIzMSAzLjUwOTQ3IDQuNjAxODcgMy41MDAwNCA1LjM1MTQ4TDMuNDkzNjcgNS44NTc3N0g0SDYuMzY2MjhINi44NjYyOFY1LjM1Nzc3QzYuODY2MjggNS4wMTAwNyA2LjkzOTk0IDQuNzQzOTIgNy4wNjM2OCA0LjUzNzU5TDcuMDYzNzEgNC41Mzc2MUw3LjA2NjY2IDQuNTMyNTZDNy4yMDcxNSA0LjI5MTk3IDcuMzkzMzEgNC4wOTMwOSA3LjYzMDA1IDMuOTMyODJDNy44NjUyIDMuNzc1OTUgOC4xNDExNiAzLjY1NzA5IDguNDYzOTYgMy41ODA3Mkw4LjQ2Mzk3IDMuNTgwNzdMOC40NzExOSAzLjU3ODk1QzguODE0NCAzLjQ5MjMzIDkuMTY1NTMgMy40NDg4OSA5LjUyNTU4IDMuNDQ4ODlDMTAuMDA1NCAzLjQ0ODg5IDEwLjQxMjUgMy41MDg1NiAxMC43NTM3IDMuNjE4NDhDMTEuMDk0NSAzLjcyODI5IDExLjM1ODggMy44ODMyOSAxMS41NjEgNC4wNzQ2NUMxMS43MzkgNC4yNDMxOSAxMS44NzY4IDQuNDUzNzkgMTEuOTcxNSA0LjcxNjQzTDExLjk3NDIgNC43MjM3MkwxMS45NzcgNC43MzA5M0MxMi4wNzc0IDQuOTg0MjYgMTIuMTMzNyA1LjI5MTAxIDEyLjEzMzcgNS42NjAzOUMxMi4xMzM3IDUuOTk0NzUgMTIuMDY3MSA2LjMwODU2IDExLjkzNDEgNi42MDY2NEMxMS43ODg1IDYuOTMyOTggMTEuNjA0MyA3LjI0MjA2IDExLjM4MDUgNy41MzQyOEMxMS4xMzk2IDcuODQ1NzkgMTAuODc0MiA4LjE0MjcyIDEwLjU4MzkgOC40MjUwNEwxMC41ODM5IDguNDI1TDEwLjU3ODkgOC40Mjk5OUMxMC4yODU0IDguNzIzNjYgOS45OTYxIDkuMDA5MzggOS43MTEwNCA5LjI4NzE3QzkuMjgzNTkgOS42NTk3NyA4LjkzMjkyIDkuOTkxMDkgOC42NjM1MyAxMC4yNzk4TDExLjMzNTEgMTIuMDAzNFpNNy44MjA4NSAxOC45N0w3LjgyMDggMTguOTdMNy44MjY5NiAxOC45NzYyQzguMTk5MzggMTkuMzUzIDguNzE1MDEgMTkuNSA5LjI4MjU2IDE5LjVDOS44NDg1NCAxOS41IDEwLjM2MjkgMTkuMzUzOCAxMC43MzUxIDE4Ljk3OTRDMTEuMDg5MSAxOC42MzE3IDExLjI2NjMgMTguMTkxNCAxMS4yNjYzIDE3LjY5MjdDMTEuMjY2MyAxNy4xODQ1IDExLjA5MzggMTYuNzMzMyAxMC43NDA3IDE2LjM3NTNDMTAuMzY5MiAxNS45ODk1IDkuODUyODEgMTUuODM2OSA5LjI4MjU2IDE1LjgzNjlDOC43MTA3NyAxNS44MzY5IDguMTkzMDkgMTUuOTkwMyA3LjgyMTQzIDE2LjM3ODVMNy44MjEzNyAxNi4zNzg0TDcuODE1NDMgMTYuMzg0OEM3LjQ4MjI5IDE2Ljc0NTIgNy4zMjQ0MiAxNy4xOTMzIDcuMzI0NDIgMTcuNjkyN0M3LjMyNDQyIDE4LjE4MjEgNy40ODY0MiAxOC42MTk1IDcuODIwODUgMTguOTdaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K',
            OtherwiseImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjI2OTEgMTEuNzI1NUw1LjM3MDQ5IDEuMjA5MTgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIvPgo8bGluZSB5MT0iLTEuNSIgeDI9IjIwIiB5Mj0iLTEuNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEuMTUwNDdlLTA2IDEgLTEgLTMuMDY3MTFlLTA2IDEyLjE4OTQgMCkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4K'
        });

        me.VueConfig.watch = {
            timersStore:function(val) {
                    me.VueConfig.data.timers = me.graph.getTimerNames();
            },
            commandsStore:function(val){
                me.VueConfig.data.commands = me.graph.getCommandNames();
            },
            conditionsStore:function(val) {
                    me.VueConfig.data.conditions = me.graph.getConditionNames();
            },
            activitiesStore:function(val) {
                    me.VueConfig.data.activities = me.graph.data.Activities;
            },
            actorsStore:function(val) {
                    me.VueConfig.data.actors = me.graph.getActorNames();
            },
        };

    me.VueConfig.methods.onUpdate = function (item) {
      var formdata = me.VueConfig.data.FormData;

      formdata.Name = item.Name;
      formdata.InlinedFinalActivityName = item.InlinedFinalActivityName;
      formdata.From = item.From.Name;
      formdata.To = item.To.Name;
      formdata.Classifier = item.Classifier;
      formdata.IsFork = item.IsFork;
      formdata.SubprocessInOutDefinition = item.SubprocessInOutDefinition;
      formdata.SubprocessName = item.SubprocessName;
      formdata.SubprocessId = item.SubprocessId;
      formdata.SubprocessStartupType = item.SubprocessStartupType;
      formdata.SubprocessStartupParameterCopyStrategy = item.SubprocessStartupParameterCopyStrategy;
      formdata.SubprocessFinalizeParameterMergeStrategy = item.SubprocessFinalizeParameterMergeStrategy;
      formdata.SubprocessSpecifiedParameters = item.SubprocessSpecifiedParameters;
      formdata.MergeViaSetState = item.MergeViaSetState;
      formdata.DisableParentStateControl = item.DisableParentStateControl;
      formdata.ConditionsConcatenationType = item.ConditionsConcatenationType;
      formdata.UserComment = item.UserComment;
      me.VueConfig.data.conditionDetails = formdata.ConditionsConcatenationType == 'Or';

      formdata.AllowConcatenationType = item.AllowConcatenationType;
      formdata.RestrictConcatenationType = item.RestrictConcatenationType;
      me.VueConfig.data.restrictionDetails = formdata.AllowConcatenationType == 'Or' || formdata.RestrictConcatenationType == 'Or';

      formdata.Annotations = Array.isArray(item.Annotations) ? WorkflowDesignerCommon.clone(item.Annotations) : [];
      formdata.Conditions = Array.isArray(item.Conditions) ? WorkflowDesignerCommon.clone(item.Conditions) : [];
      formdata.Conditions.forEach(function (condition) {
        if (!condition.Action)
          condition.Action = {};
      });
      formdata.Restrictions = Array.isArray(item.Restrictions) ? WorkflowDesignerCommon.clone(item.Restrictions) : [];
      formdata.Trigger = {...formdata.Trigger, ...WorkflowDesignerCommon.clone(item.Trigger)};

      if (!formdata.Trigger.Timer) formdata.Trigger.Timer = {};
      if (!formdata.Trigger.Command) formdata.Trigger.Command = {};

      formdata.Restrictions.forEach(function (item) {
        if (!item.Actor) item.Actor = {};
      });

      me.linkItem = item;
      me.VueConfig.data.prevName = item.Name;
      me.VueConfig.data.readonly = me.graph.Settings.readonly;
      me.VueConfig.data.itemHasComment = formdata.UserComment != null && formdata.UserComment.length > 0;

            me.VueConfig.data.conditions = me.graph.getConditionNames();
            me.VueConfig.data.timers = me.graph.getTimerNames();
            me.VueConfig.data.commands = me.graph.getCommandNames();
            me.VueConfig.data.actors = me.graph.getActorNames();

            me.VueConfig.data.activities = me.graph.data.Activities;

      if (formdata.Annotations.length > 0)
        me.VueConfig.data.expertMode = true;

      if (formdata.IsFork && (!formdata.SubprocessInOutDefinition || formdata.SubprocessInOutDefinition === 'Auto'))
        me.VueConfig.data.expertMode = true;

      if (formdata.SubprocessId !== null && formdata.SubprocessId !== undefined && formdata.SubprocessId !== '') {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.SubprocessName !== null && formdata.SubprocessName !== undefined && formdata.SubprocessName !== '' && formdata.SubprocessName !== formdata.Name) {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.SubprocessStartupParameterCopyStrategy !== null && formdata.SubprocessStartupParameterCopyStrategy !== undefined
        && formdata.SubprocessStartupParameterCopyStrategy !== '' && formdata.SubprocessStartupParameterCopyStrategy !== 'CopyAll') {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.SubprocessFinalizeParameterMergeStrategy !== null && formdata.SubprocessFinalizeParameterMergeStrategy !== undefined
        && formdata.SubprocessFinalizeParameterMergeStrategy !== '' && formdata.SubprocessFinalizeParameterMergeStrategy !== 'OverwriteAllNulls') {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.DisableParentStateControl) {
        me.VueConfig.data.expertMode = true;
      }

      function findInObj(obj, func) {
        for (var i = 0; i < obj.length; ++i) {
          if (func(obj[i])) return true;
        }

                return false;
            }

      if (findInObj(formdata.Conditions, function (item) {
        return item.ResultOnPreExecution !== undefined && item.ResultOnPreExecution !== null;
      })) {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.InlinedFinalActivityName) {
        me.VueConfig.data.expertMode = true;
      }

      if (formdata.Conditions.length === 1 && formdata.Conditions[0].Type === 'Always') {
        formdata.conditionType = 'Always';
      } else if (formdata.Conditions.length === 1 && formdata.Conditions[0].Type === 'Otherwise') {
        formdata.conditionType = 'Otherwise';
      } else {
        formdata.conditionType = 'Conditional';
      }

      me.VueConfig.data.originalItem = WorkflowDesignerCommon.clone(formdata);
    };

    me.VueConfig.methods.isFromInline = function () {
      var from = me.VueConfig.data.FormData.From;
      var activities = me.VueConfig.data.activities;
      return activities.filter(function (a) {
        return a.Name == from && a.ActivityType === 'Inline';
      }).length > 0;
    };

    me.VueConfig.methods.triggerClick = function (type) {
      var formdata = me.VueConfig.data.FormData;
      formdata.Trigger.Type = type;
      formdata.Timer = {};
      formdata.Command = {};
      formdata.Restrictions = [];
      if (type === 'Timer') {
        formdata.SubprocessStartupType = undefined;
      }
    };

    me.VueConfig.methods.subprocessClick = function (type) {
      var formdata = me.VueConfig.data.FormData;
      switch (type) {
        case 'None':
          formdata.IsFork = false;
          formdata.SubprocessInOutDefinition = undefined;
          break;
        case 'Start':
          formdata.IsFork = true;
          formdata.SubprocessInOutDefinition = 'Start';
          break;
        case 'Finalize':
          formdata.IsFork = true;
          formdata.SubprocessInOutDefinition = 'Finalize';
          break;
        case 'Auto':
          formdata.IsFork = true;
          formdata.SubprocessInOutDefinition = 'Auto';
          break;
        default:
          formdata.IsFork = false;
          formdata.SubprocessInOutDefinition = undefined;
          break;
      }
    };

    me.VueConfig.methods.getSubprocessStyle = function (type) {
      switch (type) {
        case 'None':
          return 'background-color:#CCCCCC;color:white;';
        case 'Start':
          return 'background-color:#27AE60;color:white;';
        case 'Finalize':
          return 'background-color:#2980B9;color:white;';
        case 'Auto':
          return 'background-color:#7F8C8D;color:white;';
        default:
          return 'background-color:#CCCCCC;color:white;';
      }
    };

    me.VueConfig.methods.conditionClick = function (type) {
      var formdata = me.VueConfig.data.FormData;
      formdata.conditionType = type;

      var conditions = formdata.Conditions;
      conditions.splice(0, conditions.length);
      if (type == 'Always') {
        conditions.push({Type: 'Always', Action: {}});
      } else if (type == 'Otherwise') {
        conditions.push({Type: 'Otherwise', Action: {}});
      } else if (type == 'Conditional') {
        conditions.push({Type: 'Expression', Expression: null, Action: {ActionParameter: null}});
      }
    };

    me.VueConfig.methods.commandParameters = function () {
      var windowId = me.id + '_commandParameters';
      var name = me.VueConfig.data.FormData.Trigger.Command.Name;

      var item = me.getCommandItem(me.VueConfig.data.FormData.Trigger.Command.Name);
      if (!item) return;

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

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

        me.getCommandItem = function (commandName) {
            return me.graph.data.Commands.find(function (command) {
                    return command.Name === commandName;
            });
        };

        me.VueConfig.methods.commandsListChange = function (commandName) {
            if (!me.getCommandItem(commandName)) {
                me.graph.data.Commands.push({Name: commandName, InputParameters: []});
            }
        };

    me.VueConfig.methods.timersWindow = function () {
      var windowId = me.id + '_timers';

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

      me.parametersform.show('timers');
    };

    me.VueConfig.methods.showUserComment = function () {
      me.VueConfig.data.itemHasComment = true;
    };

    me.VueConfig.methods.hasConditionAnyAction = function () {
      var result = false;
      for (var i = 0; i < me.VueConfig.data.FormData.Conditions.length; i++) {
        if (me.VueConfig.data.FormData.Conditions[i].Type === 'Action') {
          result = true;
          break;
        }
      }
      return result;
    };

    me.VueConfig.methods.getClassifierStyle = function (classifier, type) {
      if (classifier != type) {
        return '';
      }
      if (classifier == WorkflowDesignerConstants.NotSpecified) {
        return 'background-color:#7F8C8D;color:white;';
      } else if (classifier == 'Direct') {
        return 'background-color:#27AE60;color:white;';
      } else if (classifier == 'Reverse') {
        return 'background-color:#2980B9;color:white;';
      }
    };

    me.VueConfig.methods.setCurrentItem = function (item) {
      this.currentItem = item;
    };
    me.VueConfig.methods.querySearch = function (queryString, cb) {
      if (me.VueConfig.data.readonly)
        return cb([]);

      var res = me.graph.getAutoCompleteSuggestions2('conditionparameter', this.currentItem.Action.ActionName, queryString);
      cb(res);
    };

    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 isValid = true;
          me.graph.data.Transitions.forEach(function (a) {
            if (a != me.linkItem && 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.showjson = function (name, item, params) {
      me.VueConfig.data.editItem = item;
      me.editItem = item;

      var onSuccess = function (value) {
        if (me.editItem) {
          WorkflowDesignerCommon.setValueByPropertyName(me.editItem, name, value);
          me.VueConfig.data.editItem = undefined;
          delete me.editItem;
        }
      };

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

      var value = WorkflowDesignerCommon.getValueByPropertyName(item, name);
      me.VueConfig.data.jsonform = me.showjson(value, params, onSuccess, onClose);
    };

    me.VueConfig.methods.addRow = function (items, def) {
      items.push(def ? def : {});
    };

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

    me.VueConfig.methods.validateField = function (name, item) {
      if (name != 'Name' && name != 'Actor.Name' && name != 'Type' && name != 'Action.ActionName' && name != 'Expression')
        return;

      if (!WorkflowDesignerCommon.getValueByPropertyName(item, name)) {
        return WorkflowDesignerConstants.FieldIsRequired;
      }

      if (name == 'Type') {
        var conditions = me.VueConfig.data.FormData.Conditions;
        var labels = me.VueConfig.data.labels;
        if (item.Type == 'Always' && conditions.filter(function (c) {
          return c.Type == item.Type;
        }).length > 1) {
          return labels.AlwaysConditionShouldBeSingle;
        }

        if (item.Type == 'Otherwise' && conditions.filter(function (c) {
          return c.Type == item.Type;
        }).length > 1) {
          return labels.OtherwiseConditionShouldBeSingle;
        }
      }
    };

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

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

      if (Array.isArray(data.Conditions) && data.Conditions.length == 0) {
        me.VueConfig.data.showconditionerror = WorkflowDesignerConstants.TransitionFormLabel.ConditionsListShouldNotBeEmpty;
        return false;
      }

      for (var i = 0; i < data.Conditions.length; i++) {
        var item = data.Conditions[i];
        if (validateFunc('Type', item) ||
          (item.Type == 'Action' && validateFunc('Action.ActionName', item)) ||
          (item.Type == 'Expression' && validateFunc('Expression', item)))
          return false;
      }

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

      return true;
    };

    me.VueConfig.methods.onSave = function () {
      if (this.$refs && this.$refs.form && me.VueConfig.methods.validate()) {
        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 (WorkflowDesignerCommon.deepCompare(originalItem, item)) {
        me.onClose(true);
      } else {
        me.showConfirm();
        return false;
      }
    };

    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>
