<form class="form-horizontal">
    <div class="form-group">
        <rt-lookup2 rt-title="产品名称" ng-model="vm.productSelected" rt-get-data-name="Product.GetProductSize" rt-order-by="name asc"
            rt-col-list="[{Code:'name',Name:'产品名称'},{Code:'size',Name:'规格'},{Code:'code',Name:'产品编号'}]" rt-required="true" rt-col="3"
            rt-label-col="1"></rt-lookup2>
        <label class="col-sm-1 control-label">
            <span style="color:red;">*</span>省份</label>
        <div class="col-sm-3">
            <ui-select allow-clear ng-model="vm.provinceSelected" theme="bootstrap">
                <ui-select-match>{{$select.selected.NAME}}</ui-select-match>
                <ui-select-choices repeat="item in vm.provinceList | 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 rt-type="month" ng-model="vm.startDate" rt-title="开始年月" rt-required="true" rt-label-col="1" rt-col="3"></rt-datetime>
        <rt-datetime rt-type="month" ng-model="vm.endDate" rt-title="结束年月" rt-required="true" rt-label-col="1" rt-col="3"></rt-datetime>
    </div>
    <div class="form-group">
        <label class="col-sm-1 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>
    </div>
</form>

<ul class="nav nav-tabs">
    <li class="active" ng-click="selectTab('tab3')">
        <a href="#c3" onclick="return false;" data-toggle="tab">终端纯销排名</a>
    </li>
    <li ng-click="selectTab('tab4')">
        <a href="#c4" onclick="return false;" data-toggle="tab">终端纯销占比</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="c3">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-9">
                <div id="report3" style="height:1000px;" ng-style="{ width: chartWidth + 'px' }" />
            </div>
            <div class="col-sm-3">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>终端名称</th>
                            <th>销量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in vm.reportData.Grid3Data">
                            <td>
                                {{$index+1}}
                            </td>
                            <td>
                                {{row.ToEntInfoName}}
                            </td>
                            <td>
                                {{row.TotalSalesCount}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="tab-pane" id="c4">
        <div class="row" style="border-top: 1px dotted #d5c4c4; padding-top: 20px">
            <div class="col-sm-8">
                <div id="report4" style="height:400px;" ng-style="{ width: chartWidth + 'px' }" />
            </div>
            <div class="col-sm-3" style="margin-left: 20px">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>月份</th>
                            <th>医疗终端</th>
                            <th>零售终端</th>
                            <th>第三终端</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in vm.reportData.Grid4Data">
                            <td style="width: 80px">{{ row.DataMonthId }}</td>
                            <td>{{ row.MedicalCount }}</td>
                            <td>{{ row.RetailCount }}</td>
                            <td>{{ row.ThirdCount}}</td>
                        </tr>
                    </tbody>
                </table>
                <!--<table class="table table-hover">-->
                <!--<thead>-->
                <!--<tr>-->
                <!--<th>#</th>-->
                <!--<th>月份</th>-->
                <!--<th>终端类型</th>-->
                <!--<th>购进量</th>-->
                <!--</tr>-->
                <!--</thead>-->
                <!--<tbody>-->
                <!--<tr ng-repeat="row in vm.reportData.Grid4Data">-->
                <!--<td>-->
                <!--{{$index+1}}-->
                <!--</td>-->
                <!--<td>-->
                <!--{{row.DataMonthId}}-->
                <!--</td>-->
                <!--<td>-->
                <!--{{row.EntTypeId}}-->
                <!--</td>-->
                <!--<td>-->
                <!--{{row.PurchaseCount}}-->
                <!--</td>-->
                <!--</tr>-->
                <!--</tbody>-->
                <!--</table>-->
            </div>
        </div>
    </div>
</div>