<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试报告</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!--    页面样式-->
    <style type="text/css">
        /*标题样式*/
        .title {
            width: auto;
            height: 60px;
            text-align: center;
            font: bolder 38px/60px "Microsoft YaHei UI";
        }

        /*汇总信息样式*/
        .summary {
            width: 90%;
            position: absolute;
            top: 120px;
            margin-left: 5%;

        }

        .text-left {
            font: bolder 20px/30px "Microsoft YaHei UI";
        }

        .left {
            width: 50%;
            float: left;

        }

        .right {
            width: 50%;
            float: right;

        }

        .desc {
            float: left;
            width: 100%;
        }

        .list-group-item span {
            font: normal 16px/38px "Microsoft YaHei UI";
            padding: 30px;

        }

        .list-group-item {
            position: relative;
            display: block;
            padding: .4rem 1.25rem;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .125);
        }

        /* 执行信息样式   */
        .test_info {
            width: 90%;
            position: absolute;
            top: 900px;
            margin-left: 5%;

            color: #28a745 !important;
        }

        .table td, th {
            border: solid 2px rgba(9, 122, 51, 0.11) !important;
            padding: 0;
            line-height: 40px;
            text-align: center;

        }


        select {
            border: 0;
            padding: 0;
            margin: 0;
            height: 2em;
            width: 8em;
            margin-left: 2em;
        }

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

        .test_log {
            background: rgba(163, 171, 189, 0.15);
            width: 100%;
            height: 50px;
            border-top: none;
            border-bottom: none;
            display: none;
            text-align: left;
        }

        .test_log td {
            text-align: left;
            height: 30px;
            margin: 0;
            padding-left: 3em;
            padding-right:3em;
            font: none 18px/24px "Microsoft YaHei UI";
            color: #9e141a;
        }

        pre {
            margin: 0;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
        }

        /*    测试图表显示*/
<!--        .char {-->
<!--            width: 90%;-->
<!--            position: absolute;-->
<!--            top: 450px;-->
<!--            margin-left: 5%;-->
<!--            color: #28a745 !important;-->
<!--        }-->

    </style>

</head>
<body>

<!--报告标题-->
<div class="title text-success">
    <div class="shadow-lg p-3 mb-5 bg-white rounded">{{ title }}</div>
</div>

<!--汇总信息-->
<div class="summary">
    <p class="text-left text-success">测试结果汇总</p>
    <div class="left">
        <ul class="list-group">
            <li class="list-group-item">
                <button type="button" class="btn btn-success">测试人员</button>
                <span class="text-dark"> 雨泽 </span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-success">开始时间</button>
                <span class="text-dark">{{ result.summary.start_date_time }}</span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-success">执行时间</button>
                <span class="text-dark">{{ result.summary.end_ts - result.summary.start_ts}}</span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-success">用例总数</button>
                <span class="text-dark">{{ result.cases | length }}</span>
            </li>


        </ul>
    </div>
    <div class="right">
        <ul class="list-group">

            <li class="list-group-item">
                <button type="button" class="btn btn-success">成功用例</button>
                <span class="text-success">{{ result.summary.success }}</span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-danger">失败用例</button>
                <span class="text-warning">{{ result.summary.failed }}</span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-warning">错误用例</button>
                <span class="text-danger">{{ result.summary.error }}</span>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn btn-secondary">跳过用例</button>
                <span class="text-secondary">{{ result.summary.skip }}</span>
            </li>
        </ul>
    </div>
    <div class="desc">
        <ul class="list-group">
            <li class="list-group-item">
                <button type="button" class="btn btn-success">描述信息</button>
                <span class="text-secondary">{{ desc }}</span>
            </li>
        </ul>
    </div>


</div>

<!--测试图表-->
<!--<div class="char">-->
<!--    <p class="text-left text-success">图表展示</p>-->
<!--    <div id="char2" style="width: 49%;height: 400px;float: left"></div>-->
<!--    <div id="char" style="width: 49%;height: 400px ;float: left"></div>-->
<!--</div>-->

