<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>
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label"><span style="color:red;">*</span>公司</label>
        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.client" theme="bootstrap">
                <ui-select-match>{{ $select.selected.name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.clientList|filter:$select.search">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="col-sm-1">
            <button class="btn btn-primary" ng-click="vm.showReportButton()">查询</button>
        </div>

    </div>
    <div class="form-group">
        <rt-datetime ng-model="vm.startYM"
                     rt-type="date"
                     rt-title="开始时间" rt-required="true" rt-col="3" rt-label-col="2">
        </rt-datetime>
        <rt-datetime ng-model="vm.endYM"
                     rt-type="date"
                     rt-title="结束时间" rt-required="true" rt-col="3" rt-label-col="2">
        </rt-datetime>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">事业部</label>
        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.buidSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.buidList|filter:$select.search">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
        <label class="col-sm-2 control-label">业务线/大区</label>
        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.bigDepSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.bigDepList |filter:$select.search">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">省区/地区</label>
        <div class="col-sm-8">
            <ui-select class="form" multiple allow-clear sortable="true" theme="bootstrap" close-on-select="false"
                       ng-model="vm.businessUnitSelected">
                <ui-select-match>{{$item.name}}</ui-select-match>
                <ui-select-choices repeat="item in vm.businessUnitList | filter: {name: $select.search}">
                    <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

</form>

<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="#c5" onclick="return false;" data-toggle="tab">模块使用情况</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="c1">
        <div id="report1" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
        <div id="report2" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
    </div>
    <div class="tab-pane" id="c2">
        <div id="reportVisitPeopleQty" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
        <div id="reportVisitTimeQty" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
    </div>
    <div class="tab-pane" id="c5">
        <div id="report3" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
        <div id="report4" style="height:500px;float:left"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 30) + 'px' }"/>
    </div>
    <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 500px; " ng-show="vm.isShow=='login'">
        <ul class="nav nav-tabs">
            <li class="active" ng-click="selectTab('tab4')">
                <a href="#c3" onclick="return false;" data-toggle="tab">用户登录详情</a>
            </li>
            <li ng-click="selectTab('tab5')">
                <a href="#c6" onclick="return false;" data-toggle="tab">未登录用户清单</a>
            </li>
            <button style="margin-top: 5px; float: right;margin-right: 200px;"
                    ng-show="vm.isShow=='login'"
                   class="col-sm-1 btn btn-primary"
                    ng-click='vm.actions.export({
                        "buidName":"事业部",
                        "bigdepartName":"大区",
                        "BusinessUnitName":"地区",
                        "opertebyName":"用户"
                        },"CsmReportLoginExport","用户登录次数详情报表")'>导出
            </button>
            <button style="margin-top: 5px; float: right;margin-right: 200px;"
                    ng-show="vm.isShow=='unlogin'"
                    class="col-sm-1 btn btn-primary"
                    ng-click='vm.actions.export({
                        "buidName":"事业部",
                        "bigdepartName":"大区",
                        "BusinessUnitName":"地区",
                        "systemuseridName":"用户"
                        },"CsmReportUnLoginExport","未登录用户清单")'>导出
            </button>
        </ul>
    </div>
    <div ng-show="vm.isShow2=='login'&&vm.isShow=='login'">
        <rt-data-grid rt-page-record-count="vm.recordLoginCount" rt-page-index="vm.index" rt-page-size="vm.pageSize" rt-get-data="vm.search()"
                      class="rt-report-header"
                      rt-rows="vm.reportLoginData"
                      rt-auto-height="{{tableMaxHeight}}"
                      style="min-height: 150px;padding-bottom: 20px">
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;">
                <thead>
                <tr>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        事业部
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        大区
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        地区
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        用户
                    </th>
                    <td rowspan="3" align="center" ng-repeat="item in vm.MonDataList">{{item}}</td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="row in vm.reportLoginData ">
                    <td>{{row.buidName}}</td>
                    <td>{{row.bigdepartName}}</td>
                    <td>{{row.BusinessUnitName}}</td>
                    <td>{{row.opertebyName}}</td>
                    <td ng-repeat="Items in row.monthList track by $index"
                        align="center">{{Items}}
                    </td>
                </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
    <div ng-show="vm.isShow2=='unlogin'&&vm.isShow=='login'">
        <rt-data-grid rt-page-record-count="vm.recordUnloginCount" rt-page-index="vm.index" rt-page-size="vm.pageSize" rt-get-data="vm.search()"
                      class="rt-report-header"
                      rt-rows="vm.reportUnloginData"
                      rt-auto-height="{{tableMaxHeight}}"
                      style="min-height: 150px;padding-bottom: 20px">
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;">
                <thead>
                <tr>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        事业部
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        大区
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        地区
                    </th>
                    <th rowspan="3"
                        style=" text-align: center; vertical-align: inherit; border: 1px solid #f0f0f0; color: #555;font-weight: 500;">
                        用户
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="row in vm.reportUnloginData ">
                    <td>{{row.buidName}}</td>
                    <td>{{row.bigdepartName}}</td>
                    <td>{{row.BusinessUnitName}}</td>
                    <td>{{row.systemuseridName}}</td>
                </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
    <div ng-show="vm.isShow=='visit'">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 500px; ">
            <ul class="nav nav-tabs">
                                 <li class="active">
                                     <a href="#c4" onclick="return false;" data-toggle="tab">用户拜访次数详情</a>
                                 </li>
                                 <button style="    margin-top: 5px; float: right;margin-right: 200px;" class="col-sm-1 btn btn-primary" ng-click='vm.actions.export({
                                             "buidName":"事业部",
                                             "bigdepartName":"大区",
                                             "BusinessUnitName":"地区",
                                             "opertebyName":"用户"
                                             },"CsmReportVisitExport","用户拜访次数详情报表")'>导出
                                 </button>
            </ul>
        </div>
        <rt-data-grid rt-page-record-count="vm.recordVisitCount" rt-page-index="vm.index" rt-page-size="vm.pageSize" rt-get-data="vm.search()"
                      class="rt-report-header"
                      rt-rows="vm.reportvisitData"
                      rt-auto-height="{{tableMaxHeight}}"
                      style="min-height: 150px;padding-bottom: 20px">
             <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap; ">
                 <thead>
                 <tr>
                     <th rowspan="3" >事业部</th>
                     <th rowspan="3" >大区</th>
                     <th rowspan="3" >地区</th>
                     <th rowspan="3" >用户</th>
                     <td rowspan="3" align="center" ng-repeat="item in vm.MonDataList">{{item}}</td>
                 </tr>
                 </thead>
                 <tbody>
                 <tr ng-repeat="row in vm.reportvisitData ">
                     <td>{{row.buidName}}</td>
                     <td>{{row.bigdepartName}}</td>
                     <td>{{row.BusinessUnitName}}</td>
                     <td>{{row.opertebyName}}</td>
                     <td ng-repeat="Items in row.monthList track by $index"
                         align="center">{{Items}}
                     </td>
                 </tr>
                 </tbody>
             </table>
        </rt-data-grid>
    </div>
    <div ng-show="vm.isShow=='operate'">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 500px; ">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#c6" onclick="return false;" data-toggle="tab">功能使用详情</a>
                </li>
                <button style="    margin-top: 5px; float: right;margin-right: 200px;" class="col-sm-1 btn btn-primary"
                        ng-click='vm.actions.export({
                        "TblMdlIdName":"模块",
                        "is_pc":"来源"
                        },"CsmReportOperateAnnalExport","用户功能使用详情报表")'>导出
                </button>
            </ul>
        </div>
        <!--<rt-data-grid id="rt-report-header"
                      rt-auto-height="{{tableMaxHeight}}"
                      style="min-height: 150px;padding-bottom: 20px">-->
            <table class="table table-condensed table-hover ng-scope" style="white-space:nowrap;">
                <thead>
                    <tr>
                        <th rowspan="2" align="left">模块</th>
                        <th rowspan="2" align="left">来源</th>
                        <td style="border-top:solid 1px #f0f0f0;" colspan="2" align="right" ng-repeat="item in vm.textXList">{{item}} </td>
                    </tr>
                    <tr>
                        <td align="left" ng-repeat="Mtext in vm.TbMessText2 track by $index">{{Mtext}}</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in vm.RepoteData2  track by $index ">
                        <td align="left" ng-if="row.TblMdlIdName!='登录'">{{row.TblMdlIdName}}</td>
                        <td colspan="2" align="left" ng-if="row.TblMdlIdName=='登录'">{{row.TblMdlIdName}}</td>
                        <td ng-if="row.is_pc==1&&row.TblMdlIdName!='登录'">PC端</td>
                        <td ng-if="row.is_pc==0&&row.TblMdlIdName!='登录'">Mobile端</td>
                        <td ng-repeat="Items in row.OperateData2 track by $index" align="right">{{Items}}</td>
                    </tr>
                </tbody>
            </table>
      <!--  </rt-data-grid>-->
    </div>
</div>