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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./res/css/index.css">
    <link rel="stylesheet" href="./res/css/reset.css">
    <link rel="stylesheet" href="./res/css/bootstrap.css">
</head>

<body>
<div class="top">
    测试报告
</div>
<div class="content">
    <div class="topForm">
        <div class="topTitle">报告汇总</div>
        <form class="form">
            <#if overView ??>
                <div class="form-group flex">
                    <label for="total">总数:</label>
                    <input class="form-control" id="total" readonly="readonly" value="${overView.total!}"/>
                </div>
                <div class="form-group flex">
                    <label for="allTime">总耗时:</label>
                    <input class="form-control" id="allTime" readonly="readonly" value="${overView.allTime!}"/>
                </div>
                <div class="form-group flex">
                    <label for="passNum">通过数:</label>
                    <input class="form-control" id="passNum" readonly="readonly" value="${overView.passNum!}"/>
                </div>
                <div class="form-group flex">
                    <label for="failNum">失败数:</label>
                    <input class="form-control" id="failNum" readonly="readonly" value="${overView.failNum!}"/>
                </div>
                <div class="form-group flex">
                    <label for="probability">通过率:</label>
                    <input class="form-control" id="probability" readonly="readonly" value="${overView.probability!}"/>
                </div>
            <#else>
            </#if>
        </form>
    </div>
    <div class="table">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>编号</th>
                <th>用例名称</th>
                <th>用例类型</th>
                <th>详细参数</th>
                <th>用例描述</th>
                <th>执行结果</th>
                <th>执行时间</th>
                <th>结果信息</th>
            </tr>
            </thead>
            <tbody>
            <#assign caseNo = 0>
            <#if fail ??>
                <#list fail as failCase>
                    <tr>
                        <#assign caseNo=caseNo+1>
                        <th scope="row">${caseNo}</th>
                        <td>${failCase.testCaseName!}</td>
                        <td>${failCase.type!}</td>
                        <td>${failCase.detail!}</td>
                        <td>${failCase.description!}</td>
                        <td style="color: red">${failCase.result?c}</td>
                        <td>${failCase.duration!}</td>
                        <td class="clickClass"
                            data-message='${failCase.str!}'>
                            查看结果
                        </td>
                    </tr>
                </#list>
            <#else>
            </#if>
            </tbody>
            <tbody>
            <#assign caseNo = 0>
            <#if pass ??>
                <#list pass as passCase>
                    <tr>
                        <#assign caseNo=caseNo+1>
                        <th scope="row">${caseNo}</th>
                        <td>${passCase.testCaseName!}</td>
                        <td>${passCase.type!}</td>
                        <td>${passCase.detail!}</td>
                        <td>${passCase.description!}</td>
                        <td style="color: green">${passCase.result?c}</td>
                        <td>${passCase.duration!}</td>
                        <td class="clickClass"
                            data-message='${passCase.str!}'>
                            查看结果
                        </td>
                    </tr>
                </#list>
            <#else>
            </#if>
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">结果信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="grp">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="./res/js/jquery.min.js"></script>
<script src="./res/js/bootstrap.js"></script>
<script>
    function handleData(data) {
        return data
    }

    $(".clickClass").each((i, v) => {
        v.onclick = function () {
            if (!v.getAttribute('data-message')) {
                alert('该条测试数据执行失败')
                return
            }
            let data = JSON.parse(v.getAttribute('data-message')).checkPointResultDetails
            $('#myModal').modal()
            if (data) {
                let oDiv = document.getElementById('grp')
                $("#grp").empty();
                for (let item of data) {
                    let hr = document.createElement('hr')
                    oDiv.appendChild(hr)
                    for (let j in item) {
                        let content = null
                        if (j == 'isSuccess') {
                            content = '是否成功:'
                        } else if (j == 'type') {
                            content = '类型:'
                        } else if (j == 'matchExpression') {
                            content = '匹配前表达式:'
                        } else if (j == 'parseExpression') {
                            content = '匹配后表达式:'
                        } else if (j == 'message') {
                            content = '信息:'
                        }
                        let div1 = document.createElement('div')
                        let lab1 = document.createElement('label')
                        let lab2 = document.createElement('label')
                        div1.className = 'form-group'
                        lab1.className = 'col-sm-4 control-label w20'
                        lab2.className = 'col-sm-6 control-label txtl'
                        lab1.innerText = content
                        lab2.innerText = item[j]
                        div1.appendChild(lab1)
                        div1.appendChild(lab2)
                        oDiv.appendChild(div1)
                    }
                }
            }
        }
    })
</script>
</body>
</html>