<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': dateSelect==='fullYear', 'btn-default':dateSelect!='fullYear'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('fullYear')">全年</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==='lastMonth', 'btn-default':dateSelect!='lastMonth'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('lastMonth')">上月</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect==='thisQuarter', 'btn-default':dateSelect!='thisQuarter'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('thisQuarter')">本季度</button>
                    <button class="btn" ng-class="{'btn-primary': dateSelect==='lastQuarter', 'btn-default':dateSelect!='lastQuarter'}" style="margin-left: 15px;float: left;"
                        ng-click="vm.changeDate('lastQuarter')">上季度</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:15%;" ng-if="dateSelect==='custom'">
                        <rt-datetime-no-label ng-model="vm.sYm" rt-type="month"></rt-datetime-no-label>
                    </div>
                    <div style="float: left;" ng-show="dateSelect==='custom'">~</div>
                    <div class="col-sm-3" style="width:15%;" ng-if="dateSelect==='custom'">
                        <rt-datetime-no-label ng-model="vm.eYm" rt-type="month"></rt-datetime-no-label>
                    </div>
                </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': filterSelect==='byBusinessUnit', 'btn-default':filterSelect!='byBusinessUnit'}" style="margin-left: 15px;float: left;"
                        ng-click="filterSelectClick('byBusinessUnit')">按省区</button>
                    <button class="btn" ng-class="{'btn-primary': filterSelect==='byOwner', 'btn-default':filterSelect!='byOwner'}" style="margin-left: 15px;float: left;"
                        ng-click="filterSelectClick('byOwner')">按代表</button>
                </div>
            </div>

            <div class="form-group" ng-if="filterSelect === 'byBusinessUnit'">
                <div class="col-sm-12">
                    <label class="col-sm-2 control-label">类型筛选</label>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='noCustomCategory', 'btn-default':typeSelect!='noCustomCategory'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('noCustomCategory')">不分指标类型</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='customCategoryByAmount', 'btn-default':typeSelect!='customCategoryByAmount'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('customCategoryByAmount')">按指标类型（金额）</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='customCategoryByQty', 'btn-default':typeSelect!='customCategoryByQty'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('customCategoryByQty')">按指标类型（数量）</button>

                    <div class="col-sm-3" style="width:20%;" ng-if="typeSelect ==='customCategoryByAmount' || typeSelect ==='customCategoryByQty'">
                        <ui-select allow-clear ng-model="vm.cuSelected" theme="bootstrap">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in vm.customCategoryList | filter: $select.search">
                                <span ng-bind-html="item.name| highlight: $select.search"></span>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-if="filterSelect === 'byOwner'">
                <div class="col-sm-12">
                    <label class="col-sm-2 control-label">类型筛选</label>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='tsSrTargetDone', 'btn-default':typeSelect!='tsSrTargetDone'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('tsSrTargetDone')">不分指标类型</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='tsSrTargetDoneByAmount', 'btn-default':typeSelect!='tsSrTargetDoneByAmount'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('tsSrTargetDoneByAmount');vm.getCustomCategory(3,2)">按指标类型（金额）</button>
                    <button class="btn" ng-class="{'btn-primary': typeSelect==='tsSrTargetDoneByQty', 'btn-default':typeSelect!='tsSrTargetDoneByQty'}"
                        style="margin-left: 15px;float: left;" ng-click="typeSelecttClick('tsSrTargetDoneByQty')">按指标类型（数量）</button>
                    <div class="col-sm-3" style="width:20%;" ng-if="typeSelect ==='tsSrTargetDoneByAmount' || typeSelect ==='tsSrTargetDoneByQty'">
                        <ui-select allow-clear ng-model="vm.cuSelected" theme="bootstrap">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in vm.customCategoryList | filter: $select.search">
                                <span ng-bind-html="item.name| highlight: $select.search"></span>
                            </ui-select-choices>
                        </ui-select>
                    </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.getChartData();vm.getReportData()">查询</button>
                <button class="btn btn-default" ng-if="typeSelect==='noCustomCategory'" ng-click='vm.actions.export({},"PureVenditionExport","省区纯销指标达成-不分指标类型报表")'>导出</button>
                <button class="btn btn-default" ng-if="typeSelect==='customCategoryByAmount'" ng-click='vm.actions.export({},"PureVenditionExport","省区纯销指标达成-按指标类型（金额）报表")'>导出</button>
                <button class="btn btn-default" ng-if="typeSelect==='customCategoryByQty'" ng-click='vm.actions.export({},"PureVenditionByQtyExport","省区纯销指标达成-按指标类型（数量）报表")'>导出</button>
                <button class="btn btn-default" ng-if="typeSelect==='tsSrTargetDone'" ng-click='vm.actions.export({},"PureOwnerTargetExport","代表纯销指标达成-不分指标类型报表")'>导出</button>
                <button class="btn btn-default" ng-if="typeSelect==='tsSrTargetDoneByAmount'" ng-click='vm.actions.export({},"PureOwnerTargetExport","代表纯销指标达成-按指标类型（金额）报表")'>导出</button>
                <button class="btn btn-default" ng-if="typeSelect==='tsSrTargetDoneByQty'" ng-click='vm.actions.export({},"PureOwnerTargetByQtyExport","代表纯销指标达成-按代表纯销指标类型（数量）")'>导出</button>
            </div>
            </div>
        </div>
    </form>
