<!doctype html>
<html lang="en">

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="../index.css" />
  <!-- Import Vue 3 -->
  <script src="../vue.global.prod.js"></script>
  <!-- Import component library -->
  <script src="../index.full.min.js"></script>
  <meta charset="UTF-8">
  <title>Coverage</title>
</head>

<body>
  <div id="app" class="common-layout">
    <el-container>
      <el-header>
        <el-row>
          <span>All Files Coverage</span>
          <el-divider />
        </el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="8">
            <div class="statistic-card">
              <el-statistic :precision="2" :value="tableData.summary.functions.pct">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    Functions
                  </div>
                </template>
                <template #suffix>%</template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>{{tableData.summary.functions.covered}}/{{tableData.summary.functions.total}}</span>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="statistic-card">
              <el-statistic :precision="2" :value="tableData.summary.branches.pct">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    Branches
                  </div>
                </template>
                <template #suffix>%</template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>{{tableData.summary.branches.covered}}/{{tableData.summary.branches.total}}</span>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="statistic-card">
              <el-statistic :precision="2" :value="tableData.summary.lines.pct">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    Lines
                  </div>
                </template>
                <template #suffix>%</template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>{{tableData.summary.lines.covered}}/{{tableData.summary.lines.total}}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-divider />
        </el-row>

        <el-table :data="tableData.files" :default-sort="{ prop: 'file', order: 'ascending' }" :row-class-name="tableRowClassName" border
          style="width: 100%">
          <el-table-column sortable prop="path" label="File" width="600">
            <template #default="scope"> <el-link type="primary"
                :href="scope.row.link">{{scope.row.path}}</el-link></template>
          </el-table-column>
          <el-table-column sortable prop="summary.functions.pct" label="Functions"></el-table-column>
          <el-table-column prop="summary.functions.total,summary.functions.covered" label="">
            <template #default="scope">{{scope.row.summary.functions.covered}}/{{scope.row.summary.functions.total}}</template>
          </el-table-column>
          <el-table-column sortable prop="summary.branches.pct" label="Branches"></el-table-column>
          <el-table-column prop="summary.branches.total,summary.branches.covered" label="">
            <template #default="scope">{{scope.row.summary.branches.covered}}/{{scope.row.summary.branches.total}}</template>
          </el-table-column>
          <el-table-column sortable prop="summary.lines.pct" label="Lines"></el-table-column>
          <el-table-column prop="summary.lines.total,summary.lines.covered" label="">
            <template #default="scope">{{scope.row.summary.lines.covered}}/{{scope.row.summary.lines.total}}</template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer align="middle" class="footer">
        Code coverage generated by <el-link href="https://github.com/SMAT-Lab/bjc" type="primary" target="_blank">bjc</el-link> at {{tableData.date}}
      </el-footer>
    </el-container>
  </div>
</body>

