<h3>{{ labels.Title }}</h3>
<div class="WorkflowDesignerWindowForm">
  <h4>{{ Name }}</h4>
  <el-tabs tab-position="top">
    <el-tab-pane :label="labels.GeneralTabLabel">
      <el-form ref="form"
               :model="FormData"
               label-position="top"
               label-width="150px">
        <el-form-item v-if="Id" :label="labels.ProcessIdLabel">
          <el-input v-model="Id" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item :label="labels.TagsLabel">
          <el-select v-model="Tags" :disabled="readonly" :placeholder="labels.TagsInputPlaceholder" allow-create filterable multiple
                     style="width: 100%;" :reserve-keyword="false"></el-select>
        </el-form-item>
        <el-form-item :label="labels.WorkCalendar">
          <el-select
            v-model="CalendarName"
            filterable
            remote
            :placeholder="labels.CalendarPlaceholder"
            :remote-method="SearchCalendar"
            :CalendarLoading="CalendarLoading"
            clearable
            :class="CalendarExists(CalendarName) ? '' : 'WorkflowDesignerInputError'"
            @clear="CalendarClear">
            <el-option
              v-for="item in ShownCalendars"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="CanBeInlined" :active-text="InlineLabel" :disabled="readonly"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="LogEnabled" :active-text="LogEnabledLabel" :disabled="readonly"></el-switch>
        </el-form-item>
        <el-form-item v-if="Id">
          <el-switch v-model="IsObsolete" :active-text="labels.IsObsolete" :disabled="readonly"></el-switch>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane v-if="Id" :label="labels.ProcessParametersTabName">
      <el-collapse v-model="activeProcesses">
        <el-collapse-item name="Root" title="Root">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.ParametersNameLabel }}</th>
              <th>{{ labels.ParametersValueLabel }}</th>
              <th></th>
            </tr>
            <tr v-for="(item, index) in ProcessParameters" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.Value" :readonly="true"></el-input>
              </td>
              <td class="WorkflowDesignerTableEditButtons">
                <el-button :style="editItem == item ? 'background-color: rgba(0,0,0,.15);' : ''"
                           class="WorkflowDesignerTableCodeActionsButton"
                           @click="showjson('Value', item)"></el-button>
              </td>
            </tr>
          </table>
        </el-collapse-item>
        <el-collapse-item v-for="(SubprocessItem, SubprocessIndex) in SubprocessInfo" v-if="SubprocessInfo" :name="SubprocessIndex"
                          :title="SubprocessIndex" :key="SubprocessIndex">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.ParametersNameLabel }}</th>
              <th>{{ labels.ParametersValueLabel }}</th>
              <th></th>
            </tr>
            <tr v-for="(item, index) in SubprocessItem.ProcessParameters.filter(function(p){ return p.Purpose != 'System'; })" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.Value" :readonly="true"></el-input>
              </td>
              <td class="WorkflowDesignerTableEditButtons">
                <el-button :style="editItem == item ? 'background-color: rgba(0,0,0,.15);' : ''"
                           class="WorkflowDesignerTableCodeActionsButton"
                           @click="showjson('Value', item)"></el-button>
              </td>
            </tr>
          </table>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane v-if="Id" :label="labels.SystemParametersTabName">
      <el-collapse v-model="activeProcesses">
        <el-collapse-item name="Root" title="Root">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.ParametersNameLabel }}</th>
              <th>{{ labels.ParametersValueLabel }}</th>
              <th></th>
            </tr>
            <tr v-for="(item, index) in SystemProcessParameters" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.Value" :readonly="true"></el-input>
              </td>
              <td class="WorkflowDesignerTableEditButtons">
                <el-button :style="editItem == item ? 'background-color: rgba(0,0,0,.15);' : ''"
                           class="WorkflowDesignerTableCodeActionsButton"
                           @click="showjson('Value', item)"></el-button>
              </td>
            </tr>
          </table>
        </el-collapse-item>
        <el-collapse-item v-for="(SubprocessItem, SubprocessIndex) in SubprocessInfo" v-if="SubprocessInfo" :name="SubprocessIndex"
                          :title="SubprocessIndex" :key="SubprocessIndex">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.ParametersNameLabel }}</th>
              <th>{{ labels.ParametersValueLabel }}</th>
              <th></th>
            </tr>
            <tr v-for="(item, index) in SubprocessItem.ProcessParameters.filter(function(p){ return p.Purpose == 'System'; })" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.Value" :readonly="true"></el-input>
              </td>
              <td class="WorkflowDesignerTableEditButtons">
                <el-button :style="editItem == item ? 'background-color: rgba(0,0,0,.15);' : ''"
                           class="WorkflowDesignerTableCodeActionsButton"
                           @click="showjson('Value', item)"></el-button>
              </td>
            </tr>
          </table>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane v-if="Id" :label="labels.TimersTabName">
      <el-collapse v-model="activeProcesses">
        <el-collapse-item name="Root" title="Root">
          <table class="WorkflowDesignerTable">
            <tr>
              <th>{{ labels.TimersTabNameLabel }}</th>
              <th>{{ labels.TimersTabValueLabel }}</th>
            </tr>
            <tr v-for="(item, index) in ProcessTimers" :key="index">
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.NextExecutionDateTime" :readonly="true"></el-input>
              </td>
            </tr>
          </table>
        </el-collapse-item>
        <el-collapse-item v-for="(SubprocessItem, SubprocessIndex) in SubprocessInfo" v-if="SubprocessInfo" :name="SubprocessIndex"
                          :title="SubprocessIndex" :key="SubprocessIndex">
          <table class="WorkflowDesignerTable">
            <tr>
              <th>{{ labels.TimersTabNameLabel }}</th>
              <th>{{ labels.TimersTabValueLabel }}</th>
            </tr>
            <tr v-for="(item, index) in SubprocessItem.ProcessTimers" :key="index">
              <td>
                <el-input v-model="item.Name" :readonly="true"></el-input>
              </td>
              <td>
                <el-input v-model="item.NextExecutionDateTime" :readonly="true"></el-input>
              </td>
            </tr>
          </table>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane v-if="Id" :label="labels.HistoryTabName">
      <el-collapse v-model="activeProcesses">
        <el-collapse-item :title="'Root' + ' \| CurrentPage: ' + CurrentPage+ ' \| Items count: ' + ProcessHistoryCount" name="Root">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.HistoryTabStartTimeLabel }}</th>
              <th>{{ labels.HistoryTabTimeLabel }}</th>
              <th>{{ labels.HistoryTabTriggerNameLabel }}</th>
              <th>{{ labels.HistoryTabFromLabel }}</th>
              <th>{{ labels.HistoryTabToLabel }}</th>
              <th>{{ labels.HistoryTabExecutorLabel }}</th>
              <th>{{ labels.HistoryTabActorLabel }}</th>
              <th>{{ labels.HistoryTabTransitionClassifierNameLabel }}</th>
              <th>{{ labels.HistoryTabDurationLabel }}</th>
            </tr>
            <tr v-for="(item, index) in ProcessHistory" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>{{ getFormatDate(item.StartTransitionTime) }}</td>
              <td>{{ getFormatDate(item.TransitionTime) }}</td>
              <td>{{ item.TriggerName }}</td>
              <td>{{ item.FromActivityName }} <span v-if="item.FromStateName" style="white-space: nowrap;">({{ item.FromStateName }})</span>
              </td>
              <td>{{ item.ToActivityName }} <span v-if="item.ToStateName" style="white-space: nowrap;">({{ item.ToStateName }})</span></td>
              <td>
                <el-popover
                  v-if="item.ExecutorIdentityId != null"
                  :title="labels.HistoryTabExecutorIdLabel"
                  placement="bottom"
                  trigger="hover"
                  width="200">
                  {{ item.ExecutorIdentityId }}
                  <template #reference style="white-space:nowrap">
                    {{ item.ExecutorName }}
                    <el-icon>
                      <icon-info-filled />
                    </el-icon>
                  </template>
                </el-popover>
              </td>
              <td>
                <el-popover
                  v-if="item.ActorIdentityId != null"
                  :title="labels.HistoryTabActorIdLabel"
                  placement="bottom"
                  trigger="hover"
                  width="200">
                  {{ item.ActorIdentityId }}
                  <template #reference style="white-space:nowrap">
                    {{ item.ActorName }}
                    <el-icon>
                      <icon-info-filled />
                    </el-icon>
                  </template>
                </el-popover>
              </td>
              <td>{{ item.TransitionClassifier == 0 ? 'Not Specified' : (item.TransitionClassifier == 1 ? 'Direct' : 'Reverse') }}</td>
              <td>{{ item.TransitionDuration }}</td>
            </tr>
          </table>
          <!-- <div>
              <p>{{'CurrentPage: ' + CurrentPage}}<br>{{'Items count: ' + ProcessHistoryCount}}</p>
          </div> -->
          <div>
            <el-link v-if="CurrentPage != 1" type="primary" @click="LoadProcessHistory(1, ProcessId)">first page</el-link>
            <a v-if="CurrentPage != 1">|</a>
            <el-link v-if="CurrentPage > 1" type="primary" @click="LoadProcessHistory(CurrentPage - 1, ProcessId)">prev page</el-link>
            <a v-if="CurrentPage > 1">|</a>
            <el-link v-if="CurrentPage < LastPage" type="primary" @click="LoadProcessHistory(CurrentPage + 1, ProcessId)">next page
            </el-link>
            <a v-if="CurrentPage < LastPage">|</a>
            <el-link v-if="CurrentPage != LastPage" type="primary" @click="LoadProcessHistory(LastPage, ProcessId)">last page</el-link>
          </div>
        </el-collapse-item>
        <el-collapse-item v-for="(SubprocessItem, SubprocessIndex) in SubprocessInfo"
                          v-if="SubprocessInfo"
                          :name="SubprocessIndex "
                          :title="SubprocessIndex + ' \| CurrentPage: ' + SubprocessItem.CurrentPage+ ' \| Items count: ' + SubprocessItem.ProcessHistoryCount"
                          :key="SubprocessIndex">
          <table class="WorkflowDesignerTable">
            <tr>
              <th></th>
              <th>{{ labels.HistoryTabStartTimeLabel }}</th>
              <th>{{ labels.HistoryTabTimeLabel }}</th>
              <th>{{ labels.HistoryTabTriggerNameLabel }}</th>
              <th>{{ labels.HistoryTabFromLabel }}</th>
              <th>{{ labels.HistoryTabToLabel }}</th>
              <th>{{ labels.HistoryTabExecutorLabel }}</th>
              <th>{{ labels.HistoryTabActorLabel }}</th>
              <th>{{ labels.HistoryTabTransitionClassifierNameLabel }}</th>
              <th>{{ labels.HistoryTabDurationLabel }}</th>
            </tr>
            <tr v-for="(item, index) in SubprocessItem.ProcessHistory" :key="index">
              <td class='WorkflowDesignerTableMoveCol'></td>
              <td>{{ getFormatDate(item.StartTransitionTime) }}</td>
              <td>{{ getFormatDate(item.TransitionTime) }}</td>
              <td>{{ item.TriggerName }}</td>
              <td>{{ item.FromActivityName }} <span v-if="item.FromStateName" style="white-space: nowrap;">({{ item.FromStateName }})</span>
              </td>
              <td>{{ item.ToActivityName }} <span v-if="item.ToStateName" style="white-space: nowrap;">({{ item.ToStateName }})</span></td>
              <td>
                <el-popover
                  v-if="item.ExecutorIdentityId != null"
                  :title="labels.HistoryTabExecutorIdLabel"
                  placement="bottom"
                  trigger="hover"
                  width="200">
                  {{ item.ExecutorIdentityId }}
                  <template #reference style="white-space:nowrap">
                    {{ item.ExecutorName }}
                    <el-icon>
                      <icon-info-filled />
                    </el-icon>
                  </template>
                </el-popover>
              </td>
              <td>
                <el-popover
                  v-if="item.ActorIdentityId != null"
                  :title="labels.HistoryTabActorIdLabel"
                  placement="bottom"
                  trigger="hover"
                  width="200">
                  {{ item.ActorIdentityId }}
                  <template #reference style="white-space:nowrap">
                    {{ item.ActorName }}
                    <el-icon>
                      <icon-info-filled />
                    </el-icon>
                  </template>
                </el-popover>
              </td>
              <td>{{ item.TransitionClassifier == 0 ? 'Not Specified' : (item.TransitionClassifier == 1 ? 'Direct' : 'Reverse') }}</td>
              <td>{{ item.TransitionDuration }}</td>
            </tr>
          </table>
          <!-- <div>
              <p>{{'CurrentPage: ' + SubprocessItem.CurrentPage}}<br>{{'Items count: ' + SubprocessItem.ProcessHistoryCount}}</p>
          </div> -->
          <div>
            <el-link v-if="SubprocessItem.CurrentPage != 1" type="primary" @click="LoadSubprocessHistory(1, SubprocessItem.ProcessId)">first
              page
            </el-link>
            <a v-if="SubprocessItem.CurrentPage != 1">|</a>
            <el-link v-if="SubprocessItem.CurrentPage > 1"
                     type="primary" @click="LoadSubprocessHistory(SubprocessItem.CurrentPage - 1, SubprocessItem.ProcessId)">prev page
            </el-link>
            <a v-if="SubprocessItem.CurrentPage > 1">|</a>
            <el-link v-if="SubprocessItem.CurrentPage < SubprocessItem.LastPage"
                     type="primary" @click="LoadSubprocessHistory(SubprocessItem.CurrentPage + 1, SubprocessItem.ProcessId)">next page
            </el-link>
            <a v-if="SubprocessItem.CurrentPage < SubprocessItem.LastPage">|</a>
            <el-link v-if="SubprocessItem.CurrentPage != SubprocessItem.LastPage"
                     type="primary" @click="LoadSubprocessHistory(SubprocessItem.LastPage, SubprocessItem.ProcessId)">last page
            </el-link>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
  </el-tabs>
