<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
  <!--    页面样式-->
  <style type="text/css">
      /*标题样式*/

      .main {
          background: rgba(7, 10, 88, 0.99);
      }

      body {
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          font-size: 1rem;
          font-weight: 400;
          line-height: 1.5;
          color: #212529;
          text-align: left;
          background-color: #fff;
      }

      .title {
          width: auto;
          height: 80px;
          text-align: center;
          font: bolder 30px/80px "Microsoft YaHei UI";
          color: #fff;
          background: rgba(3, 14, 70, 0.5);
          border-bottom: solid 1px rgb(3, 14, 70);
          margin-bottom: 10px;
      }

      .content-box {
          width: 100%;
          display: flex;
      }

      .box1 {
          flex: 3;
          margin: 0 10px 0 0;
      }

      .box2 {
          flex: 7;
      }

      .panel {
          position: relative;
          border: 1px solid rgba(25, 186, 139, 0.17);
          background: rgba(3, 14, 70, 0.5);
          padding: 0 10px 10px;
          margin-bottom: 10px;
      }

      .panel h2, .result_table h2 {
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #007bff;
          font-size: 20px;
          font-weight: bold;
          margin: 0;
      }

      .panel .desc {
          height: 210px;
      }

      .panel .desc .info {
          font: normal 18px/25px "Microsoft YaHei UI";
          color: #fff;
          display: flex;
      }

      .panel .desc .info div {
          padding: 10px;
          border: solid 1px #6c757d;
      }

      .panel .desc .info div span {
          margin-left: 20px;
      }

      .btn {
          display: inline-block;
          font-weight: 400;
          color: #212529;
          text-align: center;
          vertical-align: middle;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          background-color: transparent;
          border: 1px solid transparent;
          padding: .375rem .75rem;
          font-size: 1rem;
          line-height: 1.5;
          border-radius: .25rem;
          transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      }

      .btn-primary {
          color: #fff;
          background-color: #007bff;
          border-color: #007bff;
      }

      .btn-group-sm > .btn, .btn-sm {
          padding: .25rem .5rem;
          font-size: .875rem;
          line-height: 1.5;
          border-radius: .2rem;
      }

      [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
          cursor: pointer;
      }

      .btn:not(:disabled):not(.disabled) {
          cursor: pointer;
      }

      /* 执行信息样式   */
      .result_table {
          display: block;
          width: 100%;
          padding: 0 10px;
          background: rgba(3, 14, 70, 0.5);

      }

      .table {
          width: 100%;
          margin-bottom: 1rem;
          border-collapse: collapse;
          display: table;
          text-indent: initial;
          border-spacing: 2px;
          border-color: gray;

      }

      .table body {
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          font-size: 1rem;
          font-weight: 400;
          line-height: 1.5;
          color: #212529;
          text-align: left;
          background-color: #fff;
      }

      *, ::after, ::before {
          box-sizing: border-box;
      }

      .table td, .table th {
          border: solid 1px #5765a4 !important;
          padding: 0 !important;
          line-height: 40px;
          text-align: center;
          height: 40px;
          color: #fff;
      }

      .table thead th {
          vertical-align: bottom;
          border-bottom: 2px solid #dee2e6;
      }

      .table .text-light {
          color: #f8f9fa !important;
      }

      .table tbody {
          display: table-row-group;
          vertical-align: middle;
          border-color: inherit;
      }

      .table tr {
          display: table-row;
          vertical-align: inherit;
          border-color: inherit;
      }

      option {
          text-align: center;
          height: 36px;
          font: none 18px/36px "Microsoft YaHei UI";
          color: #28a745 !important;
      }

      pre {
          margin: 0;
          white-space: pre-wrap;
          white-space: -moz-pre-wrap;
          white-space: -o-pre-wrap;
          word-wrap: break-word;
          color: #fff;
          line-height: 22px;
          font-size: 14px
      }

  </style>