<script>
  const App = {
    data() {
      return {
        tableData: {"date":"Fri Jul 31 2026 16:52:24 GMT+0800 (China Standard Time)","files":[{"version":"bjc v1.0.0","versionCode":10000,"path":"RuntimePermissionRequester.ets","hash":"8b51d39b95c561c7b23e2ed9257077d5e91b056ba2d8ef12ce1fa3f2f9cc4fb7","lineCnt":82,"count":0,"projectPath":"/Users/qinzhiqiang/Git/frontend/h5-in-app-integration/harmonyos-arkts","functions":[{"name":"RuntimePermissionRequester.request","count":0,"regions":[{"startLoc":{"line":22,"col":3},"endLoc":{"line":51,"col":4},"count":0,"ignored":0},{"startLoc":{"line":41,"col":9},"endLoc":{"line":47,"col":6},"count":0,"ignored":0},{"startLoc":{"line":47,"col":7},"endLoc":{"line":50,"col":6},"count":0,"ignored":0},{"startLoc":{"line":36,"col":7},"endLoc":{"line":39,"col":6},"count":0,"ignored":0},{"startLoc":{"line":27,"col":88},"endLoc":{"line":29,"col":6},"count":0,"ignored":0}],"branches":[{"startLoc":{"line":27,"col":9},"endLoc":{"line":27,"col":86},"trueCount":0,"falseCount":0,"group":[],"ignored":0}],"ignored":0,"index":0},{"name":"anonymous_0","count":0,"regions":[{"startLoc":{"line":31,"col":49},"endLoc":{"line":31,"col":78},"count":0,"ignored":0}],"branches":[],"ignored":0,"index":1},{"name":"anonymous_1","count":0,"regions":[{"startLoc":{"line":32,"col":18},"endLoc":{"line":39,"col":6},"count":0,"ignored":0},{"startLoc":{"line":33,"col":34},"endLoc":{"line":35,"col":8},"count":0,"ignored":0}],"branches":[{"startLoc":{"line":33,"col":11},"endLoc":{"line":33,"col":32},"trueCount":0,"falseCount":0,"group":[],"ignored":0},{"startLoc":{"line":36,"col":15},"endLoc":{"line":38,"col":47},"trueCount":0,"falseCount":0,"group":[],"ignored":0}],"ignored":0,"index":2},{"name":"anonymous_2","count":0,"regions":[{"startLoc":{"line":44,"col":65},"endLoc":{"line":44,"col":87},"count":0,"ignored":0}],"branches":[],"ignored":0,"index":3},{"name":"RuntimePermissionRequester.mapWebResourcesToPermissions","count":0,"regions":[{"startLoc":{"line":65,"col":3},"endLoc":{"line":77,"col":4},"count":0,"ignored":0},{"startLoc":{"line":68,"col":5},"endLoc":{"line":75,"col":6},"count":0,"ignored":0},{"startLoc":{"line":71,"col":50},"endLoc":{"line":74,"col":8},"count":0,"ignored":0},{"startLoc":{"line":76,"col":5},"endLoc":{"line":77,"col":4},"count":0,"ignored":0}],"branches":[{"startLoc":{"line":71,"col":11},"endLoc":{"line":71,"col":48},"trueCount":0,"falseCount":0,"group":[],"ignored":0}],"ignored":0,"index":4},{"name":"RuntimePermissionRequester.constructor","count":0,"regions":[{"startLoc":{"line":80,"col":3},"endLoc":{"line":80,"col":27},"count":0,"ignored":0}],"branches":[],"ignored":0,"index":5}],"exeLine":{"0":1,"1":2,"2":3,"3":4,"4":13,"5":22,"6":23,"7":24,"8":25,"9":26,"10":27,"11":28,"12":31,"13":32,"14":33,"15":34,"16":36,"17":37,"18":38,"19":41,"20":42,"21":43,"22":44,"23":45,"24":46,"25":47,"26":48,"27":49,"28":54,"29":55,"30":56,"31":65,"32":66,"33":67,"34":68,"35":69,"36":70,"37":71,"38":72,"39":73,"40":76,"41":80},"summary":{"lines":{"total":34,"covered":0,"pct":0,"executedLineCount":[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,0,0,0,-1,-1,0,0,0,0,-1,0,0,0,-1,-1,0,0,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,0,0,0,0,0,-1,-1,0,-1,-1,-1,0,-1,-1]},"functions":{"total":6,"covered":0,"pct":0},"branches":{"total":8,"covered":0,"pct":0}},"link":"RuntimePermissionRequester.ets.html"}],"summary":{"lines":{"total":34,"covered":0,"pct":0},"functions":{"total":6,"covered":0,"pct":0},"branches":{"total":8,"covered":0,"pct":0}}},
        tableRowClassName: ({row, rowIndex}) => {
          if (row.summary.lines.pct > 70) {
            return 'high-row'
          } else if (row.summary.lines.pct > 33) {
            return 'medium-row'
          }
          return 'low-row'
        }
      };
    }
  };

  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#app");
</script>

<style scoped>
  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
  }

  .statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
  }

  .statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }

  .el-container {
    min-height: 100vh;
    height: 100%;
  }

  .footer {
    font-size: small;
  }

  .el-table .low-row {
    --el-table-tr-bg-color: var(--el-color-error-light-9);
  }

  .el-table .medium-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .high-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
</style>

</html>