<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">
          <input
            class="w-100"
            name="subflow-model-name"
            onchange="initPage()"
            value
          />
        </div>
        <div class="col-1 text-right">模块:</div>
        <div class="col-2">
          <input
            type="text"
            class="w-100"
            name="subflow-model-select"
            onchange="initPage()"
            value
          />
        </div>

        <div class="col text-right">
          <button name="btnSearch">查询</button>
          <button name="btnReset">重置</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.formName}}</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("moduleId", params.moduleId);

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

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

    function initPage() {
      pageNum = 1;
    }

    function getSubFlow(appId, pageNum, subject, modulename) {
      var getFlowList = {
        methods: "get",
        url: `${params.contextPath}/designtime/applications/${appId}/modules/workflows/flexGetForms?formName=${subject}&moduleName=${modulename}&pageNo=${pageNum}`,
        success: function(result) {
          // console.log(result);
          
          if (result && result != null && result != "") {
            var formList = JSON.parse(result);
            var modelArray = formList.data.data;
            var totalPages = formList.data.pageCount;
            $(".workflows-subflow-content").html("");
            renderSubFlowTable(modelArray);
            renderPagination(totalPages);
          }else{
            $(".workflows-subflow-content").html("");
            renderPagination(0);
          }
        }
      };
      ajax(getFlowList);
    }

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

      for (var i = 0; i < models.length; i++) {
        var option = "<option>" + models[i] + "</option>";
        $subFlowModelSelect.append(option);
      }
    }

    function renderSubFlowTable(models) {
      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();
        var formFields;
        for (var i = 0; i < tableData.models.length; i++) {
          var form = tableData.models[i];
          if (form.id == id) {
            formFields = form.formFields;
            break;
          }
        }

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

      $(".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>
