<h3>{{ labels.Title }}</h3>

<div class="WorkflowDesignerWindowForm" style="display: flex; flex-direction: column; gap: 15px;">
  <el-input v-model="mainSchemeCode" :placeholder="labels.MainSchemeCode" :disabled="uploaded"></el-input>
  <el-checkbox v-model="overwriteExisting" :disabled="uploaded">{{ labels.OverwriteExisting }}</el-checkbox>
  <div class="WFEUploadLog">
    <el-input v-model="resultLog" :rows="10" type="textarea" readonly></el-input>
    <el-button icon="IconCopyDocument" @click="copy()"></el-button>
  </div>
</div>

<div class="WorkflowDesignerButtons">
  <el-button v-if="!readonly && !uploaded" type="primary" @click="onUpload">{{ labels.Upload }}</el-button>
  <el-button @click="onClose" :type="redrawAfterClose ? 'primary' : undefined">
    {{ redrawAfterClose ? labels.Rerender : ButtonTextClose }}</el-button>
</div>

<script type="application/javascript">
  function uploadBpmn_Data(me) {
    return {
        readonly: false,
        overwriteExisting: false,
        mainSchemeCode: me.graph.designer?.data?.Name ?? '',
        resultLog: WorkflowDesignerConstants.UploadBpmnLabel.UploadHint,
        uploaded: false,
        redrawAfterClose: false
      }
  }

  function uploadBpmn_Init(me) {
    const {VueConfig, graph} = me;
    const {state: data, methods} = VueConfig;
    const {designer, Settings} = graph;


    function initData() {
      Object.assign(data, {
        readonly: false,
        overwriteExisting: false,
        mainSchemeCode: designer?.data?.Name ?? '',
        resultLog: data.labels.UploadHint,
        uploaded: false,
        redrawAfterClose: false
      });
    }

    initData();

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.UploadBpmnLabel,
        ButtonTextClose: WorkflowDesignerConstants.ButtonTextClose,
      });
    }

    methods.UpdateLanguage();

    methods.onUpdate = function (value) {
      initData();
      data.value = value;
      data.readonly = Settings.readonly;
    };

    methods.onUpload = function () {
      const settings = {
        overwriteExisting: data.overwriteExisting,
        mainSchemeCode: data.mainSchemeCode
      }
      designer.uploadbpmn(data.value, settings, showUploadResult);
      data.uploaded = true;
    };

    methods.copy = function () {
      me.copyToClipboard(data.resultLog, false);
    };

    methods.onClose = function () {
      if (data.redrawAfterClose) {
        designer.data = data.newScheme;
        designer.render();
      }
      me.onClose(true);
    };

    function showUploadResult(result, designer) {
      data.resultLog = result.ResultLog;
      const newScheme = result.MainProcessScheme;
      data.redrawAfterClose = false;
      if (newScheme && newScheme.Name === designer.data?.Name) {
        data.redrawAfterClose = true;
        data.newScheme = newScheme;
      }
    }
  }
</script>