<!--详细信息-->
<div class="test_info">

    <p class="text-left text-success">详细信息</p>
    <div class="table_data">

        <table class="table">
            <thead class="bg-success text-light">
            <tr>
                <th scope="col" style="width: 5%;padding: 0">编号</th>
                <th scope="col" style="width: 20%;padding: 0">
                    <span>测试类</span>
                    <select id="testClass">
                        <option>所有</option>
                        {% for foo in testClass %}
                            <option>{{ foo }}</option>
                        {% endfor %}
                    </select>

                </th>

                <th scope="col" style="width: 15%;padding: 0">测试方法</th>
                <th scope="col" style="width: 20%;padding: 0">用例描述</th>
                <th scope="col" style="width: 10%;padding: 0">执行时间</th>
                <th scope="col" style="width: 20%;padding: 0">

                    <span>执行结果</span>
                    <select id="testResult">
                        <option>所有</option>
                        <option class="text-success">成功</option>
                        <option class="text-danger">失败</option>
                        <option class="text-warning">错误</option>
                        <option class="text-info">跳过</option>
                    </select>

                </th>
                <th scope="col" style="width: 10%;padding: 0">详细信息</th>
            </tr>
            </thead>
            <tbody>
            {% for name, foo in result.cases.items() %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td class="{{ foo.class_name }}">{{ foo.fspath }}</td>
                    <td>{{ foo.nodeid }}</td>
                    <td>{{ foo.method_doc }}</td>
                    <td>{{ foo.duration }}</td>
                    {% if foo.outcome == 'success' %}
                        <td class="text-success">{{ foo.outcome }}</td>
                    {% elif foo.outcome == 'failed' %}
                        <td class="text-danger">{{ foo.outcome }}</td>
                    {% elif foo.outcome == 'error' %}
                        <td class="text-warning">{{ foo.outcome }}</td>
                    {% else %}
                        <td class="text-info">{{ foo.outcome }}</td>
                    {% endif %}
                    <td>
                        <button type="button" class="btn btn-success btn_info">查看详情</button>
                    </td>
                </tr>

                <tr class="test_log">

                    <td colspan="7" class="small text-muted" style=" word-wrap:break-word; word-break:break-all">
<!--                        {% for item in foo.run_info %}-->

<!--                            <pre>{{ item }}</pre>-->
<!--                        {% endfor %}-->
<!--                        {% if foo.run_info == [] %}-->
<!--                            <pre>无内容输出！</pre>-->
<!--                        {% endif %}-->
<!--                        <pre>{{ foo.longreprtext }}</pre>-->
                        <pre>{{ foo.longreprtext }}</pre>
                    </td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<script>
    var tbodyTr = $('tbody tr');
    var testResult = $("#testResult");
    var testClass = $("#testClass");
    <!--    用例执行详细信息显示切换-->
    $(".btn_info").click(function () {
        $(this).parent().parent().next().toggle();

    });
    // 当选择用例类之后触发
    testClass.change(function () {
        var cls = $(this).val();
        var res = testResult.val();
        elementDisplay(cls, res);
        sort()
    });
    testResult.change(function () {
        var res = $(this).val();
        var cls = testClass.val();
        elementDisplay(cls, res);
        sort()
    });

    function elementDisplay(cls, res) {
        // 用例数据的显示
        if (cls === "所有") {
            if (res === "所有") {
                tbodyTr.has('button').show();
            } else if (res === '成功') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-success').show()

            } else if (res === '失败') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-danger').show()

            } else if (res === '错误') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-warning').show()

            } else if (res === '跳过') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-info').show()
            }
        } else {
            if (res === "所有") {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').show()
            } else if (res === '成功') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-success').show()
            } else if (res === '失败') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-danger').show()
            } else if (res === '错误') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-warning').show()
            } else if (res === '跳过') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-info').show()
            }
        }
    }

    function sort() {
        //重新排列显示序号
        // 选择所有可以见的tr
        var visibleTr = tbodyTr.filter(":visible");

        visibleTr.each(function (index, element) {
            element.firstElementChild.innerHTML = index + 1;

        })

    }


</script>

<!--<script type="text/javascript">-->
<!--    // 基于准备好的dom，初始化echarts实例-->
<!--    var myChart = echarts.init(document.getElementById('char'));-->
<!--    var myChart2 = echarts.init(document.getElementById('char2'));-->
<!--    // 指定图表的配置项和数据-->
<!--    option = {-->
<!--        color: ['#00a10a', '#ddb518', 'rgba(204,46,41,0.73)', '#85898c'],-->
<!--        tooltip: {-->
<!--            trigger: 'item',-->
<!--            formatter: '{a} <br/>{b}: {c} ({d}%)'-->
<!--        },-->
<!--        legend: {-->
<!--            orient: 'vertical',-->
<!--            left: 10,-->
<!--            data: ['通过', '失败', '错误', '跳过']-->
<!--        },-->
<!--        series: [-->
<!--            {-->
<!--                name: '测试结果',-->
<!--                type: 'pie',-->
<!--                radius: ['50%', '70%'],-->
<!--                avoidLabelOverlap: false,-->
<!--                label: {-->
<!--                    show: false,-->
<!--                    position: 'center'-->
<!--                },-->
<!--                emphasis: {-->
<!--                    label: {-->
<!--                        show: true,-->
<!--                        fontSize: '30',-->
<!--                        fontWeight: 'bold'-->
<!--                    }-->
<!--                },-->
<!--                labelLine: {-->
<!--                    show: false-->
<!--                },-->
<!--                data: [-->
<!--                    {value: {{success}}, name: '通过'},-->
<!--                    {value: {{fail}}, name: '失败'},-->
<!--                    {value: {{error}}, name: '错误'},-->
<!--                    {value: {{skip}}, name: '跳过'}-->
<!--                ]-->
<!--            }-->
<!--        ]-->
<!--    };-->
<!--    option2 = {-->
<!--        tooltip: {-->
<!--            formatter: '{a} <br/>{b} : {c}%'-->
<!--        },-->
<!--        toolbox: {-->
<!--            feature: {-->
<!--                restore: {},-->
<!--                saveAsImage: {}-->
<!--            }-->
<!--        },-->
<!--        series: [-->
<!--            {-->
<!--                name: '测试结果',-->
<!--                type: 'gauge',-->
<!--                detail: {formatter: '{{pass_rate}}%'},-->
<!--                data: [{value: '{{pass_rate}}', name: '用例通过率'}],-->
<!--                axisLine: {-->
<!--                    lineStyle: {-->
<!--                        color: [-->
<!--                            [0.2, '#c20000'],-->
<!--                            [0.8, '#ddb518'],-->
<!--                            [1, '#00a10a']]-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        ]-->
<!--    };-->


<!--    myChart2.setOption(option2);-->
<!--    // 使用刚指定的配置项和数据显示图表。-->
<!--    myChart.setOption(option);-->
<!--</script>-->


</body>
</html>