<html>

<head>
  <title>天翎引擎式开发后台</title>
  <!-- <link rel="shortcut icon" type="images/x-icon" href="/designer/resource/images/preview/favicon.ico" media="screen" />
         -->
  <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="style/bootstrap.min.css.map" rel="stylesheet" type="text/css" />
  <link href="style/design.css" rel="stylesheet" type="text/css" />
</head>

<body class="p-2">
  <div class="workflows-subflow-top container-fluid my-2">
    <div class="row">
      <div class="col-1 text-right">模块:</div>
      <div class="col-2">
        <select class="w-100" name="subflow-model-select">
          <!-- <option>1111</option> -->
        </select>
      </div>
      <div class="col-1 text-right">名称:</div>
      <div class="col-2">
        <input class="w-100" name="subflow-model-name" id="subflow-model-name" onchange="initPage(1)" value />
      </div>
      <div class="col text-right">
        <button name="btnSearch">查询</button>
        <button name="btnReset">重置</button>
        <!--                 <button>清空</button> -->
      </div>
    </div>
  </div>
  <div class="workflows-subflow-content"></div>
</body>

<script src="./script/jquery-1.11.3.min.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/template.js"></script>
<script src="script/jquery-bridge.js"></script>
<script type="text" id="subflow-table-tmpl">
    <div class="bpm-table bpm-table-small bpm-table-bordered">
        <div class="bpm-table-content">
            <div class="bpm-table-body">
                <table class="">
                    <thead class="bpm-table-thead">
                        <tr>
                            <th>名称</th>
                            <th>模块</th>
                        </tr>
                    </thead>
                    <tbody class="bpm-table-tbody">
                        {{each models as model}}
                        <tr id="{{model.id}}" class="bpm-table-row">
                            <td>{{model.flowName}}</td>
                            <td>{{model.moduleName}}</td>
                {{each models as model}}

                {{/each}}
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
  </script>
<script type="text" id="subflow-pagination-tmpl">
    <ul class="bpm-pagination bpm-table-pagination mini" unselectable="unselectable">
        {{if pageNum - 1 >0 }}
        <li onclick="nextPage({{pageNum-1}})" title="上一页"  class="bpm-pagination-prev" aria-disabled="true">
            <a class="bpm-pagination-item-link"></a>
        </li>
        {{/if}}
        {{if pageNum - 2 > 0 }}
        <li onclick="nextPage({{pageNum-2}})" title="{{pageNum - 2}}" class="bpm-pagination-item">
            <a>{{pageNum - 2}}</a>
        </li>
        {{/if}}
        {{if pageNum - 1 > 0 }}
        <li onclick="nextPage({{pageNum-1}})" title="{{pageNum - 1}}" class="bpm-pagination-item">
            <a>{{pageNum - 1}}</a>
        </li>
        {{/if}}
        {{if pageNum >0}}
        <li onclick="nextPage({{pageNum}})" title="{{pageNum}}" class="bpm-pagination-item bpm-pagination-item-active">
            <a>{{pageNum}}</a>
        </li>
        {{/if}}
        {{if pageNum + 1 <= totalPages}}
        <li onclick="nextPage({{pageNum+1}})" title="{{pageNum + 1}}" class="bpm-pagination-item">
            <a>{{pageNum+1}}</a>
        </li>
        {{/if}}
        {{if pageNum + 2 <= totalPages}}
        <li onclick="nextPage({{pageNum+2}})" title="{{pageNum + 2}}" class="bpm-pagination-item">
            <a>{{pageNum+2}}</a>
        </li>
        {{/if}}
        {{if pageNum + 1 <= totalPages}}
        <li onclick="nextPage({{pageNum+1}})" title="下一页"  class="bpm-pagination-next" aria-disabled="true">
            <button class="bpm-pagination-item-link"></button>
        </li>
        {{/if}}
    </ul>
  </script>