</head>

<body>
<div class="main">
  <div class="title">
    {{ title }}
  </div>
  <div class="content-box">
    <div class="box1">
      <div class="panel">
        <h2>执行结果</h2>
        <div class="desc">
          <div class="info">
            <div style="flex:6">
              <button type="button" class="btn btn-primary btn-sm">开始时间</button>
              <span>{{ begin_time }}</span>
            </div>
          </div>
          <div class="info">
            <div style="flex:6">
              <button type="button" class="btn btn-primary btn-sm">运行时长</button>
              <span>{{ duration }}</span>
            </div>
          </div>
          <div class="info">
            <div style="flex:6">
              <button type="button" class="btn btn-primary btn-sm ">测试人员</button>
              <span>{{ tester }}</span>
            </div>
          </div>
          <div class="info">
            <div style="flex:6">
              <button type="button" class="btn btn-primary btn-sm ">测试结果</button>
              <span>通过率 {{ pass_rate }}% （{{ passed }}/{{ total }}）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="panel">
        <h2>基本信息</h2>
        <div class="desc">
          <div class="info">
            <div style="flex:18">
              <button type="button" class="btn btn-primary btn-sm">测试描述</button>
              <span>{{ desc }}</span>
            </div>
          </div>
          <div class="info">
            <div style="flex:18">
              <button type="button" class="btn btn-primary btn-sm">日志详情</button>
              <a href="{{ log_path }}" target="_blank"><span>{{ log_path }}</span></a>
            </div>
          </div>
          <div class="info">
            <div style="flex:18">
              <button type="button" class="btn btn-primary btn-sm">报告详情</button>
              <a href="{{ report_path }}" target="_blank"><span>{{ report_path }}</span></a>
            </div>
          </div>
          <div class="info">
            <div style="flex:18">
              <button type="button" class="btn btn-primary btn-sm">环境信息</button>
              <a href="{{ report_path }}" target="_blank"><span>{{ report_path }}</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="result_table">
    <h2>结果统计</h2>
    <div class="table_data">
      <table class="table" style="color: #fff">
        <thead class="text-light" style="background: rgba(3, 14, 70, 0.5)">
        <tr>
          <th scope="col" style="width: 5%;padding: 0">ID</th>
          <th scope="col" style="width: 25%;padding: 0">模块</th>
          <th scope="col" style="width: 10%;padding: 0">耗时</th>
          <th scope="col" style="width: 10%;padding: 0">总数</th>
          <th scope="col" style="width: 10%;padding: 0">通过</th>
          <th scope="col" style="width: 10%;padding: 0">失败</th>
          <th scope="col" style="width: 10%;padding: 0">阻塞</th>
          <th scope="col" style="width: 10%;padding: 0">跳过</th>
          <th scope="col" style="width: 10%;padding: 0">通过率</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>0</td>
          <td>合计</td>
          <td>{{ duration }}</td>
          <td>{{ total }}</td>
          <td>{{ passed }}</td>
          <td>{{ failed }}</td>
          <td>{{ error }}</td>
          <td>{{ skipped }}</td>
          <td>{{ pass_rate }}%</td>
        </tr>
        {% for name, foo in module_outcome.items() %}
          <tr class="case_">
            <td>{{ loop.index }}</td>
            <td class="{{ name|replace('\\','')|replace('.','') }}"
                style="text-align: left">{{ name.split("\\")[-1] }}</td>
            <td>{{ foo.duration }}</td>
            <td>{{ foo.total }}</td>
            <td>{{ foo.passed }}</td>
            <td>{{ foo.failed }}</td>
            <td>{{ foo.error }}</td>
            <td>{{ foo.skipped }}</td>
            <td>{{ foo.pass_rate }}%</td>
          </tr>
        {% endfor %}
      </table>
    </div>

    <div style="height: 20px"></div>
  </div>

</div>

<script type="text/javascript">

</script>

</body>
</html>