<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1 control-label"><span style="color:red;">*</span>药品名称</label>
        <div class="col-sm-7">
            <ui-select allow-clear ng-model="vm.productSelected" theme="bootstrap">
                <ui-select-match>{{ $select.selected.Name }}</ui-select-match>
                <ui-select-choices repeat="item in vm.productList|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.showReport()">查询</button>
        </div>
    </div>

    <div class="form-group">
        <rt-datetime ng-model="vm.startDate"
                     rt-type="month"
                     rt-title="开始年月" rt-required="true" rt-col="3" rt-label-col="1"></rt-datetime>
        <rt-datetime ng-model="vm.endDate"
                     rt-type="month"
                     rt-title="结束年月" rt-required="true" rt-col="3" rt-label-col="1"></rt-datetime>
    </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>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="c1">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-10">
                <div id="report1" style="height:800px;" ng-style="{ width: chartWidth + 'px' }"/>
            </div>

            <div class="col-sm-2">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>省份</th>
                        <th>销量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="row in vm.reportData1.GridData">
                        <td>
                            {{$index+1}}
                        </td>
                        <td>
                            {{row.ToProvName}}
                        </td>
                        <td>
                            {{row.SaleCount}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="c2">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-10">
                <div id="report2" style="height:800px;" ng-style="{ width: chartWidth + 'px' }"/>
            </div>

            <div class="col-sm-2">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>省份</th>
                        <th>销量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="row in vm.reportData2.GridData">
                        <td>
                            {{$index+1}}
                        </td>
                        <td>
                            {{row.ToProvName}}
                        </td>
                        <td>
                            {{row.PurchaseCount}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>