{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/user/check/list?"><i class="fa fa-dashboard"></i> 质检任务列表</a></li>
            <li><a href="#"><i class="fa fa-dashboard"></i> 质检列表</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">

                        <div class="box-body">
                            <h4><i class="glyphicon glyphicon-exclamation-sign" style="margin-right: 6px"></i>数据情况</h4>
                            <div class="form-group" style="margin-left: 10px;margin-top: 10px">
                                <div class="col-xs-5" style="width: auto">
                                    <label class="form-inline">已标数据/数据总量：
                                        <input type="text" class="form-control" readonly value="{{.T.taskTagNum}} / {{ .T.taskNum }}"></label>
                                    <label class="form-inline">已检数据/已标总量：
                                        <input type="text" class="form-control" readonly value="{{.T.taskCheckNum}} / {{ .T.taskTagNum }}"></label>
                                </div>
                            </div>
                        </div>

                        <div id="status-div" class="col-xs-5 form-inline" style="width: auto;float:right;">
                            <label for="statusSelect">状态：
                                <select class="form-control selectpicker" id="statusSelect"></select></label>
                        </div>
                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>标注数量</th>
                                <th>抽查数量</th>
                                <th>抽查正确数量</th>
                                <th>正确占比</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

{{include "com/footer.html"}}
<script>
    menuActive("/front/user/task/list");

    let dataResult = {{ .T.tableData }}
    let userSelect = {{ .T.userSelect }}

    $(function () {
        ttable = $('#dataTable').dataTable({
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "serverSide": false,
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "columns": [
                {"data": "name"},
                {"data": "num1"},
                {"data": "num2"},
                {"data": "num3"},
                {"data": "num4"}
            ],
            "initComplete": function () {
                $("#dataTable_filter").append($('#status-div'))
            },
        });

        ttable.fnClearTable();
        ttable.fnAddData(dataResult["全部"]);
        console.log(dataResult)
        console.log(dataResult)
        for(i in userSelect){
            $("#statusSelect").append("<option value='"+userSelect[i]+"'>"+userSelect[i]+"</option>")
        }
        $('#statusSelect').on('changed.bs.select', function () {
            var name = $("#statusSelect option:selected").val()
            console.log(name)
            ttable.fnClearTable();
            ttable.fnAddData(dataResult[name]);
        })
    });

</script>
