<style>
    .form-group .control-label {
        font-weight: 500;
        color: #555;
    }

    #rt-report-header th {
        text-align: center;
        vertical-align: inherit;
        border: 1px solid #f0f0f0;
        color: #555;
        font-weight: 500;
    }

    #rt-report-header tr,
    td {
        text-align: center;
        vertical-align: inherit;
        border: 1px solid #f0f0f0;
        color: #555;
        font-weight: 500;
    }
</style>
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">筛选</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
        </div>
    </div>
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <div class="col-sm-12">
                    <label class="col-sm-2 control-label">报告类型</label>
                    <button class="btn" ng-class="{'btn-primary': typeSelect=='daily', 'btn-default':typeSelect!='daily'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeType('daily')">日报</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect=='weekly', 'btn-default':typeSelect!='weekly'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeType('weekly')">周报</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect=='monthly', 'btn-default':typeSelect!='monthly'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeType('monthly')">月报</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <label class="col-sm-2 control-label">日期筛选</label>
                    <button class="btn" ng-class="{'btn-primary': dateSelect=='today', 'btn-default':dateSelect!='today'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('today')">今日</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect=='yesterday', 'btn-default':dateSelect!='yesterday'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('yesterday')">昨日</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect=='thisweek', 'btn-default':dateSelect!='thisweek'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('thisweek')">本周</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect=='thismonth', 'btn-default':dateSelect!='thismonth'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('thismonth')">本月</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect=='custom', 'btn-default':dateSelect!='custom'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('custom')">自定义</button>

                    <div class="col-sm-3" style="width:20%;" ng-show="dateSelect=='custom'">
                        <rt-datetime-no-label ng-model="vm.sYm" rt-type="date"></rt-datetime-no-label>
                    </div>
                    <div style="float: left;" ng-show="dateSelect=='custom'">~</div>
                    <div class="col-sm-3" style="width:20%;" ng-show="dateSelect=='custom'">
                        <rt-datetime-no-label ng-model="vm.eYm" rt-type="date"></rt-datetime-no-label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <rt-bu-tree-lookup rt-title="部门筛选" rt-multiple="true" ng-model="vm.nodeSelected" rt-col="8" rt-label-col="2"></rt-bu-tree-lookup>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="btn-group pull-right">
                <button class="btn btn-primary" ng-click="vm.search()">查询</button>
                <button class="btn btn-default" ng-if="selectedTabId==='tab1'" ng-click='vm.actions.export({},"WorkReportStatisticExport",vm.typename+"提交按部门统计")'>导出</button>
                <button class="btn btn-default" ng-if="selectedTabId==='tab2'" ng-click='vm.actions.export({},"WorkReportStatisticByOwnerExport",vm.typename+"提交按代表统计")'>导出</button>
                <button class="btn btn-default" ng-if="selectedTabId==='tab3'" ng-click='vm.actions.export({},"WorkReportUnSubmitExport",vm.typename+"未提交人员清单报表")'>导出</button>
            </div>
        </div>
    </form>
</div>

<ul class="nav nav-tabs">
    <li class="active" ng-click="selectTab('tab1')">
        <a href="#c1" onclick="return false;" data-toggle="tab">按部门统计</a>
    </li>
    <li ng-click="selectTab('tab2')">
        <a href="#c2" onclick="return false;" data-toggle="tab">按代表统计</a>
    </li>
    <li ng-click="selectTab('tab3')">
        <a href="#c3" onclick="return false;" data-toggle="tab">未提交人员清单</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="c1">
        <rt-data-grid rt-page-record-count="vm.recordCount" rt-page-index="vm.page.index" rt-page-size="vm.page.size" rt-get-data="vm.search()"
            rt-rows="vm.data" rt-auto-height="{{tableMaxHeight}} " style="padding-left:0px;">
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;" id="rt-report-header">
                <thead>
                    <tr>
                        <th>部门</th>
                        <th>已提交数</th>
                        <th>已阅读数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in vm.data ">
                        <td>{{row.BusinessUnitName}}</td>
                        <td style="text-align:right;padding-right:50px;">{{row.done_qty}}</td>
                        <td style="text-align:right;padding-right:50px;">{{row.read_qty}}</td>
                    </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
    <div class="tab-pane" id="c2">
        <rt-data-grid rt-page-record-count="vm.recordCount" rt-page-index="vm.page.index" rt-page-size="vm.page.size" rt-get-data="vm.search()"
            rt-rows="vm.data" rt-auto-height="{{tableMaxHeight}} " style="padding-left:0px;">
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;" id="rt-report-header">
                <thead>
                    <tr>
                        <th>部门</th>
                        <th>代表</th>
                        <th>已提交数</th>
                        <th>已阅读数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in vm.data ">
                        <td>{{row.BusinessUnitName}}</td>
                        <td>{{row.systemuseridname}}</td>
                        <td style="text-align:right;padding-right:50px;">{{row.done_qty}}</td>
                        <td style="text-align:right;padding-right:50px;">{{row.read_qty}}</td>
                    </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>

    <div class="tab-pane " id="c3">
        <rt-data-grid rt-page-record-count="vm.recordCount" rt-page-index="vm.page.index" rt-page-size="vm.page.size" rt-get-data="vm.search()"
            rt-rows="vm.data" rt-auto-height="{{tableMaxHeight}} " style="padding-left:0px;">
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;" id="rt-report-header">
                <thead>
                    <tr>
                        <th>部门</th>
                        <th>代表</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in vm.data">
                        <td>{{row.BusinessUnitIdName}}</td>
                        <td>{{row.UserName}}</td>
                    </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
</div>