<script>
  var ajax = function (data) {
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            // resolve(xhr.responseText);
            data.success(xhr.responseText);
          } else {
            reject(xhr.status);
          }
        } else {
          // HTTP请求还在继续...
        }
      };
      xhr.open(data.methods, data.url, true);
      xhr.setRequestHeader("content-type", "application/json");
      delete data.methods;
      delete data.url;
      xhr.send(JSON.stringify(data));
    });
  };
  var params = parent.$.dialog.getArgs();
  var appId = parent.$.dialog.getArgs()["applicationId"];
  // var moduleId = parent.$.dialog.getArgs()['moduleId'];
  // var contextPath = parent.$.dialog.getArgs()['contextPath'];

  // console.log("params---", params);

  var pageNum = 1;
  var tableData;
  $(function () {
    getSubFlow(appId, pageNum, "", "");
    $("button[name='btnSearch']").bind("click", function () {
      initPage(1);
      var modulename = $("select[name='subflow-model-select']").val();
      var subject = $("input[name='subflow-model-name']").val();
      getSubFlow(appId, pageNum, subject, modulename);
    });

    $("button[name='btnReset']").bind("click", function () {
      $("select[name='subflow-model-select']").val("");
      $("input[name='subflow-model-name']").val("");
    });
  });
  function nextPage(pageNo) {
    var modulename = $("select[name='subflow-model-select']").val();
    var subject = $("input[name='subflow-model-name']").val();
    pageNum = pageNo;
    getSubFlow(appId, pageNum, subject, modulename);
  }

  function initPage(e) {
    pageNum = e;
  }

  function getSubFlow(appId, pageNum, subject, modulename) {
    var getFlowList = {
      methods: "get",
      url: `${params.contextPath}/designtime/applications/${appId}/modules/workflows/flexGetBillDefiVOs?flowName=${subject}&moduleName=${modulename}&pageNo=${pageNum}`,
      success: function (result) {
        if (result && result != null && result != "") {
          var resultObj = JSON.parse(result);
          var modelArray = resultObj.data.data;
          var modelNameArray = resultObj.data.modulearray;
          var totalPages = resultObj.data.pageCount;

          $(".workflows-subflow-content").html("");

          renderSubFlowSelect(modelNameArray, modulename);
          renderSubFlowTable(modelArray);
          if (totalPages >= 1) {
            renderPagination(totalPages);
          }
        } else {
          $(".workflows-subflow-content").html("");
          initPage(0);
          renderPagination(0);
        }
      }
    };
    ajax(getFlowList);
  }

  function renderSubFlowSelect(models, isSelectedModel = "") {
    var $subFlowModelSelect = $("select[name='subflow-model-select']");
    // $subFlowModelSelect.html("").append("<option value=''>请选择</option>");

    for (var i = 0; i < models.length; i++) {
      var option = "";

      if (isSelectedModel != "" && isSelectedModel == models[i]) {
        option = "<option selected>" + models[i] + "</option>";
      } else {
        // 判断值为空改为请选择
        if (models[i] == '') {
          option = "<option value=''>请选择</option>";
        } else {
          option = "<option>" + models[i] + "</option>";
        }
      }
      $subFlowModelSelect.append(option);
    }
  }

  function renderSubFlowTable(models) {
    var tableData = {
      models: models
    };
    $html = $(template("subflow-table-tmpl", tableData));

    $html.find(".bpm-table-row").on("click", function () {
      var $this = $(this);
      var id = $this.attr("id");
      var subject = $this.find("td:eq(0)").text();
      var modelName = $this.find("td:eq(1)").text();

      parent.$.dialog.doReturn({
        id: id,
        subject: subject,
        modelName: modelName
      });
    });

    $(".workflows-subflow-content").prepend($html);
  }

  function renderPagination(totalPages) {
    var paginationData = {
      pageNum: pageNum,
      totalPages: totalPages
    };
    $html = $(template("subflow-pagination-tmpl", paginationData));
    $(".workflows-subflow-content").append($html);
  }
</script>

</html>