</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 processinfo_Data(me) {
    const {graph} = me;
    const {designer} = graph;

    return {
      readonly: false,
      editItem: undefined,
      activeProcesses: ['Root'],
      FormData: {},
      Tags: [],
      CanBeInlined: null,
      LogEnabled: !!designer.processId ? designer.LogEnabled : me.graph.data.LogEnabled,
      IsObsolete: false,
      ProcessTimers: [],
      ProcessParameters: [],
      SystemProcessParameters: [],
      ProcessHistory: [],
      LastPage: undefined,
      CurrentPage: undefined,
      ProcessHistoryCount: undefined,
      ProcessId: undefined,
      Name: '',
      Id: undefined,
      SubprocessInfo: undefined,
      CalendarName: '',
      LoadedCalendars: [],
      ShownCalendars: [],
      CalendarLoading: false
    }
  }

  function processinfo_Init(me) {
    const {VueConfig, graph} = me;
    const {state: data, methods} = VueConfig;
    const {designer} = graph;
    const isProcess = !!designer.processId;

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.ProcessInfoFormLabel,
        InlineLabel: WorkflowDesignerConstants.Elements.InlineHeader,
        LogEnabledLabel: WorkflowDesignerConstants.Logs.Label,
        ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel
      });
    }

    methods.UpdateLanguage();

    methods.onUpdate = function () {
      data.CalendarName = me.graph.data.CalendarName;
      data.Tags = WorkflowDesignerCommon.clone(graph.data.Tags);
      data.CanBeInlined = graph.data.CanBeInlined;
      data.LogEnabled = isProcess ? designer.LogEnabled : me.graph.data.LogEnabled;
      data.Name = graph.data.Name;
      if (graph.data.Id && graph.data.Id !== '00000000-0000-0000-0000-000000000000') {
        data.Id = graph.data.Id
      } else {
        data.Id = undefined;
      }

      var additionalParams = graph.data.AdditionalParams;

      data.IsObsolete = additionalParams.IsObsolete;
      data.ProcessTimers = WorkflowDesignerCommon.clone(additionalParams.ProcessTimers);

      if (Array.isArray(additionalParams.ProcessParameters)) {
        data.ProcessParameters = WorkflowDesignerCommon.clone(additionalParams.ProcessParameters.filter(function (p) {
          return p.Purpose != 'System';
        }));
        data.SystemProcessParameters = WorkflowDesignerCommon.clone(additionalParams.ProcessParameters.filter(function (p) {
          return p.Purpose == 'System';
        }));
      }

      data.SubprocessInfo = WorkflowDesignerCommon.clone(additionalParams.SubprocessInfo);
      data.ProcessHistory = WorkflowDesignerCommon.clone(additionalParams.ProcessHistory);

      data.CurrentPage = WorkflowDesignerCommon.clone(additionalParams.CurrentPage);
      data.LastPage = WorkflowDesignerCommon.clone(additionalParams.LastPage);
      data.ProcessId = WorkflowDesignerCommon.clone(additionalParams.ProcessId);
      data.ProcessHistoryCount = WorkflowDesignerCommon.clone(additionalParams.ProcessHistoryCount);
      data.readonly = graph.Settings.readonly;
      data.LoadedCalendars = methods.LoadCalendars();
    };

    methods.getFormatDate = function (stringDate) {
      let date = new Date(stringDate);
      let options = {
        hour12: false,
        month: '2-digit',
        day: '2-digit',
        year: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      };
      return date.toLocaleString(options) + '. ' + date.getMilliseconds();
    }


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

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

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

      var params = {
        name: item['LastError'],
        type: item['Type']
      };
      data.jsonform = me.showjson(item[name], params, onSuccess, onClose);
    };

    methods.onSave = function () {
      graph.data.CalendarName = data.CalendarName;
      graph.data.Tags = WorkflowDesignerCommon.clone(data.Tags);
      graph.data.CanBeInlined = data.CanBeInlined;
      graph.setInlinedFlag(graph.data.CanBeInlined);
      if (this.LogEnabled !== (isProcess ? designer.LogEnabled : me.graph.data.LogEnabled)) {
        isProcess ? designer.changelogenabled() : me.graph.setLogEnabled(this.LogEnabled);
      }
      me.onClose(true);
    };

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

    methods.onClose = function () {

      if (data.readonly) {
        me.onClose(true);
        return;
      }

      if (!data.readonly
        && (!WorkflowDesignerCommon.compareArray(graph.data.Tags, data.Tags)
          || graph.data.CanBeInlined !== data.CanBeInlined
          || graph.data.LogEnabled !== data.LogEnabled)) {

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

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

    methods.LoadProcessHistory = function (page, ProcessId) {
      var params = {};
      params.processidforrequest = ProcessId;
      params.pagingindex = page;
      params.pagingsize = data.PageSize;
      var history = designer.getprocesshistorypage(params);
      data.ProcessHistory = WorkflowDesignerCommon.clone(history);
      data.CurrentPage = page;
    };
    methods.LoadSubprocessHistory = function (page, ProcessId) {
      var params = {};
      params.processidforrequest = ProcessId;
      params.pagingindex = page;
      params.pagingsize = data.PageSize;
      var history = designer.getprocesshistorypage(params);

      for (subprocess in data.SubprocessInfo) {
        if (data.SubprocessInfo[subprocess].ProcessId == ProcessId) {
          data.SubprocessInfo[subprocess].ProcessHistory = WorkflowDesignerCommon.clone(history);
          data.SubprocessInfo[subprocess].CurrentPage = page;
        }
      }
    };

    methods.CreateFilter = function (queryString) {
      return link => link.toLowerCase().indexOf(queryString.toLowerCase()) > -1
    }

    methods.CalendarClear = function () {
      data.ShownCalendars = [];
    }

    methods.LoadCalendars = function () {
      return designer.getcalendars();
    }

    methods.SearchCalendar = function (query) {
      if (query !== '') {
        data.CalendarLoading = true;
        const createFilter = methods.CreateFilter;
        const calendars = data.LoadedCalendars;
        data.ShownCalendars = calendars.filter(createFilter(query));
        data.CalendarLoading = false;
      } else {
        data.ShownCalendars = data.LoadedCalendars;
      }
    }

    methods.CalendarExists = function (calendarName) {
      if (calendarName !== '' && calendarName !== null) {
        const calendar = data.LoadedCalendars.find(item => item === calendarName);
        return !!calendar
      }
      return true;
    }

  }
</script>
