<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="main">
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/app_info.css"/>

    <!-- dataTables -->
    <link rel="stylesheet" type="text/css"
          href="/static/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"/>
    <!-- Select2 -->
    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/select2/dist/css/select2.min.css"/>
</head>
<body>
<th:block layout:fragment="sidebar">
    <li class="treeview">
        <a href="#">
            <i class="fa fa-list"></i>
            <span>审核报告</span>
            <span class="pull-right-container">
			<i class="fa fa-angle-left pull-right"></i>
		</span>
        </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a th:href="'/task_detail?examId='+${examId}+'&amp;caseId='+${caseId}">
                    <i class="fa fa-sticky-note text-success"></i>
                    <span>默认视图</span>
                </a>
            </li>
            <li>
                <a th:href="'/agg_report_list?examId='+${examId}+'&amp;caseId='+${caseId}">
                    <i class="fa fa-sitemap text-warning"></i>
                    <span>聚合视图</span>
                </a>
            </li>
        </ul>
    </li>
</th:block>


<th:block layout:fragment="maincontent">
    <section class="content-header">
        <h1>预交付报告
            <small th:text="${task.name}"></small>
        </h1>

        <ol class="breadcrumb">
            <li>
                <a href="/home">
                    <i class="fa fa-dashboard"></i>
                    全部任务
                </a>
            </li>
            <li class="active" th:text="|${task.name} 预交付报告|">
            </li>
        </ol>
    </section>

    <section class="content container-fluid">

        <!-- Report List Table -->
        <div class="assign-div pull-right">
            <button id="export-btn" class="btn btn-sm btn-assign pull-right">
                <i class="fa fa-coffee" style="margin-right: 3px;"></i>
                <span>导出报告</span>
            </button>

        </div>
        <table id="report-list" class="table table-striped table-bordered" cellpadding="0" width="100%">
            <thead>
            <tr>
                <th>类别</th>
                <th>严重程度</th>
                <th>可复现程度</th>
                <th>描述</th>
                <th>来源</th>
                <th>创建人</th>
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            <th:block th:each="report : ${finalReports}">

                <tr th:class="|row-${report.id}|">

                    <td>
                        <!--<i class="fa fa-square" style="color: {{ report.print_bug_category_color  }};"></i>-->
                        <span th:text="${category2String.get(report.category)}"></span>
                    </td>
                    <td>
                        <img th:alt="|${severity2String.get(report.severity)} Image|" height="14"
                             th:src="'/static/images/icons/priorities/' + ${report.severity} + '.png'"/>
                        <span th:text="${severity2String.get(report.severity)}"></span>
                    </td>
                    <td>
                        <span th:text="${recurrent2String.get(report.recurrent)}"></span>
                    </td>
                    <td style="width: 300px;">
                        <div th:id="'ab-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#full-content-' + ${report.id}" class="trunc collapse in" th:text="${report.description}">
                        </div>

                        <div th:id="'full-content-' + ${report.id}" data-toggle="collapse" th:attr="data-target='#ab-content-' + ${report.id}" class="full-content collapse">
                            <span th:text="${report.description}"></span>
                            <br/>
                            <img class="my-img-thumbnail pointer" th:src="${imgUrl}"
                            th:each="imgUrl,iterStat : ${report.getImgUrls()}"
                            onclick="showimage(event);"/>

                        </div>

                    </td>
                    <td class="report-aggregator">
                        <a th:if="${report.sourceId}" th:href="'report?masterId='+${report.sourceId}+'&amp;examId='+${examId}+'&amp;caseId='+${caseId}"
                           th:text="|ML-AG-${report.sourceId.substring(10)}|"></a>
                    </td>
                    <td class="report-assignee">
                        管理员
                    </td>
                    <td>
                        <a th:if="${report.sourceId}" th:href="'report?masterId='+${report.sourceId}+'&amp;examId='+${examId}+'&amp;caseId='+${caseId}+'&amp;finalReportId='+${report.id}">编辑</a>
                        <a href="#" th:onclick="'deleteReport('+ ${report.id} +')'">删除</a>
                    </td>
                </tr>
            </th:block>
            </tbody>
        </table>
    </section>


</th:block>
</body>
</html>
<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">

    <div class="modal-dialog modal-lg" style="display: inline-block; width: 300px;">
        <div class="modal-content">
            <img id="imgInModalID"
                 class="carousel-inner img-responsive img-rounded"
                 onclick="closeImageViewer()"
                 onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
                 onmouseout="this.style.cursor='default'"

            />
        </div>
    </div>

</div>
<script src="/static/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/static/AdminLTE/bower_components/select2/dist/js/select2.min.js"></script>
<script src="/static/js/app_info.js"></script>
<script type="text/javascript">
    function deleteReport(finalReportId) {
        $.ajax({
            url: '/final_report/' + finalReportId,
            type: 'DELETE',
            success: function (result) {
                // Do something with the result
                alert("删除成功");
                location.reload();
            }
        });
    }
    //显示大图
    function showimage(e) {
        $("#imgModal").find("#imgInModalID").attr("src", e.target.src);
        $("#imgModal").modal();
        e.stopPropagation()
    }

    //关闭
    function closeImageViewer() {
        $("#imgModal").modal('hide');
    }

    $(function () {
        $('#export-btn').click(function () {
            // 修改assign-btn的文字以及让其处于不可用状态
            $(this).attr('disabled', true);
            $(this).find('span').text('报告生成中...');

            var urlParams = new URLSearchParams(window.location.search);
            var examId = urlParams.get('examId');
            var caseId = urlParams.get('caseId');
            $.get('/final_report/export', {examId: examId, caseId: caseId}, function (result) {
                var url = JSON.parse(result).downloadUrl;
                window.open(url, '_blank');

                location.reload()
            });
        });
    });
</script>