<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">
        <rt-datetime ng-model="vm.sYm" rt-type="month" rt-title="开始年月" rt-required="true" rt-col="3"
                     rt-label-col="2"></rt-datetime>
        <rt-datetime ng-model="vm.eYm" rt-type="month" rt-title="结束年月" rt-required="true" rt-col="3"
                     rt-label-col="2"></rt-datetime>
        <div class="col-sm-1">
            <button class="btn btn-primary" ng-click="vm.pageIndex = 1;vm.getReportData()">查询</button>
        </div>
        <div class="col-sm-1">
            <button class="btn btn-primary" ng-click='vm.actions.export({},"PureOwnerTargetExport","代表纯销指标达成（金额）")'>
                导出
            </button>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">
            <span style="color:red;">*</span>Top
        </label>

        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.topsSelected" theme="bootstrap">
                <ui-select-match>{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="item in vm.topsList | filter: $select.search">
                    <span ng-bind-html="item| highlight: $select.search"></span>
                </ui-select-choices>
            </ui-select>
        </div>

        <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.orderbyTypeCode" theme="bootstrap">
                <ui-select-match>{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="item in vm.orderbyTypeList | filter:{name:$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-clear btn-small"
                    ng-click="vm.isShowMoreSearch =!vm.isShowMoreSearch;complateTableheight();">
                <i ng-if="!vm.isShowMoreSearch" class="fa fa-angle-double-down" style="color:#0099ff;"
                   title="更多查询条件"></i>
                <i ng-if="vm.isShowMoreSearch" class="fa fa-angle-double-up" style="color:#0099ff;" title="隐藏"></i>
            </button>
        </div>
    </div>

    <div class="form-group" ng-show="vm.isShowMoreSearch">
        <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" ng-show="vm.isShowMoreSearch">
        <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="#c3" 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:600px;"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 50) + 'px' }"/>
    </div>
    <div class="tab-pane" id="c2">
        <div id="report2" style="height:600px;"
             ng-style="{ width: chartWidth + 'px',height: (vm.topsSelected * 50) + 'px' }"/>
    </div>
    <div class="tab-pane" id="c3">
        <rt-data-grid rt-page-record-count="vm.recordCount" rt-page-index="vm.pageIndex" rt-page-size="vm.pageSize" rt-get-data="vm.getReportData()"
                      rt-rows="vm.reportData" rt-auto-height=" {{tableMaxHeight}} ">
            <table class="table table-condensed table-hover ng-scope" border="1" style="white-space: nowrap;"
                   id="rt-report-header">
                <thead>
                <tr>
                    <th rowspan="2">事业部</th>
                    <th rowspan="2">业务线/大区</th>
                    <th rowspan="2">省区/地区</th>
                    <th rowspan="2">省区经理</th>
                    <th rowspan="2">代表</th>
                    <th rowspan="2">累计达成额</th>
                    <th rowspan="2">达成额排名</th>
                    <th rowspan="2">累计达成率</th>
                    <th rowspan="2">达成率排名</th>
                    <td colspan="3" align="center" ng-repeat="item in vm.MonDataList">{{item}} 月</td>
                </tr>
                <tr>
                    <td align="center" ng-repeat="Mtext in vm.TbMessText track by $index">{{Mtext}}</td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="row in vm.reportData.DataList ">
                    <td class="rt-text-align">{{row.BuIdName}}</td>
                    <td class="rt-text-align">{{row.BigDeptIdName}}</td>
                    <td class="rt-text-align">{{row.BusinessUnitIdName}}</td>
                    <td class="rt-text-align">{{row.ManagerName}}</td>
                    <td class="rt-text-align">{{row.OwnerIdName}}</td>
                    <td class="rt-number-align">{{row.Sum_Done|toFixNumber:2}}万元</td>
                    <td class="rt-number-align">{{row.Sum_Done_Rank}}</td>
                    <td class="rt-number-align">{{row.Sum_Percent|toFixNumber:2}}%</td>
                    <td class="rt-number-align">{{row.Sum_Percent_Rank}}</td>
                    <td ng-repeat="mItem in row.monthList track by $index" class="rt-number-align">
                        <span ng-if="$index%3===0">{{mItem|toFixNumber:2}}万元</span>
                        <span ng-if="$index%3===1">{{mItem|toFixNumber:2}}万元</span>
                        <span ng-if="$index%3===2">{{mItem|toFixNumber:2}}%</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
</div>