</div>

<div>
    <div class="row">
        <div class="col-lg-4 col-xs-8">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>{{vm.totalData.totalTarget}}<sup ng-show="!isQtyShow" style="font-size: 20px">万元</sup></h3>
                    <p>合计指标</p>
                </div>
                <div class="icon">
                    <i class="ion ion-connection-bars"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-8">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>{{vm.totalData.totalDone|toFixNumber:2}}<sup ng-show="!isQtyShow" style="font-size: 20px">万元</sup></h3>
                    <p>合计达成</p>
                </div>
                <div class="icon">
                    <i class="ion ion-ios-pulse"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-8">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{{vm.totalData.totalPercent|toFixNumber:2}}<sup style="font-size: 20px">%</sup></h3>
                    <p>达成率</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box box-primary" style="width:49%;float:left;">
    <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>
    <div class="box-body">
        <div class="row">
            <div id="report1" style="width:100%;height:500px">
            </div>
        </div>
    </div>
</div>

<div class="box box-primary" style="width:49%;float:right;">
    <div class="box-header with-border">
        <h3 class="box-title" ng-show="!isQtyShow">达成额排名</h3>
        <h3 class="box-title" ng-show="isQtyShow">达成量排名</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>
    <div class="box-body">
        <div class="row">
            <div id="report2" style="width:100%;height:500px">
            </div>
        </div>
    </div>
</div>

<div class="box box-primary" style="float:left;">
    <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>
    <div class="box-body">
        <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" 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" ng-show="!isOwnerShow">经理</th>
                        <th rowspan="2" ng-show="isOwnerShow">省区经理</th>
                        <th rowspan="2" ng-show="isOwnerShow">代表</th>
                        <th rowspan="2" ng-show="!isQtyShow">累计达成额</th>
                        <th rowspan="2" ng-show="!isQtyShow">达成额排名</th>
                        <th rowspan="2" ng-show="isQtyShow">累计达成量</th>
                        <th rowspan="2" ng-show="isQtyShow">达成量排名</th>
                        <th rowspan="2">累计达成率</th>
                        <th rowspan="2">达成率排名</th>
                        <th colspan="3" align="center" ng-repeat="item in vm.MonDataList">{{item}} 月</th>
                    </tr>
                    <tr>
                        <th align="center" ng-repeat="Mtext in vm.TbMessText track by $index">{{Mtext}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in vm.reportData.DataList ">
                        <td>{{row.BuIdName}}</td>
                        <td>{{row.BigDeptIdName}}</td>
                        <td>{{row.BusinessUnitIdName}}</td>
                        <td ng-show="typeSelect==='tsSrTargetDone' || typeSelect === 'tsSrTargetDoneByAmount' || typeSelect === 'tsSrTargetDoneByQty'">{{row.ManagerName}}</td>
                        <td>{{row.OwnerIdName}}</td>
                        <td class="rt-number-align" ng-show="!isQtyShow">{{row.Sum_Amount/10000|toFixNumber:2}}</td>
                        <td class="rt-number-align" ng-show="!isQtyShow">{{row.Sum_Amount_Rank}}</td>
                        <td class="rt-number-align" ng-show="isQtyShow">{{row.Sum_Qty|toFixNumber:2}}</td>
                        <td class="rt-number-align" ng-show="isQtyShow">{{row.Sum_Qty_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" ng-show="!isQtyShow">{{mItem/10000|toFixNumber:2}}</span>
                            <span ng-if="$index%3===1" ng-show="isQtyShow">{{mItem|toFixNumber:2}}</span>
                            <span ng-if="$index%3===2">{{mItem|toFixNumber:2}}%</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </rt-data-grid>
    </div>
